ACT parallax
Adds parallax animation on mouse scrolling.
Very easy to use and completely customizable. Can be used and adjusted just with HTML classes so you can easily use it in WordPress block editor. Just enque the script and use the A-parallax class on any element you want.
Usage
using classes in HTML
Adds parallax animation to every element that has the class A-parallax.
<div class="green-apple A-parallax"></div>
<script type="text/javascript" src="ACT_parallax.js"></script>
Pass parameters with classes or data-attributes as following:
<div class="phone A-parallax speed-6 trans-4"></div>
<div class="phone A-parallax" data-speed="6"></div>
<script type="text/javascript" src="act-parallax.js"></script>You can apply the effect to any element.
Javascript
ACTparallax()
ACTparallax( [ target ], [ {arguments} ] )
ACTparallax('.umbrella', {speed: 2, transitionTime: 2})You can pass a selector as a parameter to add parallax animation on a different target element.
You can also optionally pass any of the following parameters:
speed
Any anumber. Sets the speed of the animation. The default is 4
transitionTime
when you stop scrolling, the movement of the element fades out smoothly. This parameter defines the timing of this effect. The default is 1.5
You can pass the parameters in HTML as data attributes on the element or as classes like below:
<div class="my-element A-parallax" data-speed="3" data-trans="2.5"></div>
<div class="my-element-b A-parallax speed-6 trans-1"></div>you can set the global variables window.noMobileParallax and window.noTabletParallax to true if you want to disable the parallax effect for the corresponding resolutions.
