https://www.lotte.co.jp/entertainment/ghana-pinkvalentine/
このロッテのサイトなのですが、ウィンドウの読み込みが完了すると、女の子や背景やタイトルがフェイドインする動きになっています。
どのような記述になっているのか検証ツールで覗いてみたのですが、タイトルのみ抽出すると下記の記述がありました。
html
1<article id="hero"> 2 <h1><img src="assets/img/hero/title.png" alt="ピンクバレンタイン"></h1> 3</article>
css
1.load-complete #hero h1 { 2 opacity: 1 !important; 3 -webkit-transform: translate(0, 0) scale(1) rotate(0deg) !important; 4 transform: translate(0, 0) scale(1) rotate(0deg) !important; 5} 6 7#hero h1 { 8 -webkit-transition: opacity 0.2s linear,-webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 9 transition: opacity 0.2s linear,-webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 10 transition: opacity 0.2s linear,transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 11 transition: opacity 500ms linear 0s, transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, -webkit-transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; 12 -webkit-transition-delay: 0.5s; 13 transition-delay: 500ms; 14 opacity: 0; 15 -webkit-transform: scale(1.2); 16 transform: scale(1.2); 17}
transform
とtransition
を使用して動きを付けているのは分かりましたが、当然これをそのままローカルにコピペしても動きませんでした。
それではjsで制御しているのかと思い、読み込まれているmain.min.js?20200111
の中身を全てコピペしてみたら無事に動きました。
そこで質問なのですが、これはjsのどのように記述で動いているのか教えて頂きたいです。
cssを見るに.load-complete
という記述があるので、それ絡みかと思いjsで検索してみると、下記の記述が見つかりました。
js
1function p() { 2 t.classList.add("load-complete"); 3 const n = e ? .7 : .9; 4 l.setup({ 5 step: "article, section, #profile li", 6 offset: n, 7 once: !0 8 }).onStepEnter((function(t) { 9 t.element.classList.add("inviewed") 10 } 11 )) 12 }
浅学なためjsが分からないのですが、この部分のみをコピペしても動きませんでした。
私のjsの読解力がないのが最たる原因なのですが、動いているロジックだけでも教えて頂ければ幸いです。
宜しくお願い致します。