Parallax

Beauter can make responsive parallax effects along with styled captions that can be used to make fancy landing pages.

TO create a parallax, use class bg-parallax and add a background using background-image: url('..') in style. To add front matter, use -front class.

<div class="bg-parallax" style="background-image: url('/img/pink.jpg')">
<div class="-front">
	<h1 class="_alignCenter">Caption</h1>
</div>
</div>

Parallax are not always shown on every mobile devices. They are slower usually and difficult to achieve with pure CSS. Although not recommended, by adding this following script, all the bg-parallax will start showing similar scrolling effect on mobile devices also.

var b = document.querySelectorAll(".bg-parallax");
[].slice.call(b).forEach(function(a) {
    a.style.backgroundSize = document.getElementsByTagName("body")[0].offsetHeight + "px";
    a.style.backgroundAttachment = "initial";
    a.style.backgroundRepeat = "initial"
});
window.onscroll = function() {
    [].slice.call(b).forEach(function(a) {
        a.style.backgroundPosition = "50% " + window.pageYOffset + "px"
    })
};