Tag : スクロール

READ MORE

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…

READ MORE

マウスホイールを使ってスクロールした際に縦にスクロールするのではなく、画面全体を横(水平)にスクロールさせることでページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。そんなマウスホイールでの横スクロールに加えてページ上の要素をレイヤー状に重ね合わせて、奥行のあるパララックス効果もつけてスクロールさ…

READ MORE

今やWebサイトを作る際にはほぼ必須アイテムとなっているページの最上部に戻るための「ページトップへ」ボタン。最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。そんな「ページトップへ」ボタンの出現方法をフェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、の3つ…

READ MORE

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1…

READ MORE

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くありその都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですがjQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ自分でもいろいろと試してみたので実験内容と併せて紹…

READ MORE

パララックスサイトやAppleのプロダクトページの様な動きを付ける為のスクロールして特定の位置でアニメーション等の処理を実行させることができるjQueryプラグイン等をここでも何度か紹介しましたがプラグインのバージョンによって動作仕様が変わってしまっていたり上からのスクロールと、下からのスクロールの判断が微妙だったりし…

READ MORE

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法としてパララックス(少々今さら感も感じますが・・・)効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ次画面へ遷移するさせる技法がよく見られます。そんなWebページ内でスク…

READ MORE

TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったのでjQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。jQueryでページ…

READ MORE

最近増えつつある、Webサイトの各コンテンツを、ページを切り替えて見せるのではなく、ページ内をスクロールしてコンテンツ展開しているWebサイト。海外のサイトでよく見かけるようになった手法ですが、その様な、コンテンツ全体をスクロール展開している色々なWebサイトをまとめた、ショーケース記事を自分用メモとして2つほど紹介。…

READ MORE

ここでもWebサイト上のスクロールバーをカスタマイズできるjQueryプラグインをいくつか紹介していますが、実際組み込もうとすると使い勝手の良い物とそうでないものがさまざまあったり。そんなjQueryを使ってのスクロールバーカスタマイズで、実装するのに比較的、簡単シンプルに組み込むことができ、使い勝手の良かったプラグイ…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR