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

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

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

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

マウスオーバーで画像に文字をふんわり表示させるエフェクト

マウスオーバーで画像に文字をふんわり表示させるエフェクト

皆さんこんにちは、サポート部の本田です。2016年も残り1ヶ月半を切りました。年末商戦の準備など忙しいことと思います。

今回は、画像のマウスオーバー時にふんわりと文字を表示させるエフェクトを実装する方法をご紹介します。ちなみにこの文字のことは、「キャプション」と言い、「見出し」という意味があります。この記事で言うキャプションとは画像の説明文となります。

・実際のサイトで画像を並べた際に、どういう画像なのか説明をつけたいがテキストでサイト上に常に表示させると、デザイン上好ましくない。
・商品ページに移動させせず、商品情報を表示させたい。。。

そんなときにhoverを使うことで、マウスオーバーした際に画像上にキャプションを出すことが可能です。

実際にこちらのデモサイトを見てください!(スマートフォンでも動きます。その場合は画像タップでキャプションを表示できます)

ということで早速実装していきます。

ステップ1:HTMLの実装

まずはHTMLです。通常の画像の指定に、altに表示させたいテキストを入力します。

<p>テキストが出ます</p>
<main>
<ul>
<li><img src="/img/california-1751455_640.jpg?8851" alt="一枚目の画像のキャプションを表示" ></li>
<li><img src="/img/dorset-1736527_640.jpg?3624" alt="二枚目の画像のキャプションを表示" ></li>
<li><img src="/img/lulworth-cove-820136_640.jpg?7273" alt="三枚目の画像のキャプションを表示" ></li>
</ul>
</main>

ステップ2:CSSの実装

次にCSSです。

body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color:#333;
}

main{
	display:block;
	width:100%;
	margin:0 auto;
	padding:60px 20px;
}

main li{
	position:relative;
	float:left;
	width:100%;
	margin:0 20px 50px 0;
	color:#FFF;
	line-height:2em;
}

main li:nth-child(3n){
	margin-right:0;
}

main li img{
	vertical-align:bottom;
        width: 100%;
}

main div{
	position:absolute;
	display:none;
	width:100%;
	height:100%;
	padding:20px;
	background:rgba(74, 84, 84, 0.7);
	top:0;
	left:0;
	box-sizing:border-box;
}

main p{
	position:relative;
	top:10px;
}

ステップ3:jQueryの実装

最後にjQueryの実装です。コードは短いです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>
$(function(){
	// li要素をマウスオーバー
	$("li").hover(function(){
		// キャプション部分の追加
		$(this).append("<div><p>" + $(this).children("img").attr("alt") + "</p></div>");

		// キャプション部分の表示:フェードイン
		$(this).children("div").stop().fadeIn(300);
		
		// キャプションのテキスト位置
		$(this).children("div").children("p").stop().animate({"top" : 0}, 300);

	}, function(){
		// キャプション部分の非表示:フェードアウト
		$(this).children("div").stop().fadeOut(500);

		// キャプションのテキスト位置
		$(this).children("div").children("p").stop().animate({"top":"10px"}, 300, function(){
			$(this).parent("div").remove();
		});

	});

});
</script>

最後に

実際のECでは、商品画像に商品の詳細情報などをキャプションとして表示させることができれば、ページを移動することなく、商品について知ることが可能になります。一覧表示で商品が並んでいる際にも、有効ですね!

是非使ってみてください。

本田

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+