Animated text on scroll

[lexoyo]

About this widget

Make some elements appear with an animation while you scroll

Install

Copy this code in the CSS editor of your website

@media (min-width:481px) {
  body {
    overflow-x: hidden;
  }

  .silex-runtime .animation-element.slide-left {
    opacity: 0;
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    -moz-transform: translate3d(-100px, 0px, 0px);
    -webkit-transform: translate3d(-100px, 0px, 0px);
    -o-transform: translate(-100px, 0px);
    -ms-transform: translate(-100px, 0px);
    transform: translate3d(-100px, 0px, 0px);
  }

  .silex-runtime .animation-element.slide-right {
    opacity: 0;
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    -moz-transform: translate3d(100px, 0px, 0px);
    -webkit-transform: translate3d(100px, 0px, 0px);
    -o-transform: translate(100px, 0px);
    -ms-transform: translate(100px, 0px);
    transform: translate3d(100px, 0px, 0px);
  }

  .silex-runtime .animation-element.slide-fade {
    opacity: 0;
    -moz-transition: all 800ms ease-out;
    -webkit-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    transition: all 800ms ease-out;
  }

  .silex-runtime .animation-element.slide-top1,
  .silex-runtime .animation-element.slide-top2,
  .silex-runtime .animation-element.slide-top3 {
    opacity: 0;
    -moz-transition: all 800ms ease-out;
    -webkit-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    transition: all 800ms ease-out;
    -moz-transform: translate3d(0px, 100px, 0px);
    -webkit-transform: translate3d(0px, 100px, 0px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
    transform: translate3d(0px, 100px, 0px);
  }

  .silex-runtime .animation-element.slide-top2 {
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200px, 0px);
  }

  .silex-runtime .animation-element.slide-top3 {
    -moz-transform: translate3d(0px, 300px, 0px);
    -webkit-transform: translate3d(0px, 300px, 0px);
    -o-transform: translate(0px, 300px);
    -ms-transform: translate(0px, 300px);
    transform: translate3d(0px, 300px, 0px);
  }

  .silex-runtime .animation-element.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
  }
}

And then this code in the Javascript code editor

/* animation on scroll widget */
$(function() {
    var $animation_elements = $('.animation-element');
    var $window = $(window);

    function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
    
    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);
    
        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
        $element.addClass('in-view');
        } else {
        $element.removeClass('in-view');
        }
    });
    }

    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');

})
/* /animation on scroll widget */

Use

Select an element and add this in its CSS class

animation-element slide-left

Or this to make it appear from the right side

animation-element slide-right

[BaguetteAgile]

Extra !! belle animation Alex. Fonctionne parfaitement.

[lexoyo]

merci :)

[lexoyo]

not sure if this widget works as good as the widget "Make text and images appear on scroll"