Fade In Elements With A Parallax Effect - Landing-Elements

Landing-Elements is a jQuery plugin for fancy scroll interactions that make elements fly in from specific directions with fadeIn and parallax effects as you scroll down the webpage.

How to use it:

1. Create a group of 'landing' elements and config the duration & direction using data attributes as these:

<div class="rowLandingElement" data-duration="500">
  <div class="first" data-left="-250" data-bottom="500">I'm First</div>
  <div class="center" data-bottom="-300">centrale</div>
  <div class="last" data-left="250" data-bottom="500">ultimo</div>
</div>

<div class="rowLandingElement" data-duration="1000">
  <div class="first" data-left="125" data-bottom="-250">primo</div>
  <div class="center" data-bottom="300">centrale</div>
  <div class="last" data-left="-250" data-bottom="250">ultimo</div>
</div>

<div class="rowLandingElement" data-duration="1500">
  <div class="first" data-left="-250" data-bottom="500">I'm First</div>
  <div class="center" data-bottom="-300">centrale</div>
  <div class="last" data-left="250" data-bottom="500">ultimo</div>
</div>

...

2. Load both jQuery JavaScript library and the jQuery Landing-Elements plugin at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous">
</script>
<script src="js/landingElements.js"></script>

3. Initialize the plugin and we're done.

$('.rowLandingElement').landingElements()

Changelog:

2020-09-01

• JS updated

---

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