Animate Element Into View Using CSS3 Animations - jQuery anisview.js

Animate Element Into View Using CSS3 Animations - jQuery anisview.js

anisview.js is a viewport checker jQuery plugin which makes use of CSS3 animations to animate any elements into view when scrolling down or up the webpage.

Awesome CSS3 animations are based on the familiar Animate.css library.

1. Include the minified version of the anisview.js plugin after loading jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.anisview.min.js"></script>

2. Attach the plugin to the target element on window load/scroll/resize and specify the animation type (view all animations) you want to use. Default: 'fadeInLeft'.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
    });
});

3. Set the scroll direction to trigger the animation. Default: 'down'.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
      direction: 'both' // or 'up', 'down'
    });
});

4. Determine whether or not to repeat the animation on each scroll. Default: true. Setting to false means that the scroll animation will only be triggered once.

$(function() {
  $(window).on('load scroll resize', function() {
    $('.target').anisview({
      animation: 'jello'
      repeat: false
    });
});

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

  • Publication date: 20.04.2019
  • Source