I want an image animation effect while scrolling using react.js, something similar to this : https://www.roche.com/ I have this code :
<ArticleWrapper >
<img className='image' src={Img} alt='Image' />
</ArticleWrapper >
I want the img to be widen animated while scrolling down and returns to normal when scrolling up !
Thanks.
This is one of the way to do that:
In the snippet i have 2 important variables:
maxPadding the padding value (higher = smaller img)maxScrollFor100 the point (in px) where the scroll is complete aka big imgHere we have the runnable snippet
const maxScrollFor100 = 300; // Y Scroll Point where the image should be 100% width
const maxPadding = 100; // Initial padding of the container
const imgContainer = document.getElementById('img-container');
imgContainer.style.padding = '0 ' + maxPadding + 'px';
window.addEventListener('scroll', function(event) {
// Get the current scrollY point
const sY = window.scrollY;
// Get a padding percentage (we want 100% with 0 scroll and 0% with 300 or + scroll)
const percent = 100 - (sY >= maxScrollFor100 ? 100 : sY / (maxScrollFor100 / 100));
// console.log("Actual Percent Zoom", percent.toFixed(1)); // Show the current zoom percentage.
// Compute the new padding value
const padding = maxPadding * (percent / 100);
// Update the dom with the new padding for the image container
imgContainer.style.padding = '0 ' + padding + 'px';
}, {passive: true}).flex-center {
display: flex;
justify-content: center;
align-items: center;
}<div style="padding-top: 150px">
<div id="img-container" class="flex-center">
<img src="http://www.pixolo.it/wp-content/uploads/2012/11/stones-and-sea-1920x1200-wallpaper-6620.jpg" width="100%" />
</div>
</div>