Author: | nateplusplus |
---|---|
Views Total: | 294 views |
Official Page: | Go to website |
Last Update: | January 20, 2022 |
License: | MIT |
Preview:

Description:
In motion design, dolly-in, also known as push-in, and zoom-in are effects where the camera moves toward the subject. This is often used to draw focus to an area of interest in a scene.
In this article, I will introduce you to a new JS library called pushIn.js to achieve this effect.
pushIn.js is a tiny and high-performance JavaScript library that applies a configurable dolly-in (also called push-in) to elements when scrolling the webpage.
How to use it:
1. Download and include the minified version of the pushIn.js JavaScript library on the page.
<script src="pushin.min.js"></script>
2. Initialize the pushIn.js on the target element.
pushInStart( '.push-in' );
<div class="push-in"> <div class="layer"> Content Here </div> </div>
3. The library also allows multiple layers in the same pushIn container. This can be useful in creating a parallax scrolling effect.
<div class="push-in"> <div class="layer"> Layer 1 </div> <div class="layer"> Layer 2 </div> ... more layers ... </div>
4. Determine the position (in pixels) at which the Dolly-in effect starts & ends.
<div class="push-in"> <div class="layer" data-pushin-from="300"> Layer 1 </div> <div class="layer" data-pushin-to="600"> Layer 2 </div> ... more layers ... </div>
5. Set the animation speed in milliseconds.
<div class="push-in"> <div class="layer" data-pushin-speed="25"> Layer 1 </div> <div class="layer" data-pushin-speed="35"> Layer 2 </div> ... more layers ... </div>
Changelog:
v2.1.0 (01/20/2022)
- Update