Menu
I am trying to build and parallax animation on mousemove. The problem is that is not working and I can’t figure it would. Here’s the code
“`
data-speed=”2″
src=”svg/app design/guy.svg”
class=”guy illustration”
/>
const servicesAnimation = () => {
const cards = document.querySelectorAll(“.card”);
const illustrations = document.querySelectorAll(“.illustration”);
const parallaxEffect = (e) => {
illustrations.forEach((illustration) => {
const speed = illustration.dataset.speed;
cards.forEach((card) => {
const x = (card.getBoundingClientRect().width – e.pageX * speed) / 100;
const y = (card.getBoundingClientRect().height – e.pageY * speed) / 100;
});
illustration.style.transform = `translateX(${x}px) translateY(${y})`;
});
};
card.addEventListener(“mousemove”, parallaxEffect);
};
servicesAnimation();
the console does not display anything. It just doesn’t work.
``<i>
</i> cards.forEach((card) => {
const x = (card.getBoundingClientRect().width - e.pageX * speed) / 100;
const y = (card.getBoundingClientRect().height - e.pageY * speed) / 100;
});
illustration.style.transform = translateX(${x}px) translateY(${y});<i>
</i>`</CODE>
<LIST type="decimal"><LI>1. I'm surprised that the console doesn't output any error as the variables x and y cannot be accessed outside the anonymous function for <C>cards.forEach`.
2. I do not understand what your intention is, even if I consider that the transform should be inside the anonymous function.
Please post some sample HTML so that your code is easier to understand.``<i>
</i> <div class="card">
<div class="card-info">
<h1>Lorem<br />ipsum</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum eius soluta, ut perspiciatis, reiciendis autem quasi, aliquam aspernatur itaque eaque in accusantium cum distinctio. Sequi, veritatis vero. Earum necessitatibus corrupti magnam iusto tenetur possimus iste dicta quisquam blanditiis illo voluptate maiores, sit consequuntur libero labore.
</p>
<button>Ask for an offer</button>
</div>
<div class="card-illustration">
<img
data-speed="5"
src="svg/app design/phone.svg"
class="phone illustration"
/>
<img
data-speed="2"
src="svg/app design/guy.svg"
class="guy illustration"
/>
<img
data-speed="6"
src="svg/app design/girl.svg"
class="girl illustration"
/>
</div>
</div><i>
</i>`</CODE>
<CODE>`<i>
</i>.card-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
background-color: var(--highlight);
margin: 20px 0;
width: 250px;
padding: 20px;
border-radius: 8px;
}
.card-info {
width: 100%;
height: auto;
margin: 0;
}
.card-info h1 {
font-size: 1.6rem;
margin-bottom: 20px;
}
.card-info p {
margin-bottom: 20px;
}
.card-info button {
font-weight: 700;
color: white;
padding: 10px 35px;
margin-bottom: 10px;
background: var(--lightDark);
border: none;
border-radius: 50px;
transition: all 300ms ease;
}
.card-info button:hover {
color: var(--dark);
background: white;
}
.card-illustration {
position: relative;
width: 100%;
height: 250px;
}
.illustration {
position: absolute;
}
.phone {
width: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.guy {
width: 80px;
top: calc(50% + 0px);
left: calc(50% + 60px);
transform: translate(-50%, -50%);
}
.girl {
width: 65px;
top: calc(50% + 40px);
left: calc(50% - 80px);
transform: translate(-50%, -50%);
}<i>
</i>``>Uncaught ReferenceError: card is not defined
``<i>
</i> cards.forEach(card => {
card.addEventListener('mousemove', parallaxEffect);
});<i>
</i>``>Uncaught ReferenceError: x is not defined
``<i>
</i> const servicesAnimation = () => {
const cards = document.querySelectorAll(".card");
cards.forEach(card => {
const illustrations = card.querySelectorAll(".illustration");
const parallaxEffect = (e) => {
illustrations.forEach((illustration) => {
const speed = illustration.dataset.speed;
const x = (card.getBoundingClientRect().width - e.pageX * speed) / 100;
const y = (card.getBoundingClientRect().height - e.pageY * speed) / 100;
// error in the following line: "px" missing for Y
// illustration.style.transform = translateX(${x}px) translateY(${y});
illustration.style.transform = translateX(${x}px) translateY(${y}px);
});
};
card.addEventListener('mousemove', parallaxEffect);
});
};
servicesAnimation();<i>
</i>``>I am imagining that this is because of e.pageX and e.pageY.
>The pageY read-only property of the MouseEvent interface returns the Y (vertical) coordinate in pixels of the event **relative to the whole document**.
``<i>
</i> const parallaxEffect = (e) => {
illustrations.forEach((illustration) => {
const speed = illustration.dataset.speed;
const scrollLeft = document.documentElement.scrollLeft;
const scrollTop = document.documentElement.scrollTop;
const x =
(card.getBoundingClientRect().width - scrollLeft * speed) / 100;
const y =
(card.getBoundingClientRect().height - scrollTop * speed) / 100;
illustration.style.transform = translateX(${x}px) translateY(${y}px);
console.log(scrollLeft);
});
};<i>
</i>````<i>
</i> const parallaxEffect = (e) => {
illustrations.forEach((illustration) => {
const speed = illustration.dataset.speed,
// x-positon of the card relative to the document:
xCard = card.getBoundingClientRect().left + window.scrollX,
// y-positon of the card relative to the document:
yCard = card.getBoundingClientRect().top + window.scrollY,
// e.pageX-xCard is the offset relative to the card's
// top left corner:
x = (e.pageX - xCard) * speed / 100,
y = (e.pageY - yCard) * speed / 100;
illustration.style.transform = translateX(${x}px) translateY(${y}px);
});
};<i>
</i>````javaScript <i>
</i>console.log(illustration.getBoundingClientRect.top);<i>
</i>``console.log(illustration.getBoundingClientRect().top);`illustration.style.top = 0``<i>
</i>.girl {
width: 65px;
top: calc(50% + 40px);
left: calc(50% - 80px);
transform: translate(-50%, -50%);
}<i>
</i>`` /* transform: translate(-50%, -50%); */</C><br/>
in the CSS of the illustrations. I activated it again and additionally changed the javascript to this:
<CODE>`<i>
</i> const parallaxEffect = (e) => {
const boundingRectCard = card.getBoundingClientRect();
illustrations.forEach((illustration) => {
const speed = illustration.dataset.speed,
boundingRectIllu = illustration.getBoundingClientRect(),
// x-positon of the card relative to the document:
xCard = boundingRectCard.left + window.scrollX,
// y-positon of the card relative to the document:
yCard = boundingRectCard.top + window.scrollY,
// e.pageX-xCard is the offset relative to the card's
// top left corner
// -boundingRect.width/2 corresponds to -50% in CSS
x = (e.pageX - xCard) * speed / 100 - boundingRectIllu.width / 2,
y = (e.pageY - yCard) * speed / 100 - boundingRectIllu.height / 2;
illustration.style.transform = translateX(${x}px) translateY(${y}px);
});
};<i>
</i>````<i>
</i> const resetIllustrationPos = () => {
console.log("I'm out");
illustrations.forEach((illustration) => {
illustration.style.transform = "translateX(-50px) translateY(-50px)";
});
};
card.addEventListener("mousemove", parallaxEffect);
card.addEventListener("mouseleave", resetIllustrationPos);<i>
</i>``illustration.style.transform = "translateX(-50%) translateY(-50%)";`0.1.9 — BETA 5.12