jQueryスライダープラグイン9選！スライドショーを手軽に作成
JavaScriptは非常に便利ですが、ゼロスクラッチでイチからコーディングを行うのは非常に大変です。そのため、何らかのフレームワークやライブラリを使うのが標準的ですが、その中でもjQueryはいまだに根強い人気を誇っています。 「脱jQuery」という言葉も耳にしますが、プラグインを読み込むだけで基本機能のほとんどが実装できてしまうjQueryプラグインは、初心者には大変ありがたいものです。 今回は、その中でも手軽で便利なjQueryスライダープラグイン9選をご紹介します。2018年に新規に立ち上げるサイトなどに、こうしたプラグインを採用してみましょう。 ▼こちらもチェック▼ UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン15選 手軽で便利なjQueryスライダープラグイン9選 1. slick slickは、最も便利で手軽に使えるjQueryスライダープラグイ
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
![[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element](https://cdn-ak-scissors.b.st-hatena.com/image/square/377f2ddc69b2ef9572766d48a6b972e09609fa5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110601.png)
[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up
ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。 ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。 デモの動き スクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="flowup.js"></script> </body> Step 2: HTML 各パネルは、p, div, articleなどで実装します。 <body>
![[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b7675076470053d98f60b5ead221eadfa0c6569/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015100903.png)
テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT - かちびと.net
テキストの幅にあわせてテキストの サイズを自動調整してくれる、という jQueryプラグイン。Fittextという、 同じようなライブラリがあるんですが、 このライブラリに影響を受けている みたいです。 ボックスの幅一杯に広がり、それに応じてフォントサイズも調整しますので、ダイナミックな表現が可能ですね。レスポンシブWebデザインとも相性の良いライブラリです。 英語だと素敵に見えますね。こんな感じでボックス内の幅一杯にピッタリ合うようにテキストサイズを調整してくれます。なのでレスポンシブWebデザインにも対応できる、という事になります。 少々問題もありますが、日本語でも使えます。というわけで手抜きですけどデモをどうぞ。 Sample iPhoneとかIE iPhoneでもうまく動作してくれます・・けどもっとちゃんと作ればよかったｗ ↓ IEでもOKでした。 ↓ コード <script sr
1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】 | InfinityScope
スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれる、1ページで完結するタイプのサイトを作成するときに参考にしたいパララックスやフリップ型などのjQuery Pluginを集めました。 1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】is a post from:InfinityScope 投稿全文を表示する - View All Content Follow Me : FaceBook Page InfinityScope 関連オススメ記事モバイルメニューを実装する多機能 jQuery plugin『mmenu』ページを縦横斜めに、滑らかにスクロールすることが出来るJS,jQueryプラグインから4選「Masonry」のようなPinterest風デザインを実装できる jQuery pluginをいくつかリ
インスピレーションがもらえてデザインの参考になる、国内外のデザインギャラリー - NxWorld
デザイン制作時の参考にしたりインスピレーションがもらえる、主にwebデザイン向け国内外のデザインギャラリーを紹介します。 主にwebデザイン向けになりますが、一部デザイン全般で参考になるサイトもあります。 中には特定のテーマやパーツに絞ったデザインのみを紹介しているギャラリーもあるので、日頃デザインしていて「この雰囲気のデザインをいつも悩む」とか「この部分の引き出しを増やしたい」という人は、そういったサイトを日頃からチェックするのがおすすめです。 過去にもこういったデザインギャラリーをまとめて紹介したエントリーを書きましたが、クローズしたサイトが目立ってきたり見つけた当時とは収集しているデザインが異なるテーマになっているサイトなどもあったので、それらの編集・削除も兼ねつつすべてひとまとめにしました。
[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
![[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42d4f0aeabe8d5c05510d7c537c44691f1eec9d1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015071301.gif)
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
