Categoryワンページスクロール

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』


SMINT

メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。

スクロールさせても、ナビゲーションバーがページの上部に固定されます。

サンプルをご覧下さい。

→ 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル


ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。

一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。

それでは、設置方法の説明をします。

→「超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』」の続きを読む

Parallax(パララックス)スクロール効果を実現できるJavaScript「skrollr」


Prinzhorn / skrollr

最近、パララックス効果(視差効果)を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。

今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。

サンプルを作ってみました。

→ Parallax(パララックス)効果を実現できる「skrollr」サンプル


エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。

作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。

→「Parallax(パララックス)スクロール効果を実現できるJavaScript「skrollr」」の続きを読む

jQueryでページの途中へ縦スクロールさせる『Scroll to Internal Link with jQuery』

1ページのなかで各コンテンツへスクロールさせるデザインのサイト、いわゆる1ページスクロールサイトが最近ポピュラーになってきました。様々なワンページスクロールサイトがありますが、今回はjQueryを使用して、とても簡単にシンプルなワンページサイトを作る方法を紹介します。

サンプルページを作りました。

→ ワンページスクロールサイトに活用できる『Scroll to Internal Link with jQuery』サンプル


段落ごとにスクロールさせることができるので、うまく利用すれば印象的なサイトが作れると思います。

作成方法は続きをご覧下さい。

→「jQueryでページの途中へ縦スクロールさせる『Scroll to Internal Link with jQuery』」の続きを読む

クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。

サンプルページを作ってみましたのでご覧下さい。

→ 「PageSlide」サンプルページ


セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。

jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。

→「クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」」の続きを読む

横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」


Smooth Vertical or Horizontal Page Scrolling with jQuery


他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。

まずはサンプルをご覧ください。

→ Smooth Vertical or Horizontal Page Scrolling with jQueryプラグインサンプル


→「横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」」の続きを読む