作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
最近個人的に作った写真共有サイトを公開しました。 photoll - スポット写真共有サイト この写真共有サイトで実際に使っているおすすめGemを晒してみます。 あと、おまけで使ってないけど便利そうなGemとかも紹介。 一人で1からWebサービスを作る過程を書いた拙作のブログエントリもよかったら見てください。 【1人でWebサービス開発】新米Railsエンジニアが無謀にも写真共有サイトを作りました だいぶ長いですが、Gemfileをそのまんま載せました。簡易説明付き。 主要なGemをあとで説明します。 source 'https://rubygems.org' gem 'rails' gem 'mysql2' gem 'haml-rails' # HTMLを簡潔に書ける gem 'sass-rails' # CSSを効率的に書ける gem 'bootstrap-sass' # Twitte
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
Creating a Volume Controller with jQuery UI Slider jQueryでクールなボリュームコントロールを作成するチュートリアル。 次のようなAppleっぽいデザインのボリュームコントロールを作るチュートリアルです。 デモページ ボリュームコントロールじゃなくてもこの作り方を覚えておけば、プログレスバーなり、１〜１００のパラメータ調整なり応用が効きそうです。 画像を使ったデザイン性の高い物を作っているので思ったデザインのコントロールは作れるようになりそうですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル Googleマップ関連のjQueryプラグインとチュートリアル集
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
WordPress のギャラリー機能使っていますか？ 使いにくい WordPress のギャラリーをちょっと使えるようにするカスタマイズです。 ものすごく長くなってしまいました ... できるだけ簡単にまとめてみたので興味があるひとはぜひ読んでみてくださいね！ Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね！でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。 私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません（おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです）。 ま
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
