メインビジュアルを分割し、ホバーで左右から画像がスライドしてくるようなホバーアクションを作成したいと
考えております。
【背景1(画像1をホバーで左から中央へスライド)】→【画像1】【画像2】←【背景2(画像2をホバーで右から中央へスライド)】
下記の通りの記述をし、スライドはするのですが、右斜め上からスライドされる、画像が範囲よりも大きくなりスライドする
などの挙動がおかしい状態でうまく作動しません。
画像のwidth:100%;を解除するとスライドはうまく作動するのですが、レスポンシブに対応する必要があり、頭を悩ませております。
初歩的な質問でしたら申し訳ありませんが、ご教示しただけたら幸いです。
どうぞよろしくお願いいたします。
html
1 2<div class="mainvisual"> 3 <div class="visual-inner"> 4 <div class="hoge01-area"> 5 <a href="#"><img src="img/画像1" alt=""></a> 6 </div> 7 <div class="hoge02-area"> 8 <a href="#"><img src="img/画像2" alt=""></a> 9 </div> 10 </div> 11 12 <div class="bg-hoge"> 13 <a href="#"><img src="img/背景1" alt=""></a> 14 </div> 15 16 <div class="bg-hoge"> 17 <a href="#"><img src="img/背景2" alt=""></a> 18 </div> 19</div> 20<!-- /mainvisual --> 21
scss
1.mainvisual{ 2 position: relative; 3 line-height: 0; 4 5 .visual-inner{ 6 position: relative; 7 z-index: 1000; 8 display: flex; 9 justify-content: center; 10 flex-wrap:wrap; 11 12 .hove01-area,.hoge01-area a, 13 .hoge02-area,.hoge02-area a,{ 14 width: 50%; 15 img{ 16 width:100%; 17 } 18 } 19 } 20 21 .bg-hoge01{ 22 position: absolute; 23 top: 0; 24 left:0; 25 z-index:999; 26 a img{ 27 width: 100%; 28 } 29 } 30 31 .bg-hoge02{ 32 position: absolute; 33 top: 0; 34 left:0; 35 z-index:999; 36 a img{ 37 width: 100%; 38 } 39 } 40} 41
js$('.hoge01
1 $('.bg-hoge01').stop().animate({ 2 left: 0 3 }); 4 $('.visual-inner').stop().animate({ 5 left: '2000px' 6 }); 7 $('.bg-hoge02').stop().animate({ 8 left: '2000px' 9 }); 10}); 11$('.bg-hoge01').on('mouseout', function () { 12 $('.bg-hoge01').stop().animate({ 13 left: '-2000px' 14 }); 15 $('.visual-inner').stop().animate({ 16 left: '0' 17 }); 18}) 19$('.hoge02-area').on('mouseover', function () { 20 $('.bg-hoge02').stop().animate({ 21 left: 0 22 }); 23 $('.visual-inner').stop().animate({ 24 left: '-2000px' 25 }); 26 $('.bg-hoge01').stop().animate({ 27 left: '-2000px' 28 }); 29}); 30$('.bg-hoge02').on('mouseout', function () { 31 $('.bg-hoge02').stop().animate({ 32 left: '2000px' 33 }); 34 $('.visual-inner').stop().animate({ 35 left: '0' 36 }); 37}) 38}); 39
あなたの回答
tips
プレビュー