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
- 0.9 = almost same speed as user scrolls (fast)
- 0.5 = half of the scroll speed
- 0.1 = almost fixed (slow)
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:
- .fadeIn
- .fadeInLeft
- .fadeInRight
- .fadeInUp
- .fadeInUpBig
- .fadeInDown
- .fadeInDownBig
- .zoomIn
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>