MENUMENU
  • Racing
    • F1 Kalender Tv Tider Säsong 2018
      • Tysklands GP körs 20 – 22 juli

        Fredag 20 juli: Practice 1: 11.00 | Practice 2: 15.00

        Lördag 21 juli: Practice 3: 12.00 | Qualify: 15.00

        Söndag 22 juli: Race 15.10

      • Sändningsstart på Viasat

        Practice: 5 minuter innan start.
        Qualify: 30 minuter innan start
        Race: 55 minuter innan start

        (Racen startar 10 över, inte heltimma)

      • Related Links

    • Sim Racing
      • Setup Guide

        All the time we spend developing mechanical and aerodynamic grip is directed at developing more traction from the tyre. This makes the tyres a logical place in which to start a discussion on car setup. The tyre is the only part of the car that the track “sees” and thus makes it the most important part of a cars handling.

      • Driver Behaviors

        Since the release of rFactor many of us did a lot of online racing with it. The charm of racing human people instead of AI however sometimes gets overshadowed by differing interpretations of driving etiquette and limitations of the sim we drive. Some golden rules of racing which are set in real-life racing apply to online sim racing as well.

      • Sim Racing News Around The World

        • Studio 397
        • isrtv
        • Virtual R
        • Image Space
  • Resources
  • Sim Racing
  • F1 Säsong 2018
  • Fotbolls VM 2018
  • Artiklar
  • Blogg
  • Link Library
  • Link Library

        • MORE LINKS
  • Kontakta

Forum

Fly-in and Fly-out Animations  

 

(@lars)
Site Owner Admin
Joined:11 months  ago
Posts: 80
Saturday, 30 June, 2018 20:24  

Divi has built in some cool fly-in animations into it’s stylesheet for it’s Image Module. So in the module settings you have the options to have the image fade-in or fly-in from the right, left, top, or bottom.

And on the Divi Nation Quick Tip Episode #10, Nathan Weller gave us a small jquery script to trigger page element animations on both the up and down scroll–whereas by default they would only trigger on the down scroll.

And so here we are going to combine his jquery with the built in css to animate any section, row or module to make a cool animated website that feels alive. You can check out the live demo here.

Artikel här

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

Add code to the < body > (good for tracking codes such as google analytics)

Now for adding the CSS Classes

3. Now you can go to your page and start populating the Modules. Below are the CSS Class groups for each animation.

et_pb_animation_top et-animated et-waypoint

et_pb_animation_bottom et-animated et-waypoint

et_pb_animation_right et-animated et-waypoint

et_pb_animation_left et-animated et-waypoint

et_pb_animation_fade_in et-animated et-waypoint

 


ReplyQuote
  
Working

Please Login or Register