[B! plugin][jQuery] designstalkerのブックマーク

high-performance-sticky-sidebar.html

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。特定の状況下でフックするために、イベントトリガーを用意。コンテナが長くても短くてもサイドバーを扱うことができます。他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。実装はスーバー簡単！ Sticky Sidebarのデ

designstalker 2017/10/31

リンク

slick.jsにYouTube, Vimeo, video要素の動画を含めて自動再生するスライダーを生成する方法

現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。スライドに動画を含める要件動画は、YouTube、Vimeo、video要素のムービーを含めることができる動画スライドが表示された際は、自動再生させる動画スライドが非アクティブになった際は、一

designstalker 2017/10/29

リンク

[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ

Bubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。

designstalker 2016/03/14

リンク

[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster

レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量（5kb）のスクリプトを紹介します。パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。 jQuery Flipster -GitHub jQuery Flipsterのデモ jQuery Flipsterの使い方 jQuery Flipsterのデモ対応ブラウザは、Chrome, Safari, iOS Safari, Firefox, IE10+で、IE8/9は一部サポートです。デスクトップでもスマホでもタブレットでもOKです。

designstalker 2016/01/15

環境によっては反応が鈍かったり、動きがモッサリする。また狙った位置へ動かすことが難しい場合もある。

リンク

背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。背景に画像や動画のスライドショーを実装できる「Vegas」背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。

designstalker 2016/01/14

リンク

[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider

シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴オープンソースライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。超軽量スクリプトは6KBで、超軽量です。実装は簡単でクリーンなHTML 数分で実装でき、非常にシンプルでValidなHTML。スライドの方向は多彩通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。レスポンシブ対応デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。キーボード操作の対応キーボード（矢印キー）での操作をサポートし

designstalker 2015/12/04

リンク

[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS

レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。

designstalker 2015/11/30

リンク

[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"

designstalker 2015/05/29

リンク

[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.google apis.com/ajax/libs/jquery/1.11.0/j

designstalker 2015/05/13

リンク

[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.

designstalker 2015/04/15

リンク

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

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS

designstalker 2015/04/09

リンク

[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll

コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 eco ScrollのデモデモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。

designstalker 2015/04/02

リンク

[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

designstalker 2015/03/16

リンク

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモデモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。デモページ：Demo 3 In: bounceIn, Out: bounceOut a

designstalker 2015/03/04

リンク

[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl

designstalker 2015/01/29

リンク

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.google apis.com/ajax/libs/jquery/2.1.1/jquery.min.js

designstalker 2014/12/19

良さげ

リンク

[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems

タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI

designstalker 2014/12/09

リンク

2014年総まとめ、jQueryのプラグインとスクリプト100選

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。背景関連 SVG関連縦長ページ関連スクロール連動・パララックス関連その他スクロール操作・補助関連レスポンシブ関連ナビゲーション関連レイアウト関連コンテンツ生成関連コンテンツ紹介・ツアー関連スライダー・カルーセル関連画像拡大・配置・キャプション関連アニメーション関連エフェ

designstalker 2014/12/05

リンク

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。今必要とされるさまざまな機能を備えています。「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。デフォルトの5タイプのスライダー機能は非常に豊富です。さまざまなデバイスのスクリーンに対応デフォルトで完全にレスポンシブ対応（デモ全て）タッチ・スワイプ操作に対応（デモ全て）ブレイクポイント

designstalker 2014/11/19

リンク

[JS]非常に簡単な実装で、ページ上のさまざまな要素にオーバーレイを表示できるスクリプト -Purplecoat.js

画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示できるjQueryのプラグインを紹介します。使い方も非常に簡単で、スクリプトを一行も記述しないで利用できます。デモページ：カスタマイズ Purplecoat.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="purplecoat-min.js"></script> </body> Step 2: HTML オーバーレイを表示したいエレメントにda

designstalker 2014/11/12

リンク

はてなブックマーク

タグ

関連タグで絞り込む (30)

pluginとjQueryに関するdesignstalkerのブックマーク (216)

お知らせ

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス