記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

【jQuery】スクロール時に画像を表示させる3つのステップ

【jQuery】スクロール時に画像を表示させる3つのステップ

jQueryでスクロールすると画像を表示させよう

梅雨ですっきりしない日が続いていたかと思えば、ここ数日一気に気温が上がり、全国でも多くの方が熱中症で搬送されたニュースを目にします。体調管理にはよりいっそう気をつけたい、そんなサポート部の本田です。

さて、ECサイトなどを見ていて下にスクロールするとクーポンが出てきた!画像が出てきた!よくありませんでしょうか。

本日は、そちらの実装方法をご案内します。

初めての方は少しとっつきにくい印象があるかもしれないjQueryですが、今回のスクロール時に画像を表示させる方法は、簡単に実装できます。

動きはこちらのデモサイトで確認できます。(実際にスクロールをしてしてみると、画像が表示されます)

以下、実装のためのステップとコードをご紹介します。

ステップ1:HTMLの実装

まずはHTMLです。*のところに任意の画像URLをいれます

<a href="url">

を利用して画像リンクにしてもよいですね。

<div class="scrolltest">
<img src="*">
</div>

ステップ2:CSSの実装

次にCSSです。
rightやtopの数値を変更することで表示させる位置を編集することができます。
widthの値を編集することで表示させる画像サイズを変更できます。

/*スクロール前は非表示にする設定*/
.scrolltest{
display:none;}

/*スクロールした際に表示される画像の設定*/
.scrolltest.test.fixed {
    position: fixed;←スクロールしても表示させる位置を固定させます
    right: 0%;←右端で出すために記述します、左端で表示させるにはleft:0%;と記述します
    top: 0px;サイト上部で表示させるために記述します
    width: 50%;←表示させる画像のサイズ指定です
    display: block;←画像を表示させるために記述します
}

ステップ3:jQueryの実装

最後にjQueryです。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
  $(window).on('scroll', function() {
    /*下に10pxスクロールすると*/
	if ($(this).scrollTop() > 10) {
      /*.testにfixedというクラスを付与する*/
	  $('.test').addClass('fixed');
    } else {
      /*戻るとfixedというクラスを外す*/
	  $('.test').removeClass('fixed');
    }
  });
});
</script>

終わりに

いかがでしょうかたったこれだけで実装することができます。
訴求していきたい情報やお知らせなどをサイトのユーザーに対して
目立たせて伝えることができそうですね!

もうすぐ夏のセールなどが行われると思いますが
セールページへの誘導に使ってみてはいかかでしょうか。

本田

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

技術カテゴリの最新記事