レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
jQueryで指定した要素にclass,idを追加する
jQueryで指定した要素にclass,idを追加する 要素にclassやidを割り当てるにはhtmlで直接指定するのが確実ですが、大量の要素やクリックイベント後に処理したい場合は、プラグラムで割り当てる必要があります。 この記事ではjQueryを使用して、さまざまな状況下で各要素にclassやidを追加してみます。 投稿日2010年12月24日 更新日2011年04月02日 id、classを割り当てるためのメソッド 次のような構造のhtmlがあるとします。 html <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> たとえば、ulに「style-ul」というidを、liには「style-li」というclassを割り当てるとします。 「attr」メソッドを使用すれば、属性の追加
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
[JS]テキストや背景のカラーをアニメーションで変更するスクリプト -Color Animations
テキストや背景のカラーをアニメーションで少しずつ変更するスクリプトをDesizn Techから紹介します。 Playing with jQuery Color Plugin and Color Animation demo デモでは、テキストのカラーを変更するもの、背景を変更するもの、それぞれ異なるカラーに変更するものなどがあります。 テキストのカラーを変更する場合は、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5"> $(".first a").hover(function() { $(this).animate({color: "#00eeff" }, 400); },function() { $(this).animate({color: "#FFFFFF" }, 500); }); </textar
[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang!
下部からアニメーションでエレメントを表示 annyang!の使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 jQueryなどの他のスクリプトは必要ありません。 <script type="text/javascript" src="annyang.min.js"></script> Step 2: JavaScript スクリプトの基本書式は、トリガーとなる言葉をコマンドとして指定し、実行するスクリプトを記述します。 下記は、最後のデモのエレメントをアニメーションで表示するスクリプトです。 <script type="text/javascript"> if (annyang) { // Let's define our first command. First the text we expect, and then the function it s
JavaScript製の画像スライダー・ギャラリーいろいろ:phpspot開発日誌
Top 10 Javascript slideshows, carousels and sliders JavaScript製の画像スライダー・ギャラリーいろいろ。 JavaScriptで画像を使ってアニメーションさせたり、リスト管理したりするライブラリが多数紹介されています。 SpaceGallery Noobslide Accessible News Slider SmoothGallery jQuery Multimedia Portfolio JCarousel Glider Carousel Carousel slideshow Carousel.us 過去の画像ギャラリー関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャ
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
フォームの入力項目に入力例を表示する | ユーザビリティ・EFOマニア!!
前回のエントリーで「お客様に優しいユーザビリティフォーム設計」についての話をしましたが、その実践例の一つをご紹介します。 これはformnotifierというJQueryで出来ている非常に軽いライブラリなんですが、テキスト入力ボックスにヒント表示することができます。 動作デモ 使い方は <script> $(document).ready(function(){ $(‘:input’).formNotifier(); }); </script> というコードを入力フォームページに追加するだけ。 これで「inputタグ」の「title属性」がヒント表示されます。 デフォルトだと表示がいまいちなので見た目を変える場合は、CSSで「formnotifier」クラスを変更してあげれば表示変更は可能です。 オススメはこんな感じ。 <style type=text/css> .form
jQuery UI の toggle で、ブラインドを開閉するようなアニメーション
実装例（サンプル）の動作について 「表示 / 非表示」ボタンをクリックすると、ブラインドを開閉するようなアニメーション動作で、カーキ色のボックスの表示/非表示を切り替える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script> <link rel="stylesheet" href="themes/base/j
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
[JS]リストで実装したアイテムにページ機能をつけるスクリプト -Ono List Pager
リスト要素で実装したアイテムをアニメーションでスライドするさまざまなインターフェイスのページ機能付きパネルにするjQueryのプラグインを紹介します。 最もベーシックなデモです。 パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。 HTML 各パネルはシンプルなリスト要素で実装されています。 <ul id="list1" class="onoPager_noJs"> <li>This basic pager offers paging per item. It also offers a 'previous' and next 'next' button. it also offers direct links to each page item.</li> <li>...</li> <li>...</li> </ul> JavaScript jQuery(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色やサイズが自由に変更できる星形レーティング機能実装「starwarsjs」:phpspot開発日誌
設置サンプル
http://retinajs.com/
fredibach.ch