Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

[jQuery] Block Scrollプラグイン

公開日: : jQuery, Web制作 ,


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。

Block Scroll

Block Scrollは、その名の通り、ブロックを一つずつスクロールします。
そのため、一つのブロックで紹介したい内容を完結させる必要がありますが、ブロック数で分ける事もできます。

導入方法

一式は、下記からダウンロード出来ます。
https://github.com/DominikGorecki/block-scroll

まずは、jsの読み込みです。

<script src="js/jquery.js"></script>
<script src="js/blockScroll.js"></script>

そして、CSSも読み込みます。

<link rel="stylesheet" type="text/css" href="css/blockScroll.css">

最後に、jsの実行です。

<script>
    $(function() {
        var blockScroller = $("#main-wrap").blockScroll();
    });
</script>

これで準備は整いました。

HTMLはというと、全てを内包するようにmain-wrapがないといけません。
そして、その子要素が全てブロックとして扱われます。

つまり、下記のようになります。

<div id="main-wrap">
 <div>ページ1</div>
 <div>ページ2</div>
 <div>ページ3</div>
 <div>ページ4</div>
 <div>ページ5</div>
 <div>ページ6</div>
 <div>ページ7</div>
</div>

これで、中のdivが全てブロックとなります。

サンプルページを作ってみましたので、よかったら見てください。
サンプルページ

デフォルトの状態だと、各ブロックがfadeするようになっています。
そのため、表示が若干遅れがちになります。

サンプルページでは、そのfadeを切ってすぐに表示されるようにしてあります。
あと、スクロールもわざと速くしてあります。どれくらいになるのか実験ですから、あしからず。

fadeを切る方法は、下記のように実行文に追記してください。

$(function() {
 var blockScroller = $("#main-wrap").blockScroll({
  scrollDuration: 7,
  fadeBlocks: false,
  fadeDuration: 0
 });
});

各パラメータは、省略できますので、必要なければ削除しても大丈夫です。

まとめ

けっこう面白いプラグインですので、使い方や見せ方次第では面白いサイトができるでしょう。

サンプルサイトでは、漫画のような見せ方もしてました。
http://www.dominikgorecki.com/p/block-scroll/demo02.html

パララックスとは違う感じで新鮮なサイトが出来るような気がします。

ad

関連記事

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
PAGE TOP ↑

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524