【jQuery】パララックスなwebサイトを作れるjQueryプラグイン「jQuery-Parallax」

こんにちは。

最近、ウェブデザイン系のブログやニュースを見ているとパララックスという言葉をよく目にします。パララックスというのは「視差効果」のエフェクトのことで、

複数の画像や文章のスクロール量を個別に変化させることで、奥行きのある立体的なデザインが可能となる、というものです。

そんなパララックスを施したサイトを作るためのjQueryプラグインが「jQuery-Parallax」です。

まずはデモサイトです。

http://www.ianlunn.co.uk/plugins/jquery-parallax/

 

かっこいいですね。以前の nikebetterworld.comをベースにして作成したものだそうです。

内容をみてみると各要素にスクロール速度が設定してあって、特に靴の部分のアニメーションが立体的に見える働きをしています。

サイト訪問者の目を惹きつけ、下のコンテンツをもっと見たくなるような、好奇心を起こさせる働きがありそうです。

 

とういわけで、今回このjQueryプラグインを使ってwebページをひとつ作ってみました。

こちらです。

 

※製作途中ですので、構成が変わる可能性があります。

 

香炉についての新しい使い方を提案したサイトです。香炉は実際にAmazonやPaypal(クレジットカード)で購入できるので、ぜひどうぞ。

更にコンテンツを追加したいのですが、サイト訪問者を飽きさせずに最後まで見てもらうためには、もう少し変化のあるアニメーションが必要かもしれません。

 

ストーリーに沿った内容のwebサイトを作りたいときなんかに適しているのではないでしょうか。

jQuery-Parallax」 チュートリアル http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

 

1

【WordPress】WordPressによって制作されたサイトかどうかを判別する3つの方法

こんにちは。

あるサイトを見ている時に、バックグラウンド、例えばCMSとかツールは何を使っているんだろう?とか気になる時がしばしばあります。

そんな時にサクッと確認できる方法があったらいいですよね。ということで、今回は私が使っている(使っていた)、WordPressで作成されたサイトかどうかを判別する方法を3つ紹介します。

 

1.判別サイト「Is it WordPress?」

 

 

 名前のままのWordPress判別サイト。調べたいサイトのURLを入力すればすぐにそのサイトがWordPressで作られたものかどうか分かります。

また、使用されているバージョンも表示されます。

 

2.Chrome拡張機能「Chrome Sniffer」

 私が現在使っている方法です。Chromeをお使いの方限定なのですが、この拡張機能を導入することでページ閲覧時にURL欄右端にアイコンが表示されます。

WordPess以外にもアナリティクスやjQueryなど、そのサイトで使用されている技術が分かってしまいます。それぞれのバージョンもちゃんと表示されます。とても便利です。

 

 3.ページのソースをみる

情報を知りたいページで右クリックし、ページのソースを表示という項目を選択。そのページのHTMLが表示されます。

その中のmeta情報やhrefなどにwp-contentやwp-includes、wpなどが書かれていればそのサイトはWordPressで作られたものです。

 

 

 

 

私がよく使うパターンとしては、「Chrome Sniffer」でサイトを判別し、さらにどのようなツール、プラグインが使われているか知りたいときはページのソースを表示します。

この「Chrome Sniffer」を使って以来、普段からどのような技術で作られたものかよく見るようになり、またWordPressで制作された企業サイトの多さに驚きました。

ぜひこれらの方法を使ってみてください。

 

0

【jQuery】Preziのようなアニメーションを実現するjQuery「jmpress.js」

こんにちは。今回はjQeryプラグイン「jmpress.js」を紹介します。 このjmpress.jsはimpress.jsのjQuery版で、ウェブページを一枚のキャンバスに見立て、様々なアニメーションを展開してコンテンツを表示します。まずはデモページを見ていただいたほうがはやいと思います。

 

http://jmpressjs.github.com/jmpress.js/#/home

 

※矢印キーまたはスペースで操作します。

 

 

 

 

 

まさにアニメーションがPreziのようです。というのも、実際にこのプラグイン制作者はPreziにinspireを受けて制作したからだそうです。私も試しに作ってみました。(デモを多少改良しただけですが。)

 

http://demo006.hotcom-web.com/#/step-1

 

 

 

目が回って気持ち悪くなった方申し訳ありません。

コンテンツをボックス要素で囲み、位置情報をdata属性で指定してやれば動くので、思ったよりシンプルな構造でした。また、アニメーションのオプションが豊富にあって多様な動きが実現出来ます。ただ、アニメーションや角度をつけてぐるんぐるん回転させすぎると目が回るので注意。

使い方とオプションの詳細はこちらに書いてあります。

 

jmpress.js documentation

 

 

また「jmpress.js」と組み合わせて、「Slideshow with jmpress.js」というスライドショーを表示することができるjQueryもありました。

 

 

 プレゼンテーションツールとして紹介されているところが多いですが、webサイトに使ってみると面白そうです。

今度、「jmpress.js」を使ってwebサイトを制作してみます。ではまた。

0