お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。

作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint

以前にも、２回程エントリーをだしていたのですが、年末になって、この『リンクのクリック領域をブロック全体にするスクリプト』へのアクセスがちょっと増えていましたので、改めて再度まとめてみようかと思います。 jQuery：リンクのクリック領域をブロック全体にする簡単なスクリプト リンクのクリック領域をブロック全体にするとは？ どういうケースかというと、商品の一覧で、画像をクリックしても、画像下の説明テキストをクリックしても、ひとつのブロック内であれば全体をひとつのリンクとしたい！というような場合に利用します。 HTMLで簡単につくろうとしたら、aタグをブロック全体に付けたらいいのですが、うまく全体にならなかったり、動作がおかしくなったり、なによりマークアップ的にいいのかな？なんて思ったりもするので、あまり利用はしないと思います。ですが、JavaScriptを使えば簡単にこれが実装できるのです！

2.ローディングアイコン 読み込んでいる間に表示させるローディングアイコンを用意しましょう！ 私はこちらのサイトでローディングアイコンを作成しました！細かい設定ができるジェネレーターです！ 3.「次のページへのリンク」を取得する関数 「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。 例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。 以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得

「サイトにカレンダー機能付けて！」って時って、意外と悩みませんか？Wordpress何かで作る時はプラグインで対応しますが、CMS無しで、ランディングページ的なの作って的な案件の時は、まーなんだかんだよく迷う。Googleカレンダーの埋め込みだと見栄えがちょっと…って事も多いですよね。 僕はと言えば、プログラマーさんにカレンダー部分だけ別で依頼したりする事も少なくは無かったんですが、それにしたってカスタマイズ性を考えて高機能な物にすればする程、コストは掛かるし、ちょっとどうしたもんかと更に頭を悩ませる事も少なくありませんでした。 今日ご紹介する、jQueryのカレンダープラグイン『CLNDR.js』はもしかしたらそんな悩みを解決してくれる手段の一つになるかもなと思ったので、共有させて頂きます。 中を見てみると、結構jsの知識が無いとキツイ感じですが、jQuery触ったことあるレベルの人でも

HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない

WordPress jQuery などの Web 制作関連のメモと iPhone Macのこと

Design, Content, Experience

Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y