【参考サイト】
https://drive-chart.com/
現在、私が作成しているウェブページの、ファーストビューに、
こちらの参考サイトのようにアニメーションを付けたいのですが、
JSが苦手ということもあり、どう手をつけていいものか、どういったプラグインを使えばいいのか
頭を悩ませております。
私のイメージとしましては、参考サイトとほぼ同じ動きを望んでいるのですが、
①画面100%の中央にロゴ画像がふわっと表示される。
(参考サイトのように凝った表示の仕方でなくても構いません)
②画面が50%、50%に分かれて、右エリア内中央に要素(タイトル等)がふわっと表示される。
といったことができればと考えております。
どうかお力をお貸し頂けるようよろしくお願いいたします。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> </head> <style> .hero{ height: 100vh; position: relative; z-index: 2; } .left{ width: 50%; height: 100vh; float: left; position: relative; background: pink; } .left img{ width: 150px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } .right{ width: 50%; height: 100vh; float: right; position: relative; background: purple; } .right h1{ color: #fff; font-size: 30px; width: 300px; height: 300px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } </style> <body> <section class="hero"> <div class="left"> <img src="https://1.bp.blogspot.com/-KVROM-GFkdw/XhwqN4prZDI/AAAAAAABW88/uY8AfN2bOD85STIPfhoWcKMSS1EviWXugCNcBGAsYHQ/s350/darts_arrow3_green.png" width="100%" alt=""> </div> <div class="right"> <h1><p>タイトルタイトルタイトルタイトルタイトルタイトル</p></h1> </div> </section> </body> </html>
回答1件
あなたの回答
tips
プレビュー