サイト構築 -JavaScript

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu

Post on:2015年5月29日

縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装できるjQueryのプラグインを紹介します。 細かいとこまで配慮が行き届いた設計に、よく考えられてる!と思

...記事の続きを読む

[JS]変形アニメーションがかっこいい!アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js

Post on:2015年5月26日

オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだ

...記事の続きを読む

[JS]ちょっとしたアイデアの積み重ねが素晴らしい!画像を拡大表示するシンプルなスクリプト -Zoom.js

Post on:2015年5月13日

よく見かけるWebページのインタラクションも、ちょっとした工夫を加えることで新鮮な驚きと感動を与えることができます。 Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプトを紹介します。 レ

...記事の続きを読む

レスポンシブのうまいアイデア満載!RWD対応のナビゲーションを実装するスクリプトのまとめ

Post on:2015年5月7日

Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使

...記事の続きを読む

[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS

Post on:2015年4月27日

アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ~んとなるのが、かなり気持ちい

...記事の続きを読む

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

Post on:2015年4月21日

最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の

...記事の続きを読む

[JS]これは便利!YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js

Post on:2015年4月15日

YouTubeやVimeoやDairyMotionをはじめ、VineやTEDなどの動画、ツイート、CodePenやJSFiddleなどのコード、PDF、Googleマップなど、さまざまなメディアをWebページに簡単に埋め

...記事の続きを読む

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory

Post on:2015年4月9日

スマホなどのタッチデバイス対応、ミニマルにデザインされた素敵なスライダーを実装するMIT, GPLライセンスのスクリプトを紹介します。 スクリプトは単体でもjQueryのプラグインとしてでも動作します。 Iory Ior

...記事の続きを読む

[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

Post on:2015年4月3日

スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ! Space

...記事の続きを読む

レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ

Post on:2015年3月30日

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更な

...記事の続きを読む

top of page

©2024 coliss