var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion"); 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.is(':visible')) { if(!$element.hasClass('animated')) { $element.addClass('animated'); var a = new TypeIt('#' + $element.attr('id'), { speed: 30, lifeLike: true, }) .go(); $element.click(function () { a. a.options({speed: 20, lifeLike: false}); }); } } }); } $(window).on("load", function() { /*let type = new TypeIt("#typed-data", { speed: 10, startDelay: 0, cursor: true }) .go(); $(document).on("click", function() { type.options({speed: 1}); });*/ $(window).on("scroll resize", check_if_in_view); $(window).trigger("scroll"); $("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) }); });