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>
  </section>

   <!-- 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>
  </section>

  <!-- 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>
  </section>

</div>

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

$('.pages').parallax();

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

$('.pages').parallax({
  direction: 'horizontal'
});

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

$('.pages').parallax({
  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.

$('.pages').parallax({
  drag:: 'false'
});

8. Enable/disable controls. Default: false.

$('.pages').parallax({
  loading:   true,
  indicator: true,
  arrow:     true
});

9. Trigger a function after the page is scrolled.

$('.pages').parallax({
  onchange: function(index, element, direction) {
    // console.log(index, element, direction);
  },
});

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

$('.pages').parallax({
  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.