ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

ページ表示時にボタンが順番にスライドイン&フェードイン

ページが表示された際に、左から順番にスライドイン&フェードインするナビゲーションを作成してみました。
サイトのちょこっとした演出にいかがでしょうか?

>サンプル

jquery

$(window).load(function(){
	//スライドインのスピード
	var SlideIn = 150;
	//フェードインのスピード
	var FadeIn = 800;
	$('ul li').each(function(i){
		$(this).delay(i*(SlideIn)).css({display:'block',opacity:'0',top:'0'}).animate({opacity:'1',top:'30'}).animate({top:'25'},FadeIn);
	});
});
投稿日
2015年3月26日
カテゴリー
JavaScript

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント