Bootstrap 対応！グラデーションアニメをクラス名ひとつで簡単実装！Granim.js
ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。 今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。 デザインスパイスのひとつに、一度試してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。 ロゴと短文を使ったカード型レイアウト。 See the Pen qaxExO by ya90net (@ya90net) on CodePen.
Bootstrap 対応！パワフルなアニメーションボタンを簡単実装しよう。Codrops Animocons
あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
サイドバーをある範囲内で固定してスクロールに追尾させるjQuery [SOHO ホームページ制作 東京・新宿区 スマイルワークス ]
レイアウトの基本として、2カラムなどでメインのコンテンツとサイドバーにその他のページへのリンクなどを配置することは多々有ります。 コンテンツが長くなった場合、サイドバーはスクロールで隠れてしまい、ページ遷移におけるユーザビリティの低下が起こります。 これをコンテンツの縦幅に合わせてスクロールに追尾するスクリプトはいかがでしょうか？ どんなにコンテンツが長くなってもサイドバーは固定で表示されており、いつでも違うページヘの遷移が可能になります。 デモページ │ SMILEWORKS（当サイト） 実装 HTMLファイルには、サイドバーの固定したい要素を用意 この例では、サイドバーのクラス「fixedmenu」を固定表示にします。 <div id="main"> <div id="content"> コンテンツ部分 </div><!--end content--> <div id="side">
![サイドバーをある範囲内で固定してスクロールに追尾させるjQuery [SOHO ホームページ制作 東京・新宿区 スマイルワークス ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4d872b1aa6d96b8be4b2cb4bead0b8ec20fcdcb/height=288;version=1;width=512/http%3A%2F%2Fsmileworks.biz%2Fwp-content%2Fuploads%2Fsidebar_fixed_banner.png)
「現在のページへのリンクをハイライトさせる」がjqueryでさくっとできてビックリした話 - Qiita
やりたかったこと メニューリンクによくある、いま自分のいるページ（現在地）へのリンクの文字色やら背景色やらが変わる、例のあれ。 某phpフレームワークでできているサイトでこれを作りたくて、if文なりなんなり書くのかなあ、と考えていたら、jquery でなんともあっさりできました。 コード jquery は読み込んだうえで。 <script> var url = window.location; $('.nav a[href="'+url+'"]').addClass('active'); </script> </head> <ul class="nav"> <li><a href="http://www.test.com/test.html">test</a><li> <li><a href="http://www.test.com/test2.html">test</a><li> </u
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」｜アド･エータイプ スタッフブログ
少ないコードでページ内を自在にスクロールさせるjQuery [虚仮の一念…SMILEWORKS BLOG]
selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」:phpspot開発日誌