webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」 デザインだけでなく、独自の動きを取り入れることでwebサイトはより魅力的なものに変化します。今回はそんな時に参考にしたい、webサイトの動きを魅力的に演出するフリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」を紹介したいと思います。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 組み込むだけで、webサイトを魅力的に演出してくれるプラグインが揃ってい
チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」:phpspot開発日誌
iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少し調整してクールにしたものや、リデザインした物など、クールにカスタマイズすることが出来ます。 シンプルなデザインにしてみた物。 ボタンっぽくしてみたもの よりカスタマイズしてみたもの 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル
WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインまとめ「15 jQuery Plugins To Create Awesome Photo Galleries」
WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインまとめ「15 jQuery Plugins To Create Awesome Photo Galleries」 サイト内で画像や動画を公開する方も多く、より高度な動きのあるサイト制作を求められるようになっています。そんな中今回紹介するのが、WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインをまとめた「15 jQuery Plugins To Create Awesome Photo Galleries」です。 表示のアニメーションをはじめ、さまざまな機能が魅力的なjQueryプラグインが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■DIGICRAFTS Thumbnail Gallery 写真のサムネイル表示はもちろん、切り替わりの
WEBサイトで便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」
アラートを出したり、案内をだしたり非常に多様な使い方で便利に使えるモーダル。それだけに多くのWEBサイトで利用されています。今日紹介するエントリーは、便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」です。 SimpleModal / Eric Martin / ericmmartin.com シンプルなものから、ギャラリー的なら利用ができるものまで幅広く収集されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Flare Responsive Mobile-Optimized Lightbox Plugin YoutubeやVimeoなども表示可能なライトボックスプラグイン leanModal – a JQuery modal plugin that works with your
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」:phpspot開発日誌
slideControl.js jQuery Plugin CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」。 次のような綺麗なスライダーが実装出来ます。CSSでデザインされているので見た目を変更するのも容易で、スライダー自体のカスタマイズも可能。 CSS3非対応ブラウザでもスタイルはちゃんとあたってませんがちゃんと動くみたいです。 マークアップ的にも、<input type="text" value="4.0" class="slideControl" /> のような input type="text" のものを$('.slideControl').slideControl();のように初期化すればスライダー化して便利 関連エントリ 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新しい円形のスライダーが実装できる「Tin
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」:phpspot開発日誌
Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr
WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」
TOP > WebDesign > WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」 日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。 FitText – A plugin for inflating web type フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気にな
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
〜秒前の実装を簡単にするjQueryプラグイン「Livestamp.js」:phpspot開発日誌
Livestamp.js - a simple, unobtrusive jQuery timeago plugin 〜秒前の実装を簡単にするjQueryプラグイン「Livestamp.js」 最近のリアルタイムなWEBでは、〜秒前、〜時間前といった表示がよくされていて、画面の遷移がなくてもこれが切り替わったりしますが、同じような実装を実現するためのプラグインです。 自分で実装しちゃってもよさそうですが、仕組みとして面白かったのでご紹介。 UNIXのタイムスタンプをタグに入れておいて、後は初期化という感じの使い方です。 待っていると表示が変わることを確認出来ると思います リロードがないと、実は５分前なのに１分前と表示するよりも、こうやってリアルタイムに更新してあげるのはやはり良いUIといえますね 関連エントリ 時間の入力を楽にすることが出来るjQueryプラグイン Youtube動画を自由
CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２:phpspot開発日誌
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryとCSS3でダイナミックに動くコンテンツスライダー:phpspot開発日誌
Fullscreen Slit Slider with jQuery and CSS3 | Codrops jQueryとCSS3でダイナミックに動くコンテンツスライダー。 アニメーションがカッコよくてネタはなくとも実装したくなるかもしれないスライダーです。 デモページ どうやって実装しているんだろう（＾＾；）とか思いつつ、チュートリアル記事もあるのでそこで学習できます。 プログラム一式ダウンロードも出来るので素材としても。 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 AppleっぽいデザインのjQueryスライダーサンプル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel
伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。 jQuery Accordion with Carousel – Accarousel [ad#ad-2] Accarouselのデモ Accarouselの使い方 Accarouselのデモ デモはFirefox, Chrome, Safari, Opera, IE7+でご覧ください。 デモページ：4枚目をアコーディオン カルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。 起点と終点があるのがちょっと残念。 [ad#ad-2] Accarouselの使い方 実装は簡単で、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
視差効果（パララックス）を簡単に導入できるJavaScript「skrollr」
twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
