jQuery、もしくはCSSをつかって下記のアニメーションを同時に実現したいと考えています。
- 背景画像がだんだんズームで迫ってくる
- 背景画像にパララックス効果を付与する
このアニメーションが現在、同時ではなく1) が完了した後に、 2) という風になってしまっています。これを同じタイミングで、ズームにもなってくるし、パララックス効果もある、といった状態を作るためにはいかがすればよろしいでしょうか?
ポララックスにはこちらのライブラリを使っています。
https://simpleparallax.com/
HTML
1<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@4.0.0/dist/simpleParallax.min.js"></script> 2 3<div class="main"> 4 <div class="parallax_image"> 5 <img class="image" src="./assets/background.jpeg" /> 6 </div> 7</div>
CSS
1/* ズームインするアニメーション */ 2.parallax_image img { 3 animation-name: zoomin; 4 animation-duration: 9s; 5 width: 100%; 6} 7@keyframes zoomin { 8 0% { 9 transform: scale(1); 10 } 11 100% { 12 transform: scale(1.1); 13 } 14}
JavaScript
1var image = document.getElementsByClassName("image"); 2new simpleParallax(image, { 3 scale: 1.1 4});

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。