Scroll To Fancy

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

Download

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.