Scoll in Animation using ScrollMagic.js Plugin

In this tutorial, we will learn how to create a scrolling text effect using the ScrollMagic.js plugin. This powerful JavaScript library allows us to easily create complex scrolling animations and interactions. We will be using the ScrollMagic.js plugin to create a scrolling text effect that can be used to add dynamic and engaging elements to your website or web application. Whether you're a beginner or an experienced developer, this tutorial will provide you with the knowledge and tools you need to create your own scrolling text effect using ScrollMagic.js.

index.html

<html>
      <head>
          <title>Fade In Text On Scrolling</title>
          <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
          <link href="https://fonts.googleapis.com/css?family=Open+Sans|Staatliches" rel="stylesheet">
          <script src="js/scroll.js"></script>
          <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
          <div class="container1">
              <h1>SCROLL DOWN</h1>
              <h2>some texts will appear</h2>
          </div>
          <div class="container2">
              <div class="fade-in">
                  <h1>LOREM IPSUM</h1>
                  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                  occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
              </div>
          </div>
      </body>

  </html>

style.css

html, body{
      margin: 0;
      width: 100%;
  }

  .container1{
      height: 800px;
      background-color: #263c63;
      text-align: center;
  }

  .container1 h1{
      font-family: 'Staatliches', cursive;
      font-size: 200px;
      letter-spacing: 0.1em;
      color: #9aeaf4;
      padding-top: 200px;
      margin: 0;
  }

  .container1 h2{
      font-size: 40px;
      font-family: 'Open Sans', sans-serif;
      margin:0;
      color: #fff;
  }

  .container2{
      height: 600px;
  }

  .fade-in{
      width: 100%;
      height: 400px;
      margin-top: 10%;
      text-align: center;
      opacity: 0;
      transform: translateY(50px);
      transition: all 1s ease-out;
  }

  .fade-in.show{
      opacity: 1;
      transform: translateY(0);
  }

  .fade-in h1{
      font-family: 'Staatliches', cursive;
      margin: 0;
      font-size: 120px;
      letter-spacing: 0.1em;
  }

  .fade-in h2{
      font-family: 'Open Sans', sans-serif;
      font-weight: lighter;
      letter-spacing: 0.1em;
      line-height: 1.5;
      width: 70%;
      font-size: 20px;
      margin-left: 15%;
  }

scroll.js

$(document).ready(function(){

      var controller = new ScrollMagic.Controller();

      var ourScene = new ScrollMagic.Scene({
          triggerElement: '.fade-in',
          reverse: false
      })
          .setClassToggle('.fade-in', 'show')
          .addTo(controller);
  });

Tutorials Warehouse

Search This Blog