Animate Elements In The Viewport With CSS3 Animations - ScrollPoint

File Size: 19.2 KB
Views Total: 2573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animate Elements In The Viewport With CSS3 Animations - ScrollPoint

ScrollPoint is a lightweight and flexible jQuery scroll animation plugin which enables CSS3 powered animations on any element when it comes into view. Supports both scroll and resize events. Currently comes with 7 built-in CSS3 animations:

  • fadeUp
  • fadeLeft
  • fadeRight
  • slideRight
  • slideLeft
  • quickSlideRight
  • zoomIn

How to use it:

1. The plugin requires the scrollpoint.jquery.css style sheet to provide the CSS3 based scroll animations.

<link href="scrollpoint.jquery.css" rel="stylesheet">

2. Then load the plugin and jQuery library in the document.

<script src="" 
<script src="scrollpoint.jquery.js"></script>

3. Call the function scrollpoint on the target element you want to animate in when scrolling. Done.

<div class="box"></div>
  animation: 'fadeUp' // fadeLeft, fadeRight, slideRight, slideLeft, quickSlideRight, zoomIn

4. Config the scroll-triggered animation by overriding the options as these:

  animation: 'fadeUp'
  offset: 0, // in pixels
  triggeredClass: '', // CSS when triggered
  loadAfter: false, // an element required to load before this element

5. Callback functions available.

  beforeTrigger: function(){},
  onTrigger: function(){}

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