在輪播中查看時，如何激活JS文本動畫？
[英]How do you activate a JS text animation when in view on a Carousel?
問題描述
抱歉，如果您之前曾提出過此問題。 我是JS的新手，對它的了解有限。
我一直在嘗試找出如何激活動畫。 使用我的代碼，動畫將在頁面加載的同時加載。我需要在查看內容時使其加載。 我添加了一個偏移量，但是它並沒有延遲動畫，只是沒有完全顯示它。
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 個解決方案
解決方案1
0 2019-08-19 13:14:20
更改typewriter2(); 至：
$( "#unit-two-slide-two" ).load(typewriter2);
DOM發出已加載信號后，這將觸發您的函數。
您實際上如何從JavaScript文件中獲取angular.js動畫代碼以進行激活？
[英]How do you actually get angular.js animation code from your javascript file to activate?
當用戶滾動到該部分時，如何使用 JS（無庫）激活 CSS animation？
[英]How do I make using JS (no library) activate a CSS animation when a user scrolls to that section?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.