Question

0

133

Views

Widen Image on scroll down using React

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.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-24T01:40:04.958Z

One of the possible solutions with runnable example

This is one of the way to do that:

Wrap your img with a padded and flex-centered container
Give width: 100% to your img, to fit the container
Give a padding to your container (to get your image small as you want it at start)
Setup a scroll listener
Compute a new padding value for your image container
Update the container with the new padding value

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 img

Here 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>

0

133

Widen Image on scroll down using React

1 answers

0

One of the possible solutions with runnable example

Find remote jobs

Andres GPT