超簡単!フルパララックスサイトのプラグイン!

2014.10.06

WEB制作って そんなサラッと作れるものじゃなく・・・・
 
構成やデザイン コンテンツの見せ方 使用する画像や文章 コーディングにSEO 進捗管理 ブラウザチェック などなど
 
やることは山ほどあります。
 
サイト作るには、アイディアが湧くかどうかも関わってくるので、 個人的には期限設けられるといいものが出なくなります。 なので、余裕を持って制作に打ち込みたいのですが、 なぜかほぼ毎回スピードを要求されるため、 かなりの妥協と温度差を感じている次第でして・・・・。
 
 
たとえば、
 
 
「こんなサイトにしたいんだよねぇ~」
 
liruu01
 
 
っと参考サイトを見てみると・・・・
 
liruu02
 
こっこれはパララックスやんけっっ
 
コンテンツの写真集めやライティング、デザインにコーディングにレスポンシブ対応に・・・・ めちゃんこだなぁ~
 
 
 
「して・・・・」 liruu03 「公開はいつ頃で?」
 
 
 
「う~んっ」 liruu040 「今週中ねぇ!」
 
 
 
「・・・・」 liruu05 「・・・・えっ?」
 
 
 
「だってぇ~」 liruu06 「来週から俺ハワイだしぃぃぃ!」
 
 
 
「はっハワイ・・・・」 liruu07 「がっ頑張りまぁ~す」
 
 
 
っということで、 ハワイという理由だけで自分の仕事がめちゃんこな事になるという理不尽はできれば避けたいですが、 頑張りますっと言っちゃったので頑張ります!
 
こんな時、少しでも工数を減らすため、 制作者側としてはある程度のテンプレートを持っておかなければ対応しきれませんっ! なので、今回は簡単に設置できるパララックスのプラグインをご紹介!
 
会話で使ったシュールな「ミスター・ルー」はLINEスタンプで好評・・・・・・審査中です↓ とりあえず 過去記事: LINEスタンプ「ミスター・ルー」 Stampersさん: 「ミスター・ルー」
 
あと、Twitterはじめました! 「liruu@LINEスタンプ販売」 よかったらフォローしてください。

 

Block Scroll

パララックス URL & DEMO: http://www.dominikgorecki.com/p/block-scroll/
 
「This is a simple plugin...」 素晴らしいですねっ!
 

Block Scroll 設置方法

設置メニュー 1.まず、DL 2.ざくっと仕様説明 3.headにDLしたファイルを設置する 4.headにコードを記述 5.カスタマイズとidea
 
1.まず、DL 以下からダウンロードしてください。 DOWNLOAD: https://github.com/DominikGorecki/block-scroll
 
必要なファイルだけPick Up!
 
Block Scroll ∟ css/blockScroll.css ∟ js/blockScroll.js
 
2.ざくっと仕様説明 DEMOを参考に説明すると liruu001
 
まずは、全体をdiv id「main-wrap」で囲います。 この中にあるコンテンツだけにパララックスを適用させます。
 
ページはフルスクリーンで表示しますので、 1度に表示したいコンテンツをdivで囲います。
 
たとえば、 カテゴリ「intro」は、 divのidを「intro」にして コンテンツ1)「This is a simple plugin...」と コンテンツ2)「...for a simple purpose」で構成。
 
カテゴリ「about」は、divのidを「about」にしてコンテンツ3)「About」で構成。 というような感じ。
 
っで、ナビゲーションをクリックしたときに、 「intro」は、コンテンツ1)へ 「about」は、コンテンツ3)へ と、 カテゴリの先頭コンテンツに移動させる処理を書きます。
 
また、ナビゲーションやPageBackは、div id「main-wrap」外に設置します。 常にページにあったほうが良いパーツは、「position=fixed」などを使って固定させましょう。
 
3.headにDLしたファイルを設置する ページに「blockScroll.css」「blockScroll.js」「jQuery.js」を読み込みます。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/blockScroll.js"></script>
<link rel="stylesheet" href="css/blockScroll.css">

 
CSSはプラグイン用で、リセットとかもろもろセットになっていませんのでご注意ください!
 
4.headにコードを記述 先に説明した「カテゴリの先頭コンテンツに移動させる処理」は、

<script >
   $(function() {
        var blockScroller = $("#main-wrap").blockScroll({fadeBlocks:false});
        $("#Intro-button").click(function() { blockScroller.goto(1); });
        $("#About-button").click(function() { blockScroller.goto(3); });
        $("#Features-button").click(function() { blockScroller.goto(4); });
        $("#Download-button").click(function() { blockScroller.goto(7); });
        $("#Install-button").click(function() { blockScroller.goto(8); });
        $("#Customize-button").click(function() { blockScroller.goto(12); });
        $("#Use-button").click(function() { blockScroller.goto(16); });
        $("#Dot-button").click(function() { blockScroller.goto(18); });
    });
</script>

 
「#Intro-button」はナビゲーション指定します。
 

<div class="top-menu">
<span class="toc-button" id="Intro-button">Intro</span>
<span class="toc-button" id="About-button">About</span>
<span class="toc-button" id="Features-button">Features</span>
・・・
</div>

 
「blockScroller.goto(1)」は、移動の処理をします。 「(1)」は、先に図で説明したコンテンツ番号を指定します。
 
ナビゲーション「#Intro-button」(「intro」 )をクリックすると、 「blockScroller.goto(1)」(コンテンツ(1) )に移動する処理です。
 
ナビゲーション「#About-button」(「about」 )なら、 「blockScroller.goto(3)」(コンテンツ(3) )に移動するといった感じで 全ての指示を書いていきます。
 
これは、head内に設置してもいいですし、 id名やらこのまま利用するなら、js内にコードをコピペしておきましょう。
 
5.カスタマイズとidea あとは、デザインを適用して任意にプラグインなどを使ったりとカスタマイズすれば完成です。 また、いろんな効果を駆使すればもっと面白いサイトにすることだってできます。
 
たとえば、 「Gifアニメ」
 
・・・・・・・・・・・・・ プラグインじゃないっすね・・・・・ こんなの↓ 30-rock-viewing-429 URL: 「cinemagraphs
 
フルスクリーンでコンテンツの一部分だけアニメーションにすれば、 瞳孔がめちゃんこ開いちゃいそうな印象的なサイトにすることもできます。
 
↓ こういう使い方もあります liruu002 URL: 「ハーゼス
 
ちっさい一部分がたくさんあるパターンもいいですね! ぜひご参考に!
Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact