Parallax
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Create Parallax Effect
Create Parallax is simple with WoodPecker®. Just specify the options and set the markup and you are good to go.
<div class = "col-lg-12 wdpk-parallax" id = "parallax-1"></div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-parallax").length !== 0)
{
let obj = {
selectorID: 'parallax-1',
factor: 0.8, // +/- gives direction, Less means slower if no other breakpoint factor is set this value is selected
factorXs: 0.1, // factorXs, factorSm, factorMd, factorLg, factorXl
factorSm: 0.2, // factorXs, factorSm, factorMd, factorLg, factorXl
factorMd: 0.3, // factorXs, factorSm, factorMd, factorLg, factorXl
factorLg: 0.4, // factorXs, factorSm, factorMd, factorLg, factorXl
factorXl: 0.5, // factorXs, factorSm, factorMd, factorLg, factorXl
type: 'background', // background, foreground
direction: 'vertical',// vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
};
require(["app/shortcodes/wdpkParallax"], function (e)
{
e.publicCall(obj);
});
}
});
Horizontal Parallax And Speed Control
<div class = "col-lg-12 wdpk-parallax" id = "parallax-2"></div>
#parallax-1, #parallax-2, #parallax-3 {
background-image: url("/woodpecker-html/assets/images/parallax-white.jpg");
min-height: 400px;
}
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-parallax").length !== 0)
{
let obj2 = {
selectorID: 'parallax-2',
factor: 0.3, // +/- gives direction, Less means slower if no other breakpoint factor is set this value is selected
factorXs: 0.1, // factorXs, factorSm, factorMd, factorLg, factorXl
factorSm: 0.2, // factorXs, factorSm, factorMd, factorLg, factorXl
factorMd: 0.3, // factorXs, factorSm, factorMd, factorLg, factorXl
factorLg: 0.4, // factorXs, factorSm, factorMd, factorLg, factorXl
factorXl: 0.5, // factorXs, factorSm, factorMd, factorLg, factorXl
type: 'background', // background, foreground
direction: 'horizontal',// vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
};
require(["app/shortcodes/wdpkParallax"], function (e)
{
e.publicCall(obj2);
});
}
});
Reverse Vertical Parallax
<div class = "col-lg-12 wdpk-parallax" id = "parallax-3"></div>
#parallax-1, #parallax-2, #parallax-3 {
background-image: url("/woodpecker-html/assets/images/parallax-white.jpg");
min-height: 400px;
}
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-parallax").length !== 0)
{
let obj3 = {
selectorID: 'parallax-3',
factor: -0.2, // +/- gives direction, Less means slower if no other breakpoint factor is set this value is selected
type: 'background', // background, foreground
direction: 'vertical',// vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
};
require(["app/shortcodes/wdpkParallax"], function (e)
{
e.publicCall(obj3);
});
}
});
