Applying Scroll-triggered Animations To Elements Using jQuery - scrollfx

scrollfx is a jQuery plugin for smooth scroll-triggered animations that allows to scale text and change the background's opacity as you scroll pass them. Great for creating a beautiful. animated, interactive one page scrolling website. Uses CSS3 3D transforms for smooth text scaling.

How to use it:

1. To use the jQuery scrollfx plugin, include the jQuery library and the jquery.scrollfx.js script file into your HTML document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scrollfx.js"></script>

2. Call the function and specify the text & background container that will be affected by the plugin.

$('#container').scrollFx({
  scaleElements: '.text',
  opacityElements: '.image'
});

3. Override the default precision option that will affect overall performance of your website. The higher the precision, the 'smoother' the animations.

$('#container').scrollFx({
  scaleElements: '.text',
  opacityElements: '.image',
  precision: 10
});

---

This awesome jQuery plugin is developed by marksten. For more Advanced Usages, please check the demo page or visit the official website.