質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2608閲覧

TweenMaxで画像のクロスフェード&ズーム

Yamanosuke

総合スコア34

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/08/17 09:55

編集2022/01/12 10:55

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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

書かれている記述だけではどういう動きなのかイメージしづらいですが、TimelineMax などでまとめることで、animateStartTime を足して回る必要が薄れると思います。

【TweenMaxの使い方メモ - Qiita】
http://qiita.com/ANTON072/items/a1302f4761bf0ffcf525#タイムラインの結合

投稿2016/08/17 15:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問