Scroll To Fancy

Background Image Parallax & Scroll to Reveal effects for your website, combined in 3.3kb!


Scroll down to see this demo in action.

Easy to Install

Just add scroll-to-fancy.min.css and scroll-to-fancy.min.js to your website, then call ScrollToFancy().

No Dependencies

Written in plain JavaScript.
No jQuery required!

Browser Support

Firefox, Chrome, Safari, Edge, IE 11
The parallax effect works best when the browser supports smooth scrolling.

Installation Example

<link rel="stylesheet" href="/css/scroll-to-fancy.min.css"> <script src="/js/jquery.scroll-to-fancy.min.js"></script> <script> ScrollToFancy({ // optional settings parallax: true, parallaxMinWidth: 800, scrollToReveal: true, scrollToRevealMinWidth: 800, scrollToRevealOffset: 140 }); </script>

Only 3.3 KB

Parallax effect for background images

Add a parallax effect to any html element with a background image. Just add data-parallax="0.5" as an attribute to get started.

Code Example

<div class="background" data-parallax="0.5"></div>

Modify the scroll speed of your parallax background image

Scroll to reveal effect for any element

Code Example

<div class="example" data-reveal="fadeInUp"></div>

Choose the fade in animation
Enter the name of the CSS Keyframe animation as the value of data-reveal.
You can use the following animations or create your own:

Control the delay (optional)
Choose the delay in milliseconds when the element fades in. This comes in handy when multiple elements enter the viewport at the same time.

<div class="box-1" data-reveal="fadeInUp" data-reveal-delay="400"></div> <div class="box-2" data-reveal="fadeInUp" data-reveal-delay="800"></div> <div class="box-3" data-reveal="fadeInUp" data-reveal-delay="1200"></div>

Download source code or view on GitHub.