Documentation

Everything you can do with Beauter


Parallax


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

base
bg-parallax
object
-front
Example

Caption

<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"
    })
};


News

  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017