前提・実現したいこと
画像のような形で画像を拡大表示させるアニメーションの実装を考えています。
ですが思うように実装することができなかったので、これを実現する方法を教えていただきたいです。
発生している問題・エラーメッセージ
問題点は2つあります。
1、基準点が左上にあるためか、そこを基準として拡大がおこなわれてしまう
2、親要素を超えてそのまま拡大させたいときに、親要素に基準点がひっかかってしまい、画像が中央からずれてしまう
試したこと
position: fixed
、vertical-align: middle
などを使って対応しようと考えましたが、うまく動作させることはできませんでした。
現状
index.html
1<body> 2 <div class="box"> 3 <img src="hoge.png" class="img-class"> 4 </div> 5</body>
style.css
1.box { 2 text-align: center; 3} 4.img-class { 5 width: 800px; 6 height: auto; 7 vertical-align: middle; 8}
script.js
1$(".img-class").animate({ 2 width: "3000px" 3}, { duration: 900, queue: false });
現状このような実装となっています。
回答2件
あなたの回答
tips
プレビュー