Me gustaría tener una animación simple para el texto, pero la animación debería comenzar cuando el usuario se desplaza al elemento.
Encontré este Fade letra por letra con JQuery y lo modifiqué así:
(function($) { //get the welcome msg element var $all_msg = $('#welcome_msg'); //get a list of letters from the welcome text var $wordList = $('#welcome_msg').text().split(""); //clear the welcome text msg $('#welcome_msg').text(""); //loop through the letters in the $wordList array $.each($wordList, function(idx, elem) { //create a span for the letter and set opacity to 0 var newEL = $("<span/>").text(elem).css({ opacity: 0 }); //append it to the welcome message newEL.appendTo($all_msg); //set the delay on the animation for this element newEL.delay(idx * 20); // Var for scrolling var hT = $('#welcome_msg').offset().top, hH = $('#welcome_msg').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); $(window).scroll(function() { if (wS > (hT+hH-wH)){ //animate the opacity back to full 1 newEL.animate({ opacity: 1 }, 1100); } }); }); })( jQuery );Lamentablemente no está funcionando. ¿Qué estoy haciendo mal?
Debe obtener la parte superior de desplazamiento dentro del controlador de desplazamiento de la ventana, no fuera de él.
(function($) { //get the welcome msg element var $all_msg = $('#welcome_msg'); //get a list of letters from the welcome text var $wordList = $('#welcome_msg').text().split(""); //clear the welcome text msg $('#welcome_msg').text(""); //loop through the letters in the $wordList array $.each($wordList, function(idx, elem) { //create a span for the letter and set opacity to 0 var newEL = $("<span/>").text(elem).css({ opacity: 0 }); //append it to the welcome message newEL.appendTo($all_msg); //set the delay on the animation for this element newEL.delay(idx * 20); // Var for scrolling var hT = $('#welcome_msg').offset().top, hH = $('#welcome_msg').outerHeight(), wH = $(window).height(); //console.log(hT,hH, wH); $(window).scroll(function() { wS = $(this).scrollTop(); //console.log(wS, hT+hH-wH); if (wS > (hT+hH-wH)){ //animate the opacity back to full 1 newEL.animate({ opacity: 1 }, 1100); } }); }); })( jQuery ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height:800px">section with height to scroll</div> <div id="welcome_msg">Welcome to the example snippet</div>