gsap timelineを使用し、文字や画像がアニメーションするサイトを作ってみた
■必要なもの
・gsapのスクロールライブラリを使用（下記よりCDNにて取得します）
https://greensock.com/st-get-started/
下記のコードをheadに貼り付けてます
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
・以前に作成したサイトコードをそのまま流用しています
https://qiita.com/pontarou194/items/fa08a2f0f0fe4cd2ab20
■ポイント
・gsapのプラグインであるscrollTriggerの使用
https://greensock.com/docs/v3/Plugins/ScrollTrigger
・fromで要素を取得し、innerWidthで幅を取得
・rotateはどのくらい回転させて着地させるのかの数値
■疑問
①
scrubの数値に関して、変更するとどうなるのかがわかりませんでした・・・
もしご存知の方いらっしゃいましたら教えていただけますと幸いです。
②
gsap.timelineの中で記述されているinnerHeightやinnerWidthで取得した幅について、
例えば記述している
x: innerWidth * 1
この意味については、x軸に取得した幅の値だけプラスに移動させたところからスタートし、
もとの位置に戻ってこさせる。っという意味であっていますでしょうか？
■出来たWEBサイト
時間の都合上高速表示になってしまいスミマセン・・・
■コード
HTML
<!--javascriptも中に記述 --><!DOCTYPE html><html><head><title>おしゃれサイト</title><linkrel="stylesheet"type="text/css"href="30_7.css"><script src="https://kit.fontawesome.com/a076d05399.js"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/></head><body><nav><inputtype="checkbox"id="check"><labelfor="check"class="checkbtn"><iclass="fas fa-bars"></i></label><labelclass="logo animate_bounce"><ahref="#"class="logo">Cool♪</a></label><ul><li><aclass="active"href="#">ホーム</a></li><li><ahref="#">会社概要</a></li><li><ahref="#">事業内容</a></li><li><ahref="#">お問い合わせ</a></li><li><ahref="#">採用情報</a></li></ul></nav><section><h2>Welcome to the World</h2></section><divclass="box"><h2class="text1">俺の財宝か？</h2><h2class="text2">欲しけりゃくれてやる</h2><h2class="text3">探せ！↓↓この世のすべてをそこに置いてきた</h2><imgclass="box_logo"src="gold.jpeg"><videosrc="goomalling-storm.mp4"loop=""autoplay=""muted=""width="100%"class="bgv"></video></div><divclass="box2"><h2class="text4">支配なんかしねェよ</h2><h2class="text5">この海で一番自由な奴が海賊王だ!!!</h2><h2class="text6"> ━ ルフィ ━</h2><imgclass="box_logo"src="gold.jpeg"><h2class="text7">↑目指せ！ラフテル！</h2></div><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script><script type="text/javascript">gsap.timeline({scrollTrigger:{trigger:".box",start:"center center",end:"bottom top",scrub:1,pin:true,}}).from(".text1",{x:innerWidth*1}).from(".text2",{x:innerWidth*-1}).from(".text3",{x:innerWidth*1}).from(".box_logo",{x:innerWidth*-1,rotate:720}).from(".bgv",{x:innerHeight*2,rotate:360})gsap.timeline({scrollTrigger:{trigger:".box2",start:"center center",end:"bottom top",scrub:1,pin:true,},}).from(".box2",{opacity:0}).from(".text4",{x:innerWidth*1}).from(".text5",{y:innerHeight*1}).from(".text6",{x:innerWidth*1}).fromTo(".box_logo",{autoAlpha:0.2},{autoAlpha:1,duration:1}).from(".text7",{x:innerWidth*1})</script></body></html>
CSS
@importurl('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}body{overflow-x:hidden;}section{position:relative;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:#000;}sectionh2{font-size:6em;color:#fff;font-weight:500;}.box{position:relative;top:0;left:0;width:100%;height:100vh;padding:100px;}.boxh2{font-size:3em;}.boximg{max-width:300px;}.box2{position:relative;top:0;left:0;width:100%;height:100vh;padding:100px;background:#000;color:#fff;opacity:1;}.box2h2{font-size:3em;}/* ヘッダー*/nav{background:black;height:80px;width:100%;}label.logoa{color:white;font-size:33px;line-height:80px;font-weight:600;text-decoration:none;margin-left:15px;}navul{float:right;margin-right:60px;}navulli{display:inline-block;line-height:80px;margin:02px;}navullia{color:#f2f2f2;font-weight:500;font-size:20px;padding:7px13px;border-radius:3px;text-transform:uppercase;font-family:'Poppins',sans-serif;text-decoration:none;}a.active,a:hover{background:black;transition:.5s;}.checkbtn{font-size:30px;color:white;float:right;line-height:80px;margin-right:40px;cursor:pointer;display:none;}#check{display:none;}/*あれ・・・ロゴアニメーションが動かない ここから*/label.logo{width:180px;height:55px;margin:015px;perspective:1000px;}label.animate_bounce:hover{animation-name:bounce;animation-duration:1.0s;animation-iteration-count:infinite;}/*あれ・・・ロゴアニメーションが動かない ここまで*/以上となります。
色々と勉強になりました。疑問点もたくさんあったため、
引き続き改善につながるよう課題をまとめていこうと思います。
ここは違う、ここはこうしたほうが良いのでは？等々ございましたらご指摘いただけますと幸いです。
ここまでみていただき、ありがとうございます。