スクロール表示

https://aorino.jp/

 

画像が左から順番に、フェードインしてくるスクリプトを作りたい。

 

【やりたい事】

画像が順番に出てくる

フェードインされる

下から上にフワットでる

スクロールの高さを取得する

要素が画面内に入ったら、ふわっと表示される

リセットされる

 

 

■要素の時間差フェードイン

フェードイン>>

さらに説明>>

 

■デモ

https://web-emo.com/jquery-scroll-fadein-each/

https://tech.brick-plan.jp/fade/fade-pattern01/

 

■解説

https://qumeru.com/preview/JavaScript/339/sample/index.html

 

・スクロールの原理を解説

https://chaika.hatenablog.com/entry/2016/08/19/211516

バウンドサンプル

https://blow-in.net/blog/entry-1901.html

 

 

デモ1

フェーダーデモ

左から右に、でてくる。JSでかくと、なんだか遅いかな・・・

 

【js部分】

<script>
var delaySpeed = 300;
$(window).on("load scroll", function (){
$(".fade_trigger1 .element").each(function(i){
var element = $(".fade_trigger1").offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > element - windowHeight + windowHeight / 5){
$(this).delay(i*(delaySpeed)).queue(function(){

$(this).stop(true, true).animate( { opacity: 1 }, {
duration: 700,
step: function (now) {
var dist = 70 - (70 * now);
$(this).css({ transform: 'translateY(' + dist + 'px)' });
}
});

});
}
});
});
</script>

 

 

【css】

.fade_image {
display: flex;
margin: 0 0 3em;
}
.fade_image img {
width: 24%;
height: auto;
margin: 0 8px 0 0;
}
.fade_image img:last-child {
margin: 0;
}
.element {
opacity: 0;
}
@media screen and (max-width: 640px) {
.fade_image {
flex-wrap: wrap;
flex-direction: column;
}
.fade_image img {
width: 100%;
margin: 0 0 10px 0;
}
.fade_image img:last-child {
margin: 0;
}
}

 

 

JSだけで処理すると、カク付くような気がします。

cssのトランジッションなどを利用して、作った方が、綺麗に動くようです。

 

 

デモ2

これで完成です。色々やりましたが、これでいけそうです。こちらはJqueryで書いてある。「.delay」遅延を使います。画像の位置をアニメーションでずらします。

 

 

サンプル>>

 

【html】

<div class="fade_in_test">
<p class="fade_in_sub"><img src="../img/women/nanami01.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
</div>

 

【script】

	  $(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var position = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > position - windowHeight + 200){
                $(function(){
                    $('.fadein').each(function(i){
                        $(this).delay(i * 200).queue(function(){
                            $(this).addClass('active');
                        });
                    });
                });
            }
        });
    });
});	
	 

 

fadeinを0.2秒ごとにつけています。

 

【css】

.fade_in_test{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}

.fadein {
opacity : 0;
transition : all 1s;
}

.fadein.active{
opacity : 1;
}

 

参照>>

 

デモ3

 

 

【html】

<div class="fade_in_test">
<p class="fade_in_sub"><img src="../img/women/nanami01.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
<p class="fade_in_sub"><img src="../img/women/nanami04.jpg" class="fadein"></p>
</div>

 

画像のクラスにfadeinをつけておく。

 

【スクリプト】

<script>
// スクロールフェードイン
$(function () {
$(window).scroll(function () {
$(".effect-fade").each(function () {
var elemPos = $(this).offset().top; /* 要素の位置を取得 */
var scroll = $(window).scrollTop(); /* スクロール位置を取得 */
var windowHeight = $(window).height(); /* 画面幅を取得(画面の下側に入ったときに動作させるため) */

if (scroll > elemPos - windowHeight) {
/* 要素位置までスクロール出来たときに動作する */
$(this).addClass("effect-scroll");
}
});
});
jQuery(window).scroll();
});
</script>

 

【css】

.fade_in_test{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}

.fadein {
opacity : 0;
transition : all 1s;
}

.fadein.active{
opacity : 1;
}

 

ワンポイント

表示方法が、もっと書き方があるような気がします。お役に立ちましたら、仕事のご依頼してください(笑

 

ウェブサイト、システム開発いたします。ぜひご依頼くださいませ。

 

 

 

この記事を読んだ人は、こんな記事も読んでいます

 

SEO対策の基本 外部要因とは?

SEO対策には基本的がある!!外部要因とは何か

絶対に知っておきたい、基本知識とは

 

売れるサイトを作るのに知って起きたい知識

サーチエンジンマーケティングって?

知っておきたいマーケティングとは?

seo対策をするメリットとは

SEO対策をする5つのメリットとは?

なぜ上位表示させることが大事なのか?

についてご紹介させていただきます。

 

内部要因とは

SEO対策の内部要因とは?

上位表示には、内部要因がとっても大事

キーワードを上位表示させるために必要なのは?

キーワード対策をするまえに

キーワード対策をする前に

そのキーワード対策。ちょっと待ってください。

そのまま対策をすると、とんでもない事に

広告費用が高くなる理由とは

広告費用が高くなる本当の理由とは?

売れないサイトに集めていませんか?

お問い合わせが少ない・・・のは?

 

 

 

 

 

【SEO対策・web広告・webコンサルティングのプラスワーク対応エリアについて】

プラスワークでは、東京、神奈川、千葉、埼玉を中心に全国でwebコンサルティング、SEO対策、ホームページの更新、ホームページのリニューアル運営代行をしております。売上アップをお考えならお気軽にご相談ください。

 

【SEO対策・web広告・webコンサルティングのプラスワーク 対応地域】

北海道 [ 北海道 ]

東北  [ 青森 | 岩手 | 山形 | 福島 | 秋田 | 宮城 ]

関東  [ 東京 | 埼玉 | 千葉 | 茨城 | 栃木 | 群馬 | 神奈川 ]

甲信越 [ 山梨 | 長野 | 新潟 ]

北陸  [ 石川 | 福井 | 富山 ]

東海  [ 愛知 | 静岡 | 岐阜 | 三重 ]

近畿  [ 大阪 | 兵庫 | 京都 | 滋賀 | 奈良 | 和歌山 ]

中国  [ 島根 | 山口 |鳥取 | 広島 | 岡山 ]

四国  [ 徳島 | 香川 | 愛媛 | 高知 ]

九州  [ 福岡 | 佐賀 | 長崎 | 熊本 | 大分 | 宮崎 | 鹿児島 ]

プラスワークでは全国でSEO対策、ホームページ更新、制作をしております。中小企業専門SEO対策・ホームページ更新制作会社、ダイレクト レスポンス マーケティング、ウェブ マーケティング、マーケティング 分析、口コミのよいSEO対策会社をお探しならプラスワークにお任せくださいませ。

 

 

【コンテンツ】

トップへ

更新レスキュー

料金について

制作実績

お客様の声

よくある質問

会社概要

お問い合わせ

【更新レスキュー】

ライトコース

ゴールドコース

プラチナコース

 

【その他】

ニュース

メルマガ登録

特別資料プレゼント

相互リンク募集中

【課題から探す】

ホームページの課題

SEO対策とは

SEO対策がダメな理由

上位表示されない理由

相互リンクとは

順位が落ちてしまう原因

 

 

フェイスブック  ツイッター