Use JS plug-in to perform Parallax Scrolling Effect

Parallax.js

• Demo Site

• Table of Contents

• 3 ways to install this plug-in

  • Use CDN

    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

  • Download compiled.zip from release section
  • Install by npm

    npm i -s parallax-js

• If you don’t use CDN, then find parallax.js,then

  <script src="path/to/parallax.js"></script>

• Set up HTML default elements

  <div id="scene">
  </div>

• Set up your JavaScript content

  var scene = document.getElementById('scene');
  var parallaxInstance = new Parallax(scene);

• Run Parallax effect in codepen

• Other Parallax effect
  https://ithelp.ithome.com.tw/articles/10196098
  https://blog.csdn.net/github_36534129/article/details/72673585

Parallax effect with background image

• W3school Demo

• Casper Demo

• Three different Parallax effects with background

  • fixed
  • scroll
  • local

LAX.js

Demo 1
Demo 2
Github

• 2 ways to install

  • Install by npi

    npm install lax.js
    import lax from 'lax.js' 

  • By CDN

    <script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>

• Set up Javascript

  window.onload = function() {
      lax.setup() // init
  
      const updateLax = () => {
          lax.update(window.scrollY)
          window.requestAnimationFrame(updateLax)
      }
  
      window.requestAnimationFrame(updateLax)
  }

• Codepen Demo

• Other effect
  https://github.com/alexfoxy/lax.js

• Guidance video
  https://www.youtube.com/watch?v=jaVy3SCibJw

Animate.css

It’s a plug-in composed of 100% CSS without Javascript code
Before we go straight into animate.css
Let’s explore its foundation, Natives CSS animation.
Here is complete detail

• Document
• 2 ways to install
  • Install with npm

    npm install animate.css --save

  • Use CDN

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

• How to use it ?
  • add the class animate__animated to an element
  • add class of the animation names, as example below

    <h1 class="animate__animated animate__bounce">An animated element</h1>

  • Demo
• Demo for all effects

AOS

Github

• Install by npm

  npm install --save aos@next

  import AOS from 'aos';
  import 'aos/dist/aos.css'; // You can also use <link> for styles
  // ..
  AOS.init();

• Use CDN

  • Insert CSS CDN

    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

  • Insert JavaScript CDN

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

  • Initialize AOS

    <script>
      AOS.init();
    </script>

• Customize AOS
  If you want to customize AOS, then don’t use

  <script>
    AOS.init();
  </script>

  Please use

  AOS.init({
    // Global settings:
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
    initClassName: 'aos-init', // class applied after initialization
    animatedClassName: 'aos-animate', // class applied on animation
    useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
    disableMutationObserver: false, // disables automatic mutations' detections (advanced)
    debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
    throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
    
  
    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, // offset (in px) from the original trigger point
    delay: 0, // values from 0 to 3000, with step 50ms
    duration: 400, // values from 0 to 3000, with step 50ms
    easing: 'ease', // default easing for AOS animations
    once: false, // whether animation should happen only once - while scrolling down
    mirror: false, // whether elements should animate out while scrolling past them
    anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

• Change behavior of specific element
  Full list of animations

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

• AOS Demo
  Demo Link

12 choices for jQuery Parallax Plugins

https://jqueryhouse.com/12-jquery-parallax-plugins/