Mobile-first Full Page Scroll With Parallax Effect - Parallax.js

File Size: 30.3 KB
Views Total: 2381
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-first Full Page Scroll With Parallax Effect - Parallax.js

Parallax.js is a mobile-first one page scroll plugin for landing pages that allows the visitor to scrolls through fullscreen sections with touch swipe events.

Note: Please view the demo page on the mobile device or mobile emulator.

More features:

  • Supports both vertical and horizontal directions.
  • Loading indicator.
  • Swipe direction arrows.
  • Performant CSS/CSS3 powered animations.
  • Pagination bullets.
  • Animate child elements just like the parallax scroll effect.

How to use it:

1. Load the jQuery Parallax.js plugin's files in the document.

<link rel="stylesheet" href="./dist/css/parallax.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="./dist/js/parallax.js"></script>

2. Load the parallax-animation.css for extra animations on child elements.

<link rel="stylesheet" href="./dist/css/parallax-animation.css">

3. Add elements to sectioned pages and config the animation for each element using the following data attributes:

  • data-animation: animation type (slideToTop/Bottom/Left/Right, fadeInToTop/Bottom/Left/Right, followSlide, and fadeIn/Out)
  • data-delay: transition delay in milliseconds
  • data-duration: duration in milliseconds
  • data-timing-function: custom easing functions
<div class="pages">

  <!-- Slide 1 -->
  <section class="page">
    <div class="box1" data-animation="slideToBottom" data-timing-function="ease-in"></div>
    <div class="box2" data-animation="slideToTop" data-delay="300" data-timing-function="ease-out"></div>
    <div class="box3" data-animation="slideToRight" data-delay="600" data-timing-function="linear"></div>
    <div class="box4" data-animation="slideToLeft" data-delay="900" data-timing-function="cubic-bezier(.12,.73,.62,1.38)"></div>

   <!-- Slide 2 -->
  <section class="page">
    <div class="box1" data-animation="followSlide" data-duration="1000"></div>
    <div class="box2" data-animation="followSlide" data-delay="200" data-duration="1000"></div>
    <div class="box3" data-animation="followSlide" data-delay="400" data-duration="1000"></div>
    <div class="box4" data-animation="followSlide" data-delay="600" data-duration="1000"></div>

  <!-- Slide 3 -->
  <section class="page">
    <div class="box1" data-animation="fadeInToBottom"></div>
    <div class="box2" data-animation="fadeInToTop" data-delay="200"></div>
    <div class="box3" data-animation="fadeInToLeft" data-delay="400"></div>
    <div class="box4" data-animation="fadeInToRight" data-delay="600"></div>


4. Call the function on the top container to initialize the plugin.


5. Set the scroll direction. Default: 'vertical'.

  direction: 'horizontal'

6. Set the swipe animation. Default: 'default'.

  swipeAnim: 'cover'

7. Enable the drag effect. If set to false, the sectioned page will be scrolled to the next/prev one after 'touchend'. Default: true.

  drag:: 'false'

8. Enable/disable controls. Default: false.

  loading:   true,
  indicator: true,
  arrow:     true

9. Trigger a function after the page is scrolled.

  onchange: function(index, element, direction) {
    // console.log(index, element, direction);

10. Trigger a function after the screen orientation is changed.

  orientationchange: function(orientation) {
    // console.log(orientation);

This awesome jQuery plugin is developed by hahnzhu. For more Advanced Usages, please check the demo page or visit the official website.