画像にビフォーアフターを実装できるjQueryプラグイン - NxWorld
使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
素晴らしいjQueryのスライダーを集めた「25 Excellent jQuery Sliders Tutorials and Plugins」
TOP > WebDesign > 素晴らしいjQueryのスライダーを集めた「25 Excellent jQuery Sliders Tutorials and Plugins」 非常に高機能でWEB制作には幅広く利用されている、jQueryプラグインですが、その中でも定番とも言えるのがスライダー。限られた領域でjQueryのプラグインの中でも多く利用されているスライダープラグイン。今日紹介するのはクオリティの高い、素晴らしいjQueryのスライダーを集めたエントリー「25 Excellent jQuery Sliders Tutorials and Plugins」です。 A Beautiful Apple-Style Slideshow Gallery with CSS & jQuery 定番の右から左へ流れるもの、トランジションが効いているもの、キャプチャやサムネイルと連動
ギャラリープラグインデモいろいろ
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」:phpspot開発日誌
クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 2012年10月03日- jQuery.twinkle a jQuery plugin to get the visitor's attention via visual effects larsjung.de クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 どこをクリックしたか、分かりやすくする為に使えそうです。何かのデモをする際にも、プレゼン等で見ている人にどこをクリックしたか分かりやすくするために使えそう 単なる円形にアニメーションするだけではなくて、色々な効果が選べるのも特徴 どんどんWEB上での表現が豊かになっていきますね 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプ
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
Contract web dev by day & Indie hacker by night! | AaronLumsden.com
PureDigital I have a passion and thirst for learning new technologies to keep up-to-date with modern web development. Certified Laravel Developer I fuss over creating software that not only looks and feels great but that are user friendly and adaptable to changing user needs. I’ve been bringing web ideas to life in a planned and managed way since 2009. I'm also a certified Laravel developer by Lar
多機能でスタイリッシュなギャラリーを簡単に実装できる！jQueryプラグイン「MixItUp」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回は多機能でスタイリッシュなギャラリー用jQueryプラグイン「MixItUp」をご紹介します。 「容量は軽いけれど力強く、美しいアニメーション、ソートやカテゴライズ、フィルタリング、レスポンシブレイアウト対応」…と、プラグインの説明ページから目についた英単語を並べただけでも機能の豊富さが分かって頂けると思います。 各機能の詳細は3パターンのDEMOサイトが用意されていますので、そちらをご参照ください。 MixItUpのDEMOサイトを見る ちなみに商用、非商用問わず使用可能です。 対応ブラウザはGoogleChrome4.0以上、Firefox4以上、IE10以上など最新の状態での閲覧を推奨しています。 スマートフォン、タブレットでもスムーズに動くようです。 IE9で試しに閲覧したところエフェクトは付きませんが、ソートなど機能面は問題なく使えました
[JS]複数のコンテンツをドラッグ・スワイプでスライド表示するスクリプト -Minimit Gallery
1ページで構成された複数のコンテンツをデスクトップのドラッグ、スマフォ・タブレットのスワイプ操作でスライドして表示する単体で動作するスクリプトを紹介します。 Minimit Gallery Minimit Gallery -GitHub Minimit Galleryのデモ Minimit Galleryの使い方 Minimit Galleryのデモ Minimit Galleryは一つのHTMLファイル内に配置した複数のコンテンツをスライドで次々に表示するスクリプトで、各コンテンツはハッシュリンクでの表示にも対応しています。 デモはIE7+, Firefox 3.5+, Safari 3+, Opera 9+, Chrome, iPhone, iPad, Android, Windows Phoneなどでご覧ください。 デスクトップでデモを表示してみます。 次コンテンツへスライド中 上部
User Role Editor
Description User Role Editor WordPress plugin allows you to change user roles and capabilities easy. Just turn on check boxes of capabilities you wish to add to the selected role and click “Update” button to save your changes. That’s done. Add new roles and customize its capabilities according to your needs, from scratch of as a copy of other existing role. Unnecessary self-made role can be delete
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
ECサイト制作時に便利なjQueryスニペットやプラグイン - NxWorld
商品のズーム機能やセール情報のカウントダウン表示といったような、ECサイト制作時に便利なjQueryスニペットやプラグインを備忘録兼ねて紹介します。 上手く取り入れればユーザビリティの向上に大きく繋がってくると思いますが、見た目が良いからなどの安易な理由で闇雲に取り入れても逆にユーザビリティを損ねかねないので、本当に必要かしっかり考慮する必要があります。 各プラグインはChromeやFirefoxなどの各種ブラウザとIEは7以上で動作するもので、一部のプラグインはIE6にも対応しています。 使用の際はライセンス確認なども併せてご自身で再度確認してください。 パンくずをスリムに見せられる「jBreadCrumb」 多くの商品を掲載していて細かくカテゴリー分けしたことにより階層が深くなっているサイトや商品名やキーワードなどでページタイトルが非常に長くなってしまっているサイトなど、長くて見辛くな
要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」:phpspot開発日誌
要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」 2013年06月27日- Vague.js 要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」。 次のように通常の要素をSVGフィルタを使ってぼんやり、ぼかすことが出来ます。対応するブラウザは限られますが、ブラウザだけで出来るというのがいいですね パラメータでぼかし強度を選べたりもします。 実装サンプルコードです。 近い将来、画像編集ソフトで今やってるようなことは殆どブラウザ上で、スクリプトで動的に実現出来るようになるんでしょうね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ エフェクトが色々選べるイメー
Magnific Popup: Responsive jQuery Lightbox Plugin
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」:phpspot開発日誌
http://www.landofcoder.com/jquery-plugin/127-lof-jslidernew-plugin.html
5509.me
http://www.desiznworld.com/2013/07/free-jquery-parallax-scrolling-plugins.html
http://gianlucaguarini.github.io/vague.js/