Question 213689 in CSS Question posted in
Some basic documentation can be found here.

Css – How to have this scrolling effect which you see on tesla website

enter image description here

I have been trying to make tesla clone on my own but failing to create this type of scrolling effect where your text changes while you scroll. If you have solution please post them as well as source to know more about this thing.

This a gif if it is not working please visit a website of tesla to know what I am talking about.

Tags:

2

Answers


  1. 0

    search for scroll snap.
    I recommend the channel web dev simplified or FollowAndrew in youtube.

    Login or Signup to reply.
  2. 0

    I don’t know exactly how they created the effect on the Tesla website. However, when inspecting the elements or events in the browser’s developer tools, it appears that they are tracking the user’s scroll movement and updating the opacity of certain elements to achieve the desired effect.

    In my example, I used vanilla JavaScript with the Intersection Observer API to detect which image section is currently visible in the scroll container. The Intersection Observer API allows us to monitor when elements come into view (intersect with the viewport) during scrolling. When a new image section becomes visible, the JavaScript code updates the text content and opacity of the text-overlay (layer in front of the image sections).

    You can also check the following JavaScript library, for animation on scroll:

    const images = document.querySelectorAll('.section');
const textOverlay = document.getElementById('text-overlay');
const imageTexts = ["Model 3", "Model Y", "Modal X", "Solar Panel", "Solar Roof"];

const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.5
};

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const currentImageIndex = Array.from(images).indexOf(entry.target);
            textOverlay.style.opacity = 0;
            setTimeout(() => {
                textOverlay.textContent = imageTexts[currentImageIndex];
                textOverlay.style.opacity = 1;
            }, 400); // Adjust the duration of the fade effect (in milliseconds)
        }
    });
}, options);

images.forEach(image => {
    observer.observe(image);
});
    .scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100vh;
}

#text-overlay {
  position: sticky;
  top: 0;
  z-index: 99;
  text-align: center;
  padding-top: 70px;
  font-size: 40px;
  font-weight: 700;
  color: #fefefe;
  opacity: 1; /* Set opacity to 1 to make the text visible */
  transition: opacity 0.5s ease;
}
    <div class="scroll-container">
  <div id="text-overlay">Image 1</div>
  
  <img id="image1" class="section" src="https://tesla-cdn.thron.com/delivery/public/image/tesla/03e533bf-8b1d-463f-9813-9a597aafb280/bvlatuR/std/4096x2560/M3-Homepage-Desktop-LHD">
  
  <img id="image2" class="section" src="https://tesla-cdn.thron.com/delivery/public/image/tesla/8e2df1b9-a4bf-4eb9-beec-2cf5cc77fca0/bvlatuR/std/2880x2400/Desktop-ModelY?quality=70">
  
  <img id="image3" class="section" src="https://tesla-cdn.thron.com/delivery/public/image/tesla/ddc135ed-1638-40fb-8ab1-f8045059ecef/bvlatuR/std/4096x2560/Homepage-Model-X-Desktop-LHD">
  
  <img id="image4" class="section" src="https://tesla-cdn.thron.com/delivery/public/image/tesla/16b04537-a4be-4bf9-8637-86862a858da8/bvlatuR/std/2880x1800/_25-HP-SolarPanels-D">
  
  <img id="image5" class="section" src="https://tesla-cdn.thron.com/delivery/public/image/tesla/c877126e-0db5-409d-a412-04fc94b59b76/bvlatuR/std/2880x1800/HP-SR-Design-D">
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search