Question 287806 in Html Question posted in
Some basic documentation can be found here.

ReactJS | HTML | CSS – Slider sticky images

Good morning, I really like the effect on this website (https://showcasy.framer.website/) where while scrolling the images change and they overlap. I’m using ReactJS, has anyone some ideas to get that effect? I thought about creating a big container with position: sticky and inside of this as many elements as there are the images I have with display: none. Then, I thought about using JS to get the actual scrollY and when the user gets to a specified scrollY some images gets a class named "active" that puts them display: block, but I failed miserably, so I would be grateful if anyone could help me, thanks!

Tags:

2

Answers


  1. 0

    I did some research in relation to your question and on this site it’s like a mix of several packages that was used:

    react-stacked-card-list
    framer-motion
    and react-spring

    with these 3 packages and a little research you should be able to reproduce this effect.

    but if you want to code without these packages, it’s more complex, but here’s a code sample:

    import React, { useEffect } from 'react';

const ScrollEffect = () => {
  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll('.sections');

      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        const scrollPosition = window.scrollY;

        const translateY = scrollPosition - rect.top + index * window.innerHeight * 0.4;

        section.style.transform = `translateY(${translateY}px)`;
      });
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div>
      <div className="sections" style={{ height: '60vh', backgroundColor: 'red' }}>
        Section 1
      </div>
      <div className="sections" style={{ height: '60vh', backgroundColor: 'blue' }}>
        Section 2
      </div>
      {/* Ajoutez plus de sections ou images avec la classe .section */}
    </div>
  );
};

export default ScrollEffect;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    Login or Signup to reply.
  2. 0

    You should try GSAP for these kind of effects.
    Here is an example:
    https://gsap.com/community/forums/topic/33761-overlapping-card-effect/

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search