TweenMaxを使ってクロスフェードやズームを使ったアニメーションを作っています。
使い始めたばかりで、とても無理やり感のある感じになってしまいました。
管理しやすくまとめる方法はないでしょうか?
申し訳ないのですが、そのまま載せてみます。
※各.layerはabsoluteでlayer-1st、2nd〜の順番に重ねています。
※各.layerとその子要素にはopacity:0;を指定してます。(子要素にopacity:0;を指定したのはIEで表示が変になったための対応です。)
※各.layerの.layer-bgにはcssのbackgroundで画像を指定してます。
html
1<div class="layer layer-1st"> 2 <div class="layer-copy"> 3 <img src="./src/images/main-visual/layer-1st/copy.png" class="copy-title" alt=""> 4 </div> 5</div> 6 7<div class="layer layer-2nd"> 8 <div class="layer-copy"> 9 <img src="./src/images/main-visual/layer-2nd/copy.png" class="copy-title" alt=""> 10 </div> 11 <div class="layer-bg"></div> 12</div> 13 14<div class="layer layer-3rd"> 15 <div class="layer-copy"> 16 <img src="./src/images/main-visual/layer-3rd/copy.png" class="copy-title" alt=""> 17 </div> 18 <div class="layer-bg"></div> 19</div> 20 21<div class="layer layer-4th"> 22 <div class="layer-copy"> 23 <img src="./src/images/main-visual/layer-4th/copy.png" class="copy-title" alt=""> 24 </div> 25 <div class="layer-bg"></div> 26</div> 27 28<div class="layer layer-5th"> 29 <div class="layer-copy"> 30 <img src="./src/images/main-visual/layer-5th/copy.png" class="copy-title" alt=""> 31 </div> 32 <div class="layer-bg"></div> 33</div> 34 35<div class="layer layer-6th"> 36 <div class="layer-copy"> 37 <img src="./src/images/main-visual/layer-6th/copy.png" class="copy-title" alt=""> 38 </div> 39 <div class="layer-bg"></div> 40</div>
javascript
1 // 1 2 var animateStartTime = 3; 3 TweenMax.to('.layer-1st, .layer-1st .layer-bg, .layer-1st .layer-copy', 1, { 4 autoAlpha: 0, 5 ease: Power2.easeIn, 6 delay: animateStartTime + 2, 7 }); 8 9 // 2 10 var animate1stTime = animateStartTime + 3; 11 TweenMax.to('.layer-2nd .layer-copy', 1.5, { 12 autoAlpha: 1, 13 delay: animate1stTime + 0.5, 14 }); 15 16 TweenMax.to('.layer-2nd .layer-bg', 3, { 17 autoAlpha: 1, 18 ease: Power2.easeIn, 19 delay: animate1stTime + 1, 20 }); 21 TweenMax.to('.layer-2nd .layer-bg', 8, { 22 scale: 1.1, 23 delay: animate1stTime + 1, 24 }); 25 TweenMax.to('.layer-2nd .layer-bg', 4, { 26 autoAlpha: 0, 27 delay: animate1stTime + 1 + 4, 28 }); 29 30 // 3 31 var animate2ndTime = animate1stTime + 12; 32 TweenMax.to('.layer-3rd .layer-copy, .layer-3rd .layer-bg', 3, { 33 autoAlpha: 1, 34 ease: Power2.easeIn, 35 delay: animate2ndTime, 36 }); 37 TweenMax.to('.layer-3rd .layer-bg', 8, { 38 backgroundPosition: '50% 50%', 39 delay: animate2ndTime, 40 }); 41 TweenMax.to('.layer-3rd .layer-bg', 3, { 42 autoAlpha: 0, 43 ease: Power2.easeIn, 44 delay: animate2ndTime + 4, 45 }); 46 TweenMax.to('.layer-3rd, .layer-3rd .layer-copy', 2, { 47 autoAlpha: 0, 48 ease: Power2.easeIn, 49 delay: animate2ndTime + 5, 50 }); 51 52 // 4 53 var animate3rdTime = animate2ndTime + 5; 54 TweenMax.to('.layer-4th .layer-copy, .layer-4th .layer-bg', 3, { 55 autoAlpha: 1, 56 ease: Power2.easeIn, 57 delay: animate3rdTime, 58 }); 59 TweenMax.to('.layer-4th .layer-bg', 8, { 60 backgroundPosition: '50% 50%', 61 delay: animate3rdTime, 62 }); 63 TweenMax.to('.layer-4th .layer-bg', 3, { 64 autoAlpha: 0, 65 ease: Power2.easeIn, 66 delay: animate3rdTime + 4, 67 }); 68 TweenMax.to('.layer-4th, .layer-4th .layer-copy', 2, { 69 autoAlpha: 0, 70 ease: Power2.easeIn, 71 delay: animate3rdTime + 5, 72 }); 73 74 // 5 75 var animate4thTime = animate3rdTime + 5; 76 TweenMax.to('.layer-5th .layer-copy, .layer-5th .layer-bg', 3, { 77 autoAlpha: 1, 78 ease: Power2.easeIn, 79 delay: animate4thTime, 80 }); 81 TweenMax.to('.layer-5th .layer-bg', 8, { 82 backgroundPosition: '50% 50%', 83 delay: animate4thTime, 84 }); 85 TweenMax.to('.layer-5th .layer-bg', 3, { 86 autoAlpha: 0, 87 ease: Power2.easeIn, 88 delay: animate4thTime + 4, 89 }); 90 TweenMax.to('.layer-5th, .layer-5th .layer-copy', 2, { 91 autoAlpha: 0, 92 ease: Power2.easeIn, 93 delay: animate4thTime + 5, 94 }); 95 96 // 6 97 var animate5thTime = animate4thTime + 5; 98 TweenMax.to('.layer-6th .layer-copy', 3, { 99 autoAlpha: 1, 100 ease: Power2.easeIn, 101 delay: animate5thTime, 102 }); 103 TweenMax.to('.layer-6th .layer-bg', 4, { 104 autoAlpha: 1, 105 ease: Power2.easeIn, 106 delay: animate5thTime + 1, 107 });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。