Fade & Slide Elements Into View While Scrolling - jqFuwatto

jqFuwatto is a blazing fast AOS (Animate On Scroll) jQuery plugin that fades or slides elements into view while scrolling to help create a smooth and seamless user experience.

The web is more and more a medium for showcasing work. And that means it's often important to present that work in the best possible way. Fading and scrolling elements into view can be an important part of that. The jQuery jqFuwatto plugin provides these features out of the box, with no need to write the animation yourself.

How to use it:

1. Import the jqFuwatto library.

import $ from 'jquery'
import { jqFuwatto } from './jqfuwatto'

<!-- OR -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jqFuwatto.umd.js"></script>

2. Call the function on the target element and create a subtle fade-in animation as it's scrolled into view while scrolling.

<div id="demo">
  ...
</div>

$('#example').fuwatto({ 
  // default: 2000
  duration: 3000 
})

3. Apply a slide-in animation to the element as it's scrolled into view.

• 'left-right'
• 'right-left'
• 'top-bottom'
• 'bottom-top'

$('#example').fuwatto({ 
  slide: 'left-right'
})

4. Set the distance in px to slide the element. Default: 500.

$('#example').fuwatto({ 
  distance: 600
})

5. Set the top & left adjustment in px. Default: 0.

$('#example').fuwatto({ 
  adjustment: {
    top: 0,
    left: 0,
  },
})

---

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