画像をほわっと下から上に表示させる

html/css

2020.05.15

もくじです

サンプル

ページを読み込んで3秒で50px上に移動しながらフェードインしています。
（実際のサイトでは3秒では遅いと思います。サンプルということであえて3秒）

HTML

<div class="image1">
<img src="画像のパス">
</div>

今回はimage1というclassを指定したdivに画像を入れています。

CSS

.image1{
 transform: translateY(50px);
 transition: 3s;
 opacity: 0;
}
.image1.anim {
 opacity: 1;
 transform: translateY(0px);
}

image1に対して、

opacityを0→見えない状態
transitionを3s→3秒で
transformをtranslateY(50px)→50px下方向

を設定。

そして、image1に、さらにanimのクラスを指定した場合に対して、

opacityを1→見えない状態から見えている状態へ
transformをtranslateY(0px)→50px下方向から0pxに移動する

を設定。

これで以下のソースになっているときに動きがでます。

<div class="image1 anim">
<img src="画像のパス">
</div>

jQuery/JavaScript

「jQuery.inview」を使うと、指定した要素が画面をスクロールして表示された時、表示されなくなった時にclassを追加削除できるようになります。

jquery.inviewをダウンロードする

以下のURLからダウンロードします。

https://github.com/protonet/jquery.inview

jquery.inviewを設置する

ダウンロードしたjquery.inview.min.jsをjqueryより下に設置します。

<script type="text/javascript" src="/js/jquery.inview.min.js"></script>

WordPressであれば、以下のタグより下に設置します。

<?php wp_footer(); ?>

wp_footer()では通常、jqueryを読み込みますので、それより下。ということになります。

要素を指定する

<script>
(function($) {
$('.image1').on('inview', function(){
 $(this).addClass('anim');
});
})( jQuery );
</script>

設置したjquery.inview.min.jsの下に要素を指定します。

.image1がinviewされたとき（画面に表示されたとき）、
this→image1に、
addClass→animを追加する。

<div class="image1">

が、jquery.inview.min.jsによって、

<div class="image1 anim">

になり、結果として、.image1.animのCSSが発動して、要素が動きます。

COWAZA