宜しくお願い致します。
http://vegas.jaysalvat.com/
上記サイトのVEGAS2.4.0をダウンロードし、
下記ソースで設定をしました。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="vegas.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="vegas.js"></script> <script> $(function(){ $("body").vegas({ slides: [ { src: "bg1.jpg" }, { src: "bg2.jpg" }, { src: "bg3.jpg" } ], transition: 'fade', animation: 'kenburns' }); }); </script> </body> </html>
そのままだと、画像がズームアウトしていく動きになるのですが
ズームインの動きにしたく、
vegas.cssの
@-webkit-keyframes kenburns { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes kenburns { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.5); transform: scale(1.5); }
を
@-webkit-keyframes kenburns { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes kenburns { 0% { -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
に変更しました。
すると、ズームインの動きにはなったのですが、
画像が切り替わるタイミングで
一瞬100%の大きさの画像が表示され、画像が切り替わるようになってしまいました。
余分なソースコードをなくし、ミニマムの状態にしても改善されないため
どうしようもなくなってしまいました。
画像が切り替わるタイミングで、「100%の大きさの画像」が表示されず、
スムーズに画像を切り替えるにはどこを修正すれば良いのかご教授お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/13 00:28