[JS]アイデアが素晴らしい!ページにちょっとしたアクセントを加えるスクリプトのまとめ

そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。

デモのキャプチャ

forkit.js
forkit.js -GitHub

GitHubなどでよく見かけるリボンが、ぷら〜んと楽しいアニメーションでぶら下がり、更にそれを引くとコンテンツが表示されます。

デモのキャプチャ

Perspective Scroll

縦長のコンテンツをスクロールする時にアニメーションで傾けます。
逆にスクロールすると、パースも逆になります。

デモのキャプチャ

browserSwipe
browserSwipe -GitHub

コンテンツをスクロールするとスワイプのように次々にアニメーションで表示します。エフェクトもさまざまなものが用意されています。

デモのキャプチャ

Fancy Scroll
Fancy Scroll GitHub

スマフォでスクロールした時の一番上と下ではずむようなエフェクトをデスクトップでも再現させます。

デモのキャプチャ

Perspective View Navigation
デモページ

コンテンツをダイナミックなアニメーションで傾けて、ナビゲーションを表示します。キャプチャの他にもさまざまなスタイルがあります。

デモのキャプチャ

Split Layout
デモページ

二分割したレイアウトで、二つのコンテンツをダイナミックなアニメーションで表示します。

デモのキャプチャ

Border Animation Effect with SVG
デモページ

SVGを使ってパネルのホバー時、ボーダーにキランと光るようなかっこいいアニメーションを適用します。ちょっとSVGを使ってみたいという人にもいいかもしれません。

デモのキャプチャ

Placeholdem
Placeholdem -GitHub

フォームの入力欄をフォーカス時にハイライトさせ、プレースホルダのテキストをアニメーションで消します。

sponsors

top of page

©2018 coliss