画面いっぱいに画像を表示し画像をcssで上に動くようにホームページを作成していますが
自分が書いたコードでは画像の下に余白が出来てしまいます。
アニメーションの動きがなくなると下にできた余白はなくなります。
-50pxを指定しているのが原因なのはわかるのですが-50pxを指定しないとアニメーションが動かないのでどのように記述したらいいのかわからないためコチラで質問させていただきます。
###実装したい内容
・画像の下に余白ができるため-50pxの余白を無くしたい
・上へスライドアニメーションする
・画像はフルスクリーンで表示したい
できればbackground-imgは使わずimgタグで動かしたいです。
background-imgの方がいいよ!という場合はご指摘いただけると勉強になります。
余白無しで上に動かす事が出来れば大満足です、分かる方是非お力をお貸しください。
HTML
1<section id="s01"> 2 <div class="top1"> 3 <img src="img/topimg.png" alt="TOP背景画像"> 4 </div> 5 <div id="logo"> 6 <!-- ここに画像の上に重ねる内容 --> 7 </div> 8</section>
css
1.top1 img { 2 -webkit-animation:animation-top1 15s 1 linear; 3 animation:animation-top1 15s 1 linear; 4 height:100%; 5 width:100%; 6 vertical-align: bottom; 7} 8@keyframes animation-top1 { 9 from{ 10 -ms-transform:translateY(-50px); 11 -webkit-transform:translateY(-50px); 12 transform:translateY(-50px); 13 } 14 to{ 15 -ms-transform:translateY(0); 16 -webkit-transform:translateY(0); 17 transform:translateY(0); 18 } 19}
jQuery
1$(document).ready(function () { 2 hsize = $(window).height(); 3 $("#s01").css("height", hsize + "px"); 4}); 5$(window).resize(function () { 6 hsize = $(window).height(); 7 $("#s01").css("height", hsize + "px"); 8}); 9$(document).ready(function () { 10 hsize = $(window).height(); 11 $(".top1").css("height", hsize + "px"); 12}); 13$(window).resize(function () { 14 hsize = $(window).height(); 15 $(".top1").css("height", hsize + "px"); 16});
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/28 03:45
2017/11/28 03:56
2017/11/28 07:09
2017/11/28 07:46
2017/12/11 09:01