CSS3で簡単にページ切替を追加できる「Animsition」

フェードアウト、インでページ切り替えをしたりその他色々なトランジションで切り替えできる。ちょっと動きを追加したい時や動きに合わせた表現方法も考えられるかも。

◯サポートブラウザ
モダンブラウザとIE10以上

◯リンク

A simple and easy jQuery plugin used to add page transition on css animations.

[CSS3]使ったら面白いかもマウスジェスチャーで動くアニメーション

[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック

demo

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

demo

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

参考サイト：http://coliss.com/articles/build-websites/operation/javascript/js-wow.html

マウススクロールでアニメーションするJSまとめ。

０１.スクロールに応じて画を切替えるJS
(画像が切り替えで動くアニメーションを動かす事ができる)

スクロールに応じて動くアニメーションをつくる方法

０２.jQueryで横スクロールのアニメーションするサイトを作る方法
マウスホイールにも対応。ページの先頭ピッタリに（左に寄せて）移動してくれる。
※スマホ、タブレットのタッチデバイスに対応はしていないので何か考える必要あり。

０３.パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
skrollr.jsというタッチデバイスにも対応しスクロールアニメーションできるJSライブラリがあるのだが、こちらのほうが軽量でPCブラウザならIE7も対応しているのでメモ。

DEMO

スマホの傾きを検出してParallax効果を作れる「parallax.js」

スマホの傾きを検出してParallax効果を作れる「parallax.js」
キャンペーンサイトなどでやると印象がグッとアップしそうなエフェクトが作れるっぽいですが、このデモは必見ですね。

parallax.js

スムーススクロールにバウンドなどのアニメーションを加えるjQueryプラグイン「AnimateScroll」

AnimateScroll - jQuery Plugin for Animating Scroll

PCサイトでもスマホサイトのようにサイドバーを実装する「Sidebar Transitions」

PCサイトでもスマホサイトのようにサイドバーを実装する「Sidebar Transitions」

Sidebar Transitions

HTML5 Canvasを使ってローディング用のアニメーションを作成する「sonic」

参考サイト：[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator

html5のcanvas＋JSで描画する勉強サイトまとめ

・HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！

・HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

・『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

・Canvasリファレンス

・まだまだ間に合うCanvasでアニメーション入門（まとめ実践）

・Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景

jqueryrotate - 画像を回転させられるjQueryプラグイン

jqueryrotateは、画像を回転させられるjQueryプラグインです。
ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。

URL：jqueryrotate

「jQuery.flickable」スマホでもPCでドラッグとフリック操作でスクロール

http://lagoscript.org/jquery/flickable/demo

<元サイト>
http://lagoscript.org/jquery/flickable/demo

simpleWeather - 天気を表示するためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/simpleweather_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

« グラフィカルな&(and, ampersand)のフォント | トップ | Redactor - 美しいWYSIWYGエディタ » BIGVIDEO.JS - フルスクリーンの背景に動画を埋め込むためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/bigvideojs_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方

 「jsfiddle」
ブログに実行したスクリプトと結果がでるので便利。
β版もこれからでるそうなので使い方はこれから探る。

<参考サイト>
http://kachibito.net/web-service/how-to-join-jsfiddle.html

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)
<参考サイト>
 http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html
<元サイト>
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

 CSS(スタイルシート)をjavascriptで切り替える色々な方法のメモ
参考サイト
http://blog.4galaxy.net/19.html

スクロール時に画像の読み込みを開始するAjax Lazyload

スクロール時に画像の読み込みを開始するAjax Lazyload
http://blog.4galaxy.net/67.html

アニメーションで文字を表示させていくjQueryプラグイン・Lettering Animate

背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH

参考URL:http://kachibito.net/web-design/backstretch.html
使用サイト例：http://www.madeinmeproject.co/