https://motherld.com/js/faq.js

1console.log('faq.js');
2
3$(document).ready(function(){
4  var controller = new ScrollMagic.Controller();
5
6	// メインイメージ1部分アニメーション（スクロールリニア）
7	tween = TweenMax.to($('#mainImage'), 1, { backgroundPosition: '50% 80%' });
8	new ScrollMagic.Scene({
9		triggerElement: '#mainImage',
10		triggerHook: "onCenter",
11		duration: window.innerHeight,
12		offset: 150,
13	})
14	.setTween(tween)
15	.addTo(controller);
16
17	// 区切りイメージ1部分アニメーション（スクロールリニア）
18	tween = TweenMax.to($('.sep1'), 1, { backgroundPosition: '50% 75%' });
19	new ScrollMagic.Scene({
20		triggerElement: '.sep1',
21		triggerHook: "onEnter",
22		duration: (window.innerHeight * 1.5),
23	})
24	.setTween(tween)
25	.addTo(controller);
26
27	// 区切りイメージ2部分アニメーション（スクロールリニア）
28	tween = TweenMax.to($('.sep2'), 1, { backgroundPosition: '50% 65%' });
29	new ScrollMagic.Scene({
30		triggerElement: '.sep2',
31		triggerHook: "onEnter",
32		duration: (window.innerHeight * 1.5),
33	})
34	.setTween(tween)
35	.addTo(controller);
36
37	// faq準備
38	var blockN = document.querySelectorAll("#faqBody .category .item"),
39			yHeight = [];
40
41	for(var i = 0; i < blockN.length; i++){
42		yHeight[i] = $(blockN[i]).height();
43		if($(blockN[i]).hasClass('cl')){
44			$(blockN[i]).css('height','47px');
45		}
46	}
47
48	// faq表示切り替え
49	$('#faqBody .category a').click(function(){
50		var clTgt = $('.op'),
51				opTgt = $(this).parent(),
52				tgtC = $('.item').index(opTgt);
53
54		TweenMax.to($('.op'), .5,{
55			height: 47,
56			ease: Power4.easeOut,
57			onComplete: function(){
58				clTgt.removeClass('op');
59				clTgt.addClass('cl');
60				opTgt.addClass('op');
61				opTgt.removeClass('cl');
62			}
63		});
64
65		TweenMax.to(opTgt, .5,{
66			height: yHeight[tgtC],
67			ease: Power4.easeIn,
68		});
69
70	});
71});