最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
ページやブロック要素の切り替えがかっこいいプラグイン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種類のアニメーションがそろっています。
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"
![[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b654e6fe9828430f6845fd3dd07466d833a3033/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052903-01.png)
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応 iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 投稿日2015年05月07日 更新日2015年05月07日 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before, * {
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ
4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
