Home > スポンサー広告 > 自力でjqueryで動きをつけたい場合の考え方

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/67-15fa8074
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 自力でjqueryで動きをつけたい場合の考え方

Home > デザイン > 自力でjqueryで動きをつけたい場合の考え方

自力でjqueryで動きをつけたい場合の考え方

jquery.jpg

なめらかに動くスライド、可愛いローディングやフェード、
次々と展開されるプレゼンテーション。
配布されている拡張ソースは圧縮されていて読めないし、
コピペすれば動いても、触れるのはcssとhtmlだけ。
だからなにがどうなってそうなるのか、
わからないままでもなんとなく使えてしまうjquery。
そのままでも一般的な動きは付けられますが
一歩すすんで要望や自分のイメージ通りにしようとしたときに
ハードルが高くなってしまうように感じます。
本やウェブの資料を読んでだいたいの知識はあるけれど、
なんとなくしっくりこなかった私自身の
jqueryの考え方を書いてみたいと思います。



jqueryはきっかけがあってやっと動く。

jqueryというのは、何か”きっかけ”があって初めて動き始めます。
ブラウザにデータがロードされたタイミングとか、ボタンを押したタイミング、マウスを乗せたタイミング。
このタイミングまでは、どれだけ長いコードを書こうが動きません。
これをイベントと呼びます。
まずは、どのタイミングで動かしたいのかを単体で考え、連動させたい場合はどうやったら連動して見えるのかを考えていきます。


基本はhtmlとcssの設定を変化させるもの。
そこにエフェクトやアニメーションが付与されていく。



ああいう動きが作りたい、と考えたとき、そのままの思考だとうまく作れないことが多くて、
動きの前にどこのタグを使うのか
そのタグの情報を取得するにはどうしたらいいのかを先に考えるとうまくいきます。
タグの情報を取得するために必要なのが
セレクタ。 だいたいのjquery本は文法の後
数ページに渡ってセレクタの解説をしてるのも、多分ここが重要だから。

ベースにあるhtmlのタグのうちのどれかを、きっかけを始まりにして変化させ、
独自のアニメーションを付与することで
サイトを見る人にちょっとした驚きや、印象づけや、
わかりやすいナビゲーションを提供するのがjquery。
jqueryがメインで動いているんじゃなくて、
あくまでも制御ボタンみたいなもので
実際に働いて変化しているのはhtmlなんですね。


実装の手順


1.ベースとなるデザインもほぼ完成に近いhtml+cssを用意する

2.動きを考える 出来るだけ動きは単純なところまで落とし込む

3.イベントを決めて、何をきっかけに、どこの情報を基準に動かすかを考える
イベントだけ書いて動かしてみる

4.セレクタで動かしたいタグの情報が取得できるかチェック

5.取得できたらイベントと合わせてみる

6.htmlの属性やスタイルやタグの中身を差し替えたり、表示順序を変えたり、アニメーションを付けたりといったjqueryっぽい動きをつける

7.cssで表示を調整したりして仕上げる

(extra:) あとは同じことを繰り返して好きにコントロール。

みたいな流れで組み込んでいくようにイメージすると、あまり遠回りせずにすむかなとおもいます。


複雑そうに見えるものも、
シンプルな構成でできていることが多い


いろんなサイトを見て、気になる動きがあったら
ソースを見るのも大事。
「どうせわからないから」と見ないでいると、いつまでも見えないままなんですよね。
実は単純な仕組みやライブラリを引っ張ってきて
連動させて複雑に見せているパターンはよく見かけます。
なので、素敵なサイトがあったらソースをみて、勉強してみましょう。


いかがでしょうか。
jqueryの適度な採用で、見ている側の人たちによりよいユーザー体験をしてもらえるような
表現やナビゲーションを追求してみるのも面白いかもしれませんね。

関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/67-15fa8074
Listed below are links to weblogs that reference
自力でjqueryで動きをつけたい場合の考え方 from バニデザノート

Home > デザイン > 自力でjqueryで動きをつけたい場合の考え方

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。