How do you activate a JS text animation when in view on a Carousel?
Question
I'm sorry if this question has been asked before. I am very new to JS and have limited knowledge on it.
I have been trying to figure out how to activate the animation. With my code the animation loads at the same moment when the page is loading, i need to make it load when the content is in view. I have added an offset, but it didn't delay the animation but just not show it altogether.
var slidetwo = new Array( "Brief background of who had which children and who got married to who.", "- Include the Jewish year and the non - Jewish year ie BCE OR CE text two" ); var Speed = 100; var Index = 0; var ArrLength = slidetwo[0].length; var ScrollAt = 20; var TextPos = 0; var Contents = ''; var Row; function typewriter2() { Contents = ' '; Row = Math.max(0, Index-ScrollAt); var destination = document.getElementById("unit-two-slide-two"); while ( Row < Index ) { Contents += slidetwo[Row++] + '<br />'; } destination.innerHTML = Contents + slidetwo[Index].substring(0, TextPos) + "_"; if ( TextPos++ == ArrLength ) { TextPos = 0; Index++; if ( Index != slidetwo.length ) { ArrLength = slidetwo[Index].length; setTimeout("typewriter2()", 500); } } else { setTimeout("typewriter2()", Speed); } } $(function() { $('#unit-two-slide-two').each(function(){ $(this).waypoint(function() { $(this).addClass('show'); }, { offset: '100px', horizontal: true }); }); }); typewriter2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <div class="unit-221-1slide-top"> <p>After Yaakov received the blessings from his father, his brother Esav wanted to kill him. Yaakov forced to run away to the home of Lavan his uncle in Haran. Yaakov lived with Lavan for 22 years and married his two daughters and the two maid servants.</p> </div> <link rel="stylesheet" type="text/css"/> <body> <div id="unit-two-slide-two"></div> </body>
1 answers
solution1
0 2019-08-19 13:14:20
Change typewriter2(); to:
$( "#unit-two-slide-two" ).load(typewriter2);
This will trigger your function once the DOM has signaled it is loaded.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.