画面いっぱい画像を表示しその画像をanimationで動かす

画面いっぱいに画像を表示し画像を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件

ベストアンサー

JavaScriptは削除で。

CSS
1.top1 img {
2    -webkit-animation:animation-top1 15s 1 linear;
3    animation:animation-top1 15s 1 linear;
4    height:calc(100vh + 50px);
5    width:100%;
6    vertical-align: bottom;
7}

【レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは - WPJ】
https://www.webprofessional.jp/css-viewport-units-quick-start/

投稿2017/11/27 04:52

kei344

総合スコア69400

satoshickkk

2017/11/28 03:45

ありがとうございます、いただきましたコードを入力いたしましたが画面いっぱいに画像を表示さず、右側にスクロールバーが表示されます。そしてスクロールバーを下げると動く画像と白い部分(背景)が見えております。なにか原因はお分かりになられますか？何度も質問してしまって申し訳ございません、お分かりになられましたらお助け下さい。