【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+