画像が重なりながら、横からスライドしてきて表示【Image SlideIn Effect】

2020/08/12 2020/12/09

※ 本ページはプロモーションが含まれています。

この記事のタイトルを「画像が重なりながら、横からスライドしてきて表示」としていますが、いまいちなんて言っていいのか分からないのですが、「横からイメージがスライドしてきて、すこし遅れてそのイメージに被せるようにイメージがスライドしてきて消える」ようなエフェクトについての説明になります。
まず下記SAMPLEを見てもらったほうが分かりやすいと思います。

>> SAMPLE

スクロールしていくと画像が表示されます。スクロールの位置判定はjQueryで、画像の表示エフェクトはCSSの【transition】を使って表現しています。CSSの【transition】の使い方がちょっと不安な方は、下記リンクから【transition】について確認しておくと、今後理解しやすいと思います。

【css】transitionの使い方 │ MUKOLOG

CSSでアニメーションさせる時によくつかう「transition」プロパティの使い方について説明します。「transition」プロパティは一言でいうと、時間経過による変化を表現するCSSのプロパティとなります。

mukolog.com

サンプルコード

コードは下記になります。

【HTML(一部抜粋)】


<div class="ph01-wrap">
     <div class="photo-img-cross img-anime-cross">
     <img src="img/ph01.jpg" alt="">
     </div>
</div>

【CSS(一部抜粋)】

.ph01-wrap {
    width: 800px;
    position: relative;
}

.photo-img-cross {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.photo-img-cross:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    background-color: #eb3432;
    z-index: 1;
    transform-origin: right center;
    transform: scaleX(1);
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, 
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}

.photo-img-cross img {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    left: -100%;
    transition: 0.7s;
}

.photo-move-cross img {
    opacity: 1;
    left: 0;
}

.photo-move-cross.photo-img-cross:before {
    transform: scaleX(0);
    width: 100%;
}

【jQuery】


$(window).on('scroll', function (){

    // .photo-img-crossクラスがつけられている要素
    var elem = $('.photo-img-cross');
    
    elem.each(function () {
        var elemTop = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var wh = $(window).height();

        //　要素の上部が画面の中央にきたら
        if(scroll > elemTop - wh + (wh / 2) )
            {
                // .photo-move-crossをつける
                $(this).addClass("photo-move-cross");
            }
    });

});