Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

1746 Andev.web

Abrir en el editor Video Publica tu código

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

Recomendado

20 March 2024

Plantilla de página de destino HTML con animaciones

28 October 2025

Ejemplo de control deslizante de blog de Swiper

30 June 2025

Sistemas de energía solar | Soluciones GES de SolarTek

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <section class="events-page">
    <div id="section1" class="event">
      <div class="pinWrapper">
        <div class="text">
          <h2>Living</h2>
          <p>Explore our range of stylish and comfortable living room furniture.</p>
        </div>
        <div class="image" id="loaderVideo">
          <video autoplay loop muted playsinline>
            <source src="https://www.yudiz.com/codepen/studio-r/bg-video.mp4" type="video/mp4">
          </video>
        </div>
      </div>
      <div class="scrollBtn">
        <h6>scroll</h6>
        <span></span>
      </div>
    </div>
    
    <div id="section2" class="event">
      <div class="pinWrapper">
        <div class="text">
          <h2>Kitchen</h2>
          <p>Check out our modern and functional kitchen furniture and accessories.</p>
        </div>
        <div class="image"></div>
      </div>
    </div>
    <div id="section3" class="event">
      <div class="pinWrapper">
        <div class="text">
          <h2>Bedroom</h2>
          <p>Discover our collection of bedroom furniture to create your dream space.</p>
        </div>
        <div class="image"></div>
      </div>
    </div>
    <div id="section4" class="event">
      <div class="pinWrapper">
        <div class="text">
          <h2>Office</h2>
          <p>Find the perfect office furniture to make your workspace comfortable and productive.</p>
        </div>
        <div class="image"></div>
      </div>
    </div>
  </section>

<div id="preloader">
    <div class="text-wrapper">
      <h1 id="first-text">Studio R</h1>
      <h3 id="second-text">Creative Agency</h3>
    </div>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js'></script>
<script src='https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

:root {
  --primary: #212121;
  --secondary: #515151;
  --white: #ffffff;
}
* {
  margin: 0;
  padding: 0;
}
body,
html {
  overflow-x: hidden;
}
body {
  background-color: var(--primary);
  height: 100%;
  color: var(--white);
}
body::-webkit-scrollbar {
  width: 4px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}
::selection {
  background: var(--primary);
  color: var(--white);
}
.overflow-hidden {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
h1,
h2,
h3 {
  margin-bottom: 30px;
  font-size: 24px;
  line-height: 1;
  text-transform: capitalize;
  -webkit-text-transform: capitalize;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  -webkit-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 1.2px;
  -webkit-text-transform: uppercase;
  text-transform: uppercase;
}
p {
  font-size: 45px;
  line-height: 1.4;
  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
}
.pinWrapper {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 11;
}
.scrollmagic-pin-spacer {
  position: absolute !important;
  clip: rect(auto, auto, auto, auto);
}
.event {
  position: relative;
  overflow: hidden;
  height: 100svh;
  width: 100vw;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#section1.event::before {
  background-color: rgb(21 22 28 / 15%);
}
#section2.event::before {
  background-color: rgb(21 22 28 / 34%);
}
#section3.event::before {
  background-color: rgb(86 82 76 / 57%);
}
#section4.event::before {
  background-color: rgb(120 115 103 / 58%);
}

#section1 {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-living.jpg");
}
#section2 {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-kitchen.jpg");
}
#section3 {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-badroom.jpg");
}
#section4 {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-office.jpg");
}
.image {
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  background-size: cover;
  background-position: center center;
  transition: width 1s, height 1s;
  -webkit-transition: width 1s, height 1s;
  box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  -webkit-box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
  transform-origin: center;
  -webkit-transform-origin: center;
  z-index: 8888;
  overflow: hidden;
  border-radius: 0;
}
.image:not(#loaderVideo) {
  top: -50%;
  width: 500px;
  height: 500px;
  left: auto;
  right: 100px;
  position: absolute;
  border-radius: 12px;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
}
#section1 .image video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
#section2 .image {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-kitchen.jpg");
}
#section3 .image {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-badroom.jpg");
}
#section4 .image {
  background-image: url("https://www.yudiz.com/codepen/studio-r/bg-office.jpg");
}

/* Section Text */
.text {
  top: -50%;
  left: 0;
  position: absolute;
  transform: translate(100px, -50%);
  -webkit-transform: translate(100px, -50%);
  width: 43%;
}
#section1 .text {
  top: 50%;
}

/* Scroll Button */
.scrollBtn {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  width: 100px;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  transition: all ease-in-out 0.35s;
  -webkit-transition: all ease-in-out 0.35s;
}
.scrollBtn.move {
  visibility: hidden;
  opacity: 0;
}
.scrollBtn span {
  width: 12px;
  height: 12px;
  display: block;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  animation: animate 2s infinite;
  -webkit-animation: animate 2s infinite;
  margin: auto;
}
.scrollBtn h6 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: "Titillium Web", sans-serif;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-transform: uppercase;
  letter-spacing: 2px;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}
@-webkit-keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}

/* Preloader */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  -webkit-transition: all 1s;
}
#preloader img,
#preloader video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#preloader::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
}
.text-wrapper {
  text-align: center;
  height: 24px;
  overflow: hidden;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
#first-text {
  animation: moveUp 1s 1s forwards;
  -webkit-animation: moveUp 1s 1s forwards;
}
#second-text {
  opacity: 0;
  transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards;
  -webkit-animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards;
}
@keyframes moveUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}
@-webkit-keyframes moveUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

@keyframes scrollup {
  100% {
    transform: translateY(-54px);
  }
}
@-webkit-keyframes scrollup {
  100% {
    transform: translateY(-54px);
  }
}

@keyframes moveUpAgain {
  0% {
    transform: translateY(-54px);
    opacity: 1;
  }
  60% {
    transform: translateY(-54px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}
@-webkit-keyframes moveUpAgain {
  0% {
    transform: translateY(-54px);
    opacity: 1;
  }
  60% {
    transform: translateY(-54px);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* Media Query */
@media screen and (max-width: 1399px) {
  h2 {
    font-size: 22px;
  }
  p {
    font-size: 38px;
  }
  .text {
    transform: translate(60px, -50%);
    -webkit-transform: translate(60px, -50%);
  }
  .image:not(#loaderVideo) {
    height: 450px;
    width: 450px;
    right: 80px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 1199px) {
  h2 {
    font-size: 20px;
  }
  p {
    font-size: 34px;
  }
  .text {
    transform: translate(40px, -50%);
    -webkit-transform: translate(40px, -50%);
    width: 44%;
  }
  .image:not(#loaderVideo) {
    height: 400px;
    width: 400px;
    right: 60px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 991px) {
  h2 {
    font-size: 18px;
  }
  p {
    font-size: 26px;
  }
  .text {
    transform: translate(24px, -50%);
    -webkit-transform: translate(24px, -50%);
    width: 44%;
  }
  .image:not(#loaderVideo) {
    height: 310px;
    width: 310px;
    right: 40px;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 16px;
  }
  p {
    font-size: 22px;
  }
  .image:not(#loaderVideo) {
    height: 220px;
    width: 220px;
  }
}
@media screen and (max-width: 576px) {
  .text {
    top: -36%;
    width: 100%;
    width: calc(100% - 80px);
  }
  #section1 .text {
    top: 64%;
  }
  .image:not(#loaderVideo) {
    top: -75%;
    left: 24px;
    right: auto;
    transform: translate(0%, -25%);
    -webkit-transform: translate(0%, -25%);
  }
}

JS

// Smooth Scroll
        const lenis = new Lenis()
        lenis.on('scroll', (e) => {
            console.log(e)
        })
        function raf(time) {
            lenis.raf(time)
            requestAnimationFrame(raf)
        }
        requestAnimationFrame(raf)

// Scroll Down - Button
        document.addEventListener('DOMContentLoaded', function () {
            const scrollBtn = document.getElementById('scrollBtn');
            window.addEventListener('scroll', function () {
                const box = document.querySelector('.scrollBtn');
                if (window.scrollY > 0) {
                    box.classList.add('move');
                } else {
                    box.classList.remove('move');
                }
            });
        });

// Preloader Text 
        window.addEventListener('load', function () {
            const preloader = document.getElementById('preloader');
            const firstText = document.getElementById('first-text');
            const secondText = document.getElementById('second-text');
            // Show the first text
            firstText.style.opacity = '1';
            // loading animation
            setTimeout(function () {
                firstText.style.opacity = '0';
                secondText.style.opacity = '1';
            }, 1000);
            setTimeout(function () {
                preloader.style.display = 'none';
            }, 4000);
        });

// Loader Video 
        window.addEventListener('load', function () {
            document.body.classList.add('overflow-hidden'); // body - overflow hidden
            document.documentElement.classList.add('overflow-hidden'); // html - overflow hidden
            setTimeout(function () {
                const loaderVideo = document.getElementById('loaderVideo');
                loaderVideo.style.width = '90%';
                loaderVideo.style.height = '90%';
                loaderVideo.style.transform = 'translate(-50%, -50%)';
                loaderVideo.style.top = '50%';
                loaderVideo.style.left = '50%';
                loaderVideo.style.position = 'fixed';
                loaderVideo.style.borderRadius = '12px';

}, 2000);
            setTimeout(() => {
                if (window.matchMedia('(max-width: 576px)').matches) {
                    loaderVideo.style.width = '220px';
                    loaderVideo.style.height = '220px';
                    loaderVideo.style.top = '25%';
                    loaderVideo.style.left = '24px';
                    loaderVideo.style.right = 'auto';
                    loaderVideo.style.transform = 'translate(0%, -25%)';
                } else if (window.matchMedia('(max-width: 767px)').matches) {
                    loaderVideo.style.width = '220px';
                    loaderVideo.style.height = '220px';
                    loaderVideo.style.left = 'auto';
                    loaderVideo.style.right = '40px';
                    loaderVideo.style.transform = 'translate(0%, -50%)';
                } else if (window.matchMedia('(max-width: 991px)').matches) {
                    loaderVideo.style.width = '310px';
                    loaderVideo.style.height = '310px';
                    loaderVideo.style.left = 'auto';
                    loaderVideo.style.right = '40px';
                    loaderVideo.style.transform = 'translate(0%, -50%)';
                } else if (window.matchMedia('(max-width: 1199px)').matches) {
                    loaderVideo.style.width = '400px';
                    loaderVideo.style.height = '400px';
                    loaderVideo.style.left = 'auto';
                    loaderVideo.style.right = '60px';
                    loaderVideo.style.transform = 'translate(0%, -50%)';
                } else if (window.matchMedia('(max-width: 1399px)').matches) {
                    loaderVideo.style.width = '450px';
                    loaderVideo.style.height = '450px';
                    loaderVideo.style.left = 'auto';
                    loaderVideo.style.right = '80px';
                    loaderVideo.style.transform = 'translate(0%, -50%)';
                } else {
                    loaderVideo.style.width = '500px';
                    loaderVideo.style.height = '500px';
                    loaderVideo.style.top = '50%';
                    loaderVideo.style.left = 'auto';
                    loaderVideo.style.right = '100px';
                    loaderVideo.style.transform = 'translate(0%, -50%)';
                    loaderVideo.style.position = 'absolute';
                }
                document.body.classList.remove('overflow-hidden'); // body - overflow visible
                document.documentElement.classList.remove('overflow-hidden'); // html - overflow visible
            }, 3000); // Adjust the time as needed
        });

// ScrollMagic
        var controller = new ScrollMagic.Controller({ loglevel: 3 });
        new ScrollMagic.Scene({
            triggerElement: "#section2",
            triggerHook: "onEnter",
            duration: "100%"
        }).setPin("#section1 .pinWrapper", {
            pushFollowers: false
        }).addTo(controller);
        new ScrollMagic.Scene({
            triggerElement: "#section2",
            triggerHook: "onEnter",
            duration: "200%"
        }).setPin("#section2 .pinWrapper", {
            pushFollowers: false
        }).addTo(controller);
        new ScrollMagic.Scene({
            triggerElement: "#section3",
            triggerHook: "onEnter",
            duration: "200%"
        }).setPin("#section3 .pinWrapper", {
            pushFollowers: false
        }).addTo(controller);
        new ScrollMagic.Scene({
            triggerElement: "#section4",
            triggerHook: "onEnter",
            duration: "100%"
        }).setPin("#section4 .pinWrapper", {
            pushFollowers: false
        }).addTo(controller);

Recomendado

Plantilla de página de destino HTML con animaciones

Ejemplo de control deslizante de blog de Swiper

Sistemas de energía solar | Soluciones GES de SolarTek

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS