Skip to content

Commit

Permalink
fixed: wrong light effect position when using CSS: position fixed, ab…
Browse files Browse the repository at this point in the history 
…solute, sticky...
  • Loading branch information
@d2phap
d2phap committed Jun 9, 2018
1 parent 3bda22a commit 9739304
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 50 deletions.
24 changes: 12 additions & 12 deletions Source/demo/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ function applyEffect(selector, options = {}) {
clickEffect: false,
isContainer: false,
children: {
borderSelector: ".btn-border",
elementSelector: ".btn",
borderSelector: ".eff-reveal-border",
elementSelector: ".eff-reveal",
lightColor: "rgba(255,255,255,0.25)",
gradientSize: 150
}
Expand All @@ -171,8 +171,8 @@ function applyEffect(selector, options = {}) {

//element background effect --------------------
element.el.addEventListener("mousemove", (e) => {
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

if (_options.clickEffect && is_pressed) {

Expand All @@ -196,8 +196,8 @@ function applyEffect(selector, options = {}) {
function enableClickEffects(element, lightColor, gradientSize) {
element.el.addEventListener("mousedown", (e) => {
is_pressed = true
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

let cssLightEffect = `radial-gradient(circle ${gradientSize}px at ${x}px ${y}px, ${lightColor}, rgba(255,255,255,0)), radial-gradient(circle ${70}px at ${x}px ${y}px, rgba(255,255,255,0), ${lightColor}, rgba(255,255,255,0), rgba(255,255,255,0))`

Expand All @@ -206,8 +206,8 @@ function applyEffect(selector, options = {}) {

element.el.addEventListener("mouseup", (e) => {
is_pressed = false
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

Helpers.drawEffect(element, x, y, lightColor, gradientSize)
})
Expand Down Expand Up @@ -243,8 +243,8 @@ function applyEffect(selector, options = {}) {
//add border effect
element.el.addEventListener("mousemove", (e) => {
for (let i = 0; i < childrenBorder.length; i++) {
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left - window.scrollX
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top - window.scrollY

if (Helpers.isIntersected(childrenBorder[i], e.clientX, e.clientY, _options.gradientSize)) {
Helpers.drawEffect(childrenBorder[i], x, y, _options.lightColor, _options.gradientSize)
Expand Down Expand Up @@ -324,8 +324,8 @@ SOFTWARE.

function getOffset(element) {
return {
top: element.el.offsetTop,
left: element.el.offsetLeft
top: element.el.getBoundingClientRect().top,
left: element.el.getBoundingClientRect().left
};
}

Expand Down
24 changes: 12 additions & 12 deletions Source/dist/js/fluent-reveal-effect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ function applyEffect(selector, options = {}) {
clickEffect: false,
isContainer: false,
children: {
borderSelector: ".btn-border",
elementSelector: ".btn",
borderSelector: ".eff-reveal-border",
elementSelector: ".eff-reveal",
lightColor: "rgba(255,255,255,0.25)",
gradientSize: 150
}
Expand All @@ -147,8 +147,8 @@ function applyEffect(selector, options = {}) {

//element background effect --------------------
element.el.addEventListener("mousemove", (e) => {
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

if (_options.clickEffect && is_pressed) {

Expand All @@ -172,8 +172,8 @@ function applyEffect(selector, options = {}) {
function enableClickEffects(element, lightColor, gradientSize) {
element.el.addEventListener("mousedown", (e) => {
is_pressed = true
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

let cssLightEffect = `radial-gradient(circle ${gradientSize}px at ${x}px ${y}px, ${lightColor}, rgba(255,255,255,0)), radial-gradient(circle ${70}px at ${x}px ${y}px, rgba(255,255,255,0), ${lightColor}, rgba(255,255,255,0), rgba(255,255,255,0))`

Expand All @@ -182,8 +182,8 @@ function applyEffect(selector, options = {}) {

element.el.addEventListener("mouseup", (e) => {
is_pressed = false
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

Helpers.drawEffect(element, x, y, lightColor, gradientSize)
})
Expand Down Expand Up @@ -219,8 +219,8 @@ function applyEffect(selector, options = {}) {
//add border effect
element.el.addEventListener("mousemove", (e) => {
for (let i = 0; i < childrenBorder.length; i++) {
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left - window.scrollX
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top - window.scrollY

if (Helpers.isIntersected(childrenBorder[i], e.clientX, e.clientY, _options.gradientSize)) {
Helpers.drawEffect(childrenBorder[i], x, y, _options.lightColor, _options.gradientSize)
Expand Down Expand Up @@ -300,8 +300,8 @@ SOFTWARE.

function getOffset(element) {
return {
top: element.el.offsetTop,
left: element.el.offsetLeft
top: element.el.getBoundingClientRect().top,
left: element.el.getBoundingClientRect().left
};
}

Expand Down
4 changes: 2 additions & 2 deletions Source/lib/js/helpers/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ SOFTWARE.

function getOffset(element) {
return {
top: element.el.offsetTop,
left: element.el.offsetLeft
top: element.el.getBoundingClientRect().top,
left: element.el.getBoundingClientRect().left
};
}

Expand Down
20 changes: 10 additions & 10 deletions Source/lib/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ function applyEffect(selector, options = {}) {
clickEffect: false,
isContainer: false,
children: {
borderSelector: ".btn-border",
elementSelector: ".btn",
borderSelector: ".eff-reveal-border",
elementSelector: ".eff-reveal",
lightColor: "rgba(255,255,255,0.25)",
gradientSize: 150
}
Expand All @@ -60,8 +60,8 @@ function applyEffect(selector, options = {}) {

//element background effect --------------------
element.el.addEventListener("mousemove", (e) => {
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

if (_options.clickEffect && is_pressed) {

Expand All @@ -85,8 +85,8 @@ function applyEffect(selector, options = {}) {
function enableClickEffects(element, lightColor, gradientSize) {
element.el.addEventListener("mousedown", (e) => {
is_pressed = true
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

let cssLightEffect = `radial-gradient(circle ${gradientSize}px at ${x}px ${y}px, ${lightColor}, rgba(255,255,255,0)), radial-gradient(circle ${70}px at ${x}px ${y}px, rgba(255,255,255,0), ${lightColor}, rgba(255,255,255,0), rgba(255,255,255,0))`

Expand All @@ -95,8 +95,8 @@ function applyEffect(selector, options = {}) {

element.el.addEventListener("mouseup", (e) => {
is_pressed = false
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

Helpers.drawEffect(element, x, y, lightColor, gradientSize)
})
Expand Down Expand Up @@ -132,8 +132,8 @@ function applyEffect(selector, options = {}) {
//add border effect
element.el.addEventListener("mousemove", (e) => {
for (let i = 0; i < childrenBorder.length; i++) {
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left - window.scrollX
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top - window.scrollY

if (Helpers.isIntersected(childrenBorder[i], e.clientX, e.clientY, _options.gradientSize)) {
Helpers.drawEffect(childrenBorder[i], x, y, _options.lightColor, _options.gradientSize)
Expand Down
2 changes: 1 addition & 1 deletion Source/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Source/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "fluent-reveal-effect",
"version": "0.9.1",
"version": "0.9.2",
"description": "Reveal Effect (Fluent Design)",
"main": "../Dist/js/[name].js",
"scripts": {
Expand Down
24 changes: 12 additions & 12 deletions docs/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ function applyEffect(selector, options = {}) {
clickEffect: false,
isContainer: false,
children: {
borderSelector: ".btn-border",
elementSelector: ".btn",
borderSelector: ".eff-reveal-border",
elementSelector: ".eff-reveal",
lightColor: "rgba(255,255,255,0.25)",
gradientSize: 150
}
Expand All @@ -171,8 +171,8 @@ function applyEffect(selector, options = {}) {

//element background effect --------------------
element.el.addEventListener("mousemove", (e) => {
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

if (_options.clickEffect && is_pressed) {

Expand All @@ -196,8 +196,8 @@ function applyEffect(selector, options = {}) {
function enableClickEffects(element, lightColor, gradientSize) {
element.el.addEventListener("mousedown", (e) => {
is_pressed = true
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

let cssLightEffect = `radial-gradient(circle ${gradientSize}px at ${x}px ${y}px, ${lightColor}, rgba(255,255,255,0)), radial-gradient(circle ${70}px at ${x}px ${y}px, rgba(255,255,255,0), ${lightColor}, rgba(255,255,255,0), rgba(255,255,255,0))`

Expand All @@ -206,8 +206,8 @@ function applyEffect(selector, options = {}) {

element.el.addEventListener("mouseup", (e) => {
is_pressed = false
let x = e.pageX - Helpers.getOffset(element).left
let y = e.pageY - Helpers.getOffset(element).top
let x = e.pageX - Helpers.getOffset(element).left - window.scrollX
let y = e.pageY - Helpers.getOffset(element).top - window.scrollY

Helpers.drawEffect(element, x, y, lightColor, gradientSize)
})
Expand Down Expand Up @@ -243,8 +243,8 @@ function applyEffect(selector, options = {}) {
//add border effect
element.el.addEventListener("mousemove", (e) => {
for (let i = 0; i < childrenBorder.length; i++) {
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top
let x = e.pageX - Helpers.getOffset(childrenBorder[i]).left - window.scrollX
let y = e.pageY - Helpers.getOffset(childrenBorder[i]).top - window.scrollY

if (Helpers.isIntersected(childrenBorder[i], e.clientX, e.clientY, _options.gradientSize)) {
Helpers.drawEffect(childrenBorder[i], x, y, _options.lightColor, _options.gradientSize)
Expand Down Expand Up @@ -324,8 +324,8 @@ SOFTWARE.

function getOffset(element) {
return {
top: element.el.offsetTop,
left: element.el.offsetLeft
top: element.el.getBoundingClientRect().top,
left: element.el.getBoundingClientRect().left
};
}

Expand Down

0 comments on commit 9739304

Please sign in to comment.