サイト構築 -JavaScript

[JS]WordPressにも最適!シンプルなHTMLをさくっとアコーディオンにしてしまうスクリプト -Magic Accordion

Post on:2014年9月25日

h2の見出し、コンテンツ(テキストや画像)、h2の見出し、コンテンツ(テキストや画像)、、、と実装されたシンプルなHTMLをアニメーションで開閉するアコーディオンにするjQueryのプラグインを紹介します。 ↓上の赤いボ

...記事の続きを読む

[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS

Post on:2014年9月22日

最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイ

...記事の続きを読む

[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider

Post on:2014年9月17日

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 Pogo Slider Pogo Sl

...記事の続きを読む

[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider

Post on:2014年9月10日

HTML5のシンプルなコード、CSS3を使ったかっこいいアニメーション、レスポンシブ対応でタッチデバイス対応、SEOにもフレンドリーで、W3C ARIAにも準拠した画像スライダーのスクリプトを紹介します。 脱jQuery

...記事の続きを読む

[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js

Post on:2014年9月8日

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Timesheet.js Timeshe

...記事の続きを読む

[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse

Post on:2014年9月2日

アイコンをタップでメニューをスライド表示したり、スライドさせると折り紙のように畳まれたり、スクロール時にエレメントが追従するように表示されたりなど、モバイル向けWebページの気持ちいいアニメーションを実装できるスクリプト

...記事の続きを読む

[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト(WordPressにも対応) -Animsition

Post on:2014年8月29日

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することがで

...記事の続きを読む

[JS]フラットなデザインで映える!美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle

Post on:2014年8月28日

Googleが提唱する新しいUX「Material Design」で採用されている美しく広がる波紋のエフェクトを簡単に実装できるjQueryのプラグインを紹介します。 波紋にはさまざまなバリエーションがあり、どれも美しい

...記事の続きを読む

[JS]レスポンシブ対応の画像表示テクニック!見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint

Post on:2014年8月26日

画像をデスクトップの広いスペースではそのまま表示し、スマホやタブレットなどの狭いスペースでは指定した箇所を中心にクロップして表示する、レスポンシブ対応の画像をクロップするjQueryのプラグインを紹介します。 Focus

...記事の続きを読む

コレは使ってみたいな!CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka

Post on:2014年8月22日

画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サ

...記事の続きを読む

top of page

©2024 coliss