https://ballerina-jwmovie.jp/js/comment.js

1$(function(){
2	const element = document.querySelector('h2');
3	const text = element.textContent;
4	element.textContent = '';
5	for (var i = 0; i < text.length; i++) {
6		var span = document.createElement('span');
7		span.textContent = text[i];
8		element.appendChild(span);
9  }
10
11	var timer;
12	var windowW = $('body').innerWidth();
13	if(windowW >= 799){
14		timer = 700;
15	}else{
16		timer = 10;
17	}
18	
19	setTimeout(function(){
20		$('#ttl').css({'opacity': 1});
21		
22		var cnum = 1;
23		$('h2.title span').each(function(){
24			$(this).css({'animation': 'ttlAni .8s ease-out '+cnum * .06+'s 1 normal forwards'});
25			cnum ++;
26		});
27		
28	}, timer);
29	setTimeout(function(){
30			var cnum2 = 1;
31			$('.contents').each(function(){
32				var targetElementF = $(this).offset().top;
33				var windowHeightF = $(window).height();
34				if (targetElementF <= windowHeightF + 30){
35					$(this).css({'animation': 'dispAnimation .5s ease-out '+cnum2 * .09+'s 1 normal forwards'});
36					cnum2 ++;
37				}
38			});
39		},900);
40	
41	$(window).on("scroll", function(){
42		var cnum1 = 1;
43		$('.contents').each(function(){
44			var targetElement = $(this).offset().top;
45			var scroll = $(window).scrollTop();
46			var windowHeight = $(window).height();
47			if (scroll > targetElement - windowHeight + 30){
48				$(this).css({'animation': 'dispAnimation .5s ease-out '+cnum1 * .04+'s 1 normal forwards'});
49				cnum1 ++;
50			}
51		});
52	});
53});