Snap On Scroll - Images & Code:

Free images:

Code:

1. CSS ID and class:

				
					fullpage

section1
section

section2
section

section3
section

section4
section


				
			

2. CSS code:

				
					 <link data-minify="1"
      rel="stylesheet"
      href="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/fullPage.js/3.1.2/fullpage.min.css?ver=1768476709"
    />
<style>
    
      .section {
        display: flex;
        flex-direction: column;
        justify-content: bottom;
        align-items: bottom;
        height: 100vh;
        text-align: bottom;
        font-size: 6rem;
        overflow: hidden;
        position: relative;
        /*transition: transform 5s ease-in-out;*/
      }

      /* Navbar */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        z-index: 10;
      }

      .navbar .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: #f1f1f1;
      }

      .navbar .links {
        display: flex;
        white-space: nowrap;
      }
      .navbar .links a{
          text-decoration: none;
      }

      /* Change main text color to black */
      h1 {
        color: black;
        opacity: 1;
        margin-bottom: 20px;
      }

     

      /* Scroll text styling */
      .scroll-text {
        position: fixed;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        font-size: 1.5rem;
        color: #f1f1f1;
        opacity: 0.8;
        z-index: 5;
      }

      .scroll-text.left {
        left: 20px;
      }

      .scroll-text.right {
        right: 20px;
      }


.fp-tableCell {
    display: table-cell;
    vertical-align: center;
    width: 100%;
    height: 100%;

 </style>



<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.5/gsap.min.js?ver=1767193387"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js?ver=1767193387"></script> 


				
			

3. Javascript:

				
					<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/fullPage.js/3.1.2/fullpage.min.js?ver=1759923533"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.11.3/gsap.min.js?ver=1759923533"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const fullpageInstance = new fullpage("#fullpage", {
      scrollingSpeed: 1000,
      autoScrolling: true,
      scrollHorizontally: true,
      navigation: false,
      onLeave: function (origin, destination, direction) {
        const leavingText = origin.item.querySelector("h1");
        const enteringText = destination.item.querySelector("h1");
        const line = destination.item.querySelector(".line");
        const navbarText = document.querySelectorAll(".navbar a, .navbar h2");
        const scrollTexts = document.querySelectorAll(".scroll-text h2");

        gsap.to(leavingText, {
          opacity: 0,
          y: -100,
          duration: 1.5,
          ease: "power2.out",
        });

        gsap.fromTo(
          enteringText,
          { y: 100, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            color: destination.item.getAttribute("data-text-color"),
            duration: 1.5,
            ease: "power2.out",
            delay: 0.5,
          }
        );

        const newBgColor = destination.item.getAttribute("data-bg");
        const newTextColor = destination.item.getAttribute("data-text-color");

        // Baggrundsfarve på sektionen
        destination.item.style.backgroundColor = newBgColor;

        // Skift farver på line, navbar og scroll-tekster
        if (line) {
          gsap.to(line, { color: newTextColor, duration: 0.5 });
        }
        gsap.to(navbarText, { color: newTextColor, duration: 0.5 });
        gsap.to(scrollTexts, { color: newTextColor, duration: 0.5 });

        // Line width animation
        const newLineWidth = (destination.index + 1) * 150;
        const currentLineWidth = (origin.index + 1) * 150;

        if (direction === "down") {
          if (line) {
            gsap.to(line, {
              width: newLineWidth + "px",
              duration: 1.5,
              ease: "power2.out",
            });
          }
        } else {
          if (line) {
            gsap.to(line, {
              width: currentLineWidth + "px",
              duration: 1.5,
              ease: "power2.out",
            });
          }
        }
      },
    });

    document.getElementById('link1').addEventListener('click', function(){
      scrollToSection(1);
    });
    document.getElementById('link2').addEventListener('click', function(){
      scrollToSection(2);
    });
    document.getElementById('link3').addEventListener('click', function(){
      scrollToSection(3);
    });
    document.getElementById('link4').addEventListener('click', function(){
      scrollToSection(4);
    });

    function scrollToSection(sectionIndex) {
      fullpageInstance.moveTo(sectionIndex);
    }
  });
</script>

				
			

4. Let make it move:

				
					 #section1 {
    transform-origin: center center;
    animation: kenBurns 10s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}




				
			

How to copy my Elementor projects:

Download free images

Fill out the form to get the images I used in my YouTube video

By signing up, you’ll also join my newsletter – full of free web design tips and resources.
No spam, unsubscribe with one-click.