パララ ク   ッ ス効果を使った  WordPress サイト    2012.07.22 WordBench 京都
自己紹介         西山 拓磨         •   デザイナー(Web/グラフィック)         •   専門学校講師takuma         •   大阪・京都を中心に活動         ポートフォリオ http://t...
パララ クス効果とは   ッ
パララ クス          ッ          =         視差‣   視点をずらすことで奥行きを表現
パララックスを取り入れたウェブサイトNIKE BETTER WORLD http://www.nikebetterworld.com/about
“奥行き”の仕組み
重なる要素をレイヤーに分ける
異なるスピードで動かす
異なるスピードで動かす
実装方法background-position の値をJavaScript で動的に変化させる
jQueryプラグイン‣   Sequence    http://www.sequencejs.com/‣   Scrolling Parallax    http://jonraasch.com/blog/scrolling-paralla...
おすすめプラグインhttp://johnpolacek.github.com/scrolldeck.js/
Point1. NIKEのサイト風サンプル
Point2. アニメーションエフェクト
最適なコンテンツ     キャンペーンサイト     ランディングページ‣   写真 イラストが中心のシングルページ      ・
×Parallax Effect
WordPressデフォルトではテキストベース‣   ブログ以外のコンテンツを作る
サイト設計                ホーム商品特徴   ラインアップ   CM 情報   開発ストーリー   お問い合わせ
サイト設計          ホーム          商品特徴         ラインアップ          CM 情報         開発ストーリー         お問い合わせ‣   コンテンツをト プページに集約           ッ
サイト設計       ホーム       商品特徴     固定ページの内容      ラインアップ    カスタム投稿タイプの内容       CM 情報    カスタム投稿タイプの内容      開発ストーリー   通常の投稿の内容   ...
トップページのカスタマイズ専用のテンプレートを準備  ‣   home.pnp を作成
トップページに表示‣   カスタム投稿タイプの内容‣   固定ページの内容‣   メールフォーム
カスタム投稿タイプ
カスタム投稿タイプ   プラグインをインストール「Custom Post Type UI」
カスタム投稿タイプ          home.php にコードを記述<?php query_posts( Array( post_type => ⃝⃝ ) ); ?><?php if ( have_posts() ) : while ( ha...
固定ページ
固定ページ           home.php にコードを記述<?php $page = query_posts( pagename=⃝⃝ );     echo $page[0]->post_content;?>
固定ページ                改行を反映する場合<?php $page = query_posts( pagename=⃝⃝ );     echo apply_filters( the_content , $page[0]->po...
メールフォーム
メールフォーム プラグインをインストール「Contact Form 7」
メールフォーム
メールフォームhome.phpでショートコードを使う場合<?php echo do_shortcode(  [contact-form-7 id="8" title="お問い合わせ"]); ?>
制作の流れ コンテンツをトップページへ集約スクロールによるパララックスを実装
パララックスを使ってWordPressサイトにユニークな演出を!
One More Thing…
WordPress×パララックス  によるウェブサイト
本日公開!
morisu maki   http://morisumaki.com/
Upcoming SlideShare
Loading in …5
×

パララックス効果を使ったWordPressサイト

7,689 views

Published on

2012.07.22 第6回WordBench京都にて発表 http://takumadesign.com/blog/wordbenchkyoto-vol6-report/

Published in: Design

パララックス効果を使ったWordPressサイト

  1. 1. パララ ク ッ ス効果を使った WordPress サイト 2012.07.22 WordBench 京都
  2. 2. 自己紹介 西山 拓磨 • デザイナー(Web/グラフィック) • 専門学校講師takuma • 大阪・京都を中心に活動 ポートフォリオ http://takumadesign.com/
  3. 3. パララ クス効果とは ッ
  4. 4. パララ クス ッ = 視差‣ 視点をずらすことで奥行きを表現
  5. 5. パララックスを取り入れたウェブサイトNIKE BETTER WORLD http://www.nikebetterworld.com/about
  6. 6. “奥行き”の仕組み
  7. 7. 重なる要素をレイヤーに分ける
  8. 8. 異なるスピードで動かす
  9. 9. 異なるスピードで動かす
  10. 10. 実装方法background-position の値をJavaScript で動的に変化させる
  11. 11. jQueryプラグイン‣ Sequence http://www.sequencejs.com/‣ Scrolling Parallax http://jonraasch.com/blog/scrolling-parallax-jquery-plugin‣ Curtain.js http://curtain.victorcoulon.fr/ その他いろいろ
  12. 12. おすすめプラグインhttp://johnpolacek.github.com/scrolldeck.js/
  13. 13. Point1. NIKEのサイト風サンプル
  14. 14. Point2. アニメーションエフェクト
  15. 15. 最適なコンテンツ キャンペーンサイト ランディングページ‣ 写真 イラストが中心のシングルページ ・
  16. 16. ×Parallax Effect
  17. 17. WordPressデフォルトではテキストベース‣ ブログ以外のコンテンツを作る
  18. 18. サイト設計 ホーム商品特徴 ラインアップ CM 情報 開発ストーリー お問い合わせ
  19. 19. サイト設計 ホーム 商品特徴 ラインアップ CM 情報 開発ストーリー お問い合わせ‣ コンテンツをト プページに集約 ッ
  20. 20. サイト設計 ホーム 商品特徴 固定ページの内容 ラインアップ カスタム投稿タイプの内容 CM 情報 カスタム投稿タイプの内容 開発ストーリー 通常の投稿の内容 お問い合わせ メールフォーム‣ コンテンツをト プページに集約 ッ
  21. 21. トップページのカスタマイズ専用のテンプレートを準備 ‣ home.pnp を作成
  22. 22. トップページに表示‣ カスタム投稿タイプの内容‣ 固定ページの内容‣ メールフォーム
  23. 23. カスタム投稿タイプ
  24. 24. カスタム投稿タイプ プラグインをインストール「Custom Post Type UI」
  25. 25. カスタム投稿タイプ home.php にコードを記述<?php query_posts( Array( post_type => ⃝⃝ ) ); ?><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php content(); ?><?php endwhile; endif; ?>
  26. 26. 固定ページ
  27. 27. 固定ページ home.php にコードを記述<?php $page = query_posts( pagename=⃝⃝ ); echo $page[0]->post_content;?>
  28. 28. 固定ページ 改行を反映する場合<?php $page = query_posts( pagename=⃝⃝ ); echo apply_filters( the_content , $page[0]->post_content);?>
  29. 29. メールフォーム
  30. 30. メールフォーム プラグインをインストール「Contact Form 7」
  31. 31. メールフォーム
  32. 32. メールフォームhome.phpでショートコードを使う場合<?php echo do_shortcode( [contact-form-7 id="8" title="お問い合わせ"]); ?>
  33. 33. 制作の流れ コンテンツをトップページへ集約スクロールによるパララックスを実装
  34. 34. パララックスを使ってWordPressサイトにユニークな演出を!
  35. 35. One More Thing…
  36. 36. WordPress×パララックス によるウェブサイト
  37. 37. 本日公開!
  38. 38. morisu maki http://morisumaki.com/

×