タグ

ブックマーク / black-flag.net (2)

  • jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法|BLACKFLAG

    今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン/アウト】 jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 「【フェードイン/アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示 ページ内を一定距離スクロールすると 画面右下に位置固定した形で「ページトップへ」ボタンが フェードインして表示されます。 サンプルではページ内を100pxスクロールすると ボタン

    jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法|BLACKFLAG
  • jQueryでニュースティッカーをシンプルに実装する方法|BLACKFLAG

    Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル(ベーシック)な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe

    jQueryでニュースティッカーをシンプルに実装する方法|BLACKFLAG
  • 1