Tag : スライド

READ MORE

Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。単純に並べられた要素がスライドするカルーセルはよくありますが並べられた要素の中央に位置する要素のみを拡大表示させるという少し変わった演出を加えたカルーセルパネルUIをjQueryを使って作ってみたので紹介してみます。jQueryで中央…

READ MORE

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

READ MORE

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

READ MORE

少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなくハンバーガーメニューボタン…

READ MORE

少し前に「jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみた…

READ MORE

最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますがjQueryを使って、ページ最上部(ページヘッダー)にフルスクリーンでのスライドショーを設置しスクロールすると下から通常のコンテンツが表示される、とい…

READ MORE

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

READ MORE

jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポ…

READ MORE

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

READ MORE

先日ここで、レスポンシブ対応のスライドショーとして、「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたがフェード切り替えばかりじゃおもしろくないと思い同様の構成で切り替わる際に、画像を分割してアニメーション…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner