スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページトップまでスクロールするボタンの作成方法(jQuery,css)

ページトップまでスクロールするボタンの作成方法

ある程度までスクロールするとページトップに戻るボタンを出現させます。


HTML
<p class="pagetop"><a href="#wrapper">▲</a></p>

解説
三角形を表示しデザイン部分はCSSにて記述いていきます。
画像を使用する場合は、▲部分に画像を指定してください。
#wrapperは戻る位置の例


CSS
.pagetop {
 position: fixed;
 bottom: -40px;
 right: 50px;
}
.pagetop a {
 display: block;
 width: 50px;
 height: 50px;
 background-color: #595757;
 border-radius: 50px;
 text-align: center;
 color: #fff;
 font-size: 24px;
 text-decoration: none;
 line-height: 50px;
}

解説
ボタンの色や形、▲の位置などを設定します。
position: fixed; で右下へ固定配置をしています。



jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
 var flag = false;
 var pagetop = $('.pagetop');
 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   if (flag == false) {
    flag = true;
    pagetop.stop().animate({
     'bottom': '0'
    }, 200);
   }
  } else {
   if (flag) {
    flag = false;
    pagetop.stop().animate({
     'bottom': '-40px'
    }, 200);
   }
  }
 });
 pagetop.click(function () {
  $('body, html').animate({ scrollTop: 0 },300);
  return false;
 });
});
</script>


解説
if ($(this).scrollTop() > 100) {   の100は
上から100pxスクロールした時に表示されます。

$('body, html').animate({ scrollTop: 0 },300); の300は
スクロールで戻る際の速度です。

数字でいうと200という数字が2箇所にあるかと思います。
はじめに出てくる200はボタンを出現させる時の出現速度です。
後の200は、手で上にスクロールした際にボタンを隠す時の消滅速度です。



参考デモサイト

参考URL
http://www.nxworld.net/tips/page-top-appears-scroll.html





スポンサーサイト

実践トレーニング(GU) 6カルーセルパネル自動スライド&まとめ



6回に渡って作成してきましたGUのプロモーションサイト制作。

今回が最終回になります。

前回はタブを使用した商品紹介の部分を作成しました。

続いて、本家GUサイトにもありますが、

複数の画像を一行で表示して数秒間隔で自動スライドするカルーセルパネルの
作成です。

  →モデルが着用した時のイメージ画像をカルーセルパネルにて自動スライドさせます。
  →任意のタイミングでボタンを押すことで見たい画像まで移動する事を可能にします。

GUとまったく同じ形にしようとも考えましたが、左右のボタンと全体の大きさを若干小さめにしてみました。

パネルの作成方法は過去記事を参照
複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネル内の画像をクリックした時にかっこよく拡大表示させたい為、

LightboxというJavaScriptを使用します。

作成方法は過去記事を参照
Javascriptで画像をかっこよく表示させる

カルーセルパネルから下部分は、GUのサイトを模写しました。

デザインや配置など吸収するには良いかなと思います。

一番下のフッターの直前にあるアイコンが複数並べて置いてありそれぞれのアイコンをクリックすると

そのサイトに飛ぶ箇所もそのまま再現しました。

ひとつの画像にアイコンを何個も入れる為、ひとつの画像に複数のリンクを貼らなければいけません。

複数リンクの貼り方は過去の記事参照
ひとつの画像に対し任意の箇所に複数のリンクを貼る

これで一通りのデザインは完成しました。

完成したサイトはこちらから
実践練習サイト GU


今後の制作勉強は、サイト模写もやりつつ、オリジナルデザインのWEBページも作成していこうかなと考えております。





スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。