[JS]アイデアが素晴らしい!ページにちょっとしたアクセントを加えるスクリプトのまとめ
Post on:2014年3月27日
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-02.gif)
GitHubなどでよく見かけるリボンが、ぷら〜んと楽しいアニメーションでぶら下がり、更にそれを引くとコンテンツが表示されます。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-03.png)
縦長のコンテンツをスクロールする時にアニメーションで傾けます。
逆にスクロールすると、パースも逆になります。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-04.png)
browserSwipe
browserSwipe -GitHub
コンテンツをスクロールするとスワイプのように次々にアニメーションで表示します。エフェクトもさまざまなものが用意されています。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-05.png)
Fancy Scroll
Fancy Scroll GitHub
スマフォでスクロールした時の一番上と下ではずむようなエフェクトをデスクトップでも再現させます。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-06.png)
Perspective View Navigation
デモページ
コンテンツをダイナミックなアニメーションで傾けて、ナビゲーションを表示します。キャプチャの他にもさまざまなスタイルがあります。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-07.png)
二分割したレイアウトで、二つのコンテンツをダイナミックなアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-08.png)
Border Animation Effect with SVG
デモページ
SVGを使ってパネルのホバー時、ボーダーにキランと光るようなかっこいいアニメーションを適用します。ちょっとSVGを使ってみたいという人にもいいかもしれません。
![デモのキャプチャ](/wp-content/uploads-201401/2014032705-01.gif)
Placeholdem
Placeholdem -GitHub
フォームの入力欄をフォーカス時にハイライトさせ、プレースホルダのテキストをアニメーションで消します。
sponsors