Box Scroll Effect



Box Scroll Effect USing HTML and CSS




 
<div class="container">
  <div class="section">Hello World.</div>
  <div class="section">Box Scroll Demo</div>
  <div class="section"> <i class="fa fa-birthday-cake"></i></div>
  <div class="section"> <i class="fa fa-pizza-slice"></i></div>
  <div class="section">Fin.</div>
</div>                    
                  
                



 @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}

.section {
  display: grid;
  place-items: center;
}

.section {
  min-height: 100vh;
  color: rgba(255, 255, 255, 0.7);
  transform-style: preserve-3d;
  font-weight: 500;
  font-size: 48px;
}
.section i {
  font-size: 64px;
}
.section:nth-child(1) {
  background-color: #9a8af2;
}
.section:nth-child(2) {
  background-color: #a8d670;
}
.section:nth-child(3) {
  background-color: #71bdea;
}
.section:nth-child(4) {
  background-color: #f9dc67;
}
.section:nth-child(5) {
  background-color: #e6778e;
}
                
              



const sections = gsap.utils.toArray($(".section"));

sections.forEach((section, index) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top top",
    toggleClass: "active",
    onUpdate: (self) => {
      $(sections).css({
        transform: "none"
      });
      $(section).css({
        "transform-origin": "bottom center",
        transform: `perspective(2000px) rotateX(${self.progress * 90}deg)`
      });
      const next = $(section).next();

      if (self.direction && next.length) {
        $(next).css({
          "transform-origin": "top center",
          transform: `perspective(2000px) rotateX(${
            self.progress * 90 - 90
          }deg)`
        });
      }
    },
    snap: {
      snapTo: 1,
      duration: 1
    }
  });
});

/* Color Inspiration: 
https://dribbble.com/shots/10970419-Workly-Color-System

https://dribbble.com/sandhya_subram

*/