画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
Sliding Panel Photo Wall Gallery with jQuery | Codrops フルスクリーンでスッキリ綺麗な写真ギャラリーを作れるjQueryを使ったサンプルプログラム。 アニメーションしつつ、操作性もいい感じのフォトギャラリーが実装出来るサンプルプログラムが公開されています。 画像をクリックすれば、若干の読み込み時間を待ち、画像が下からスライドされます。待ち時間は画像サイズに依存します。 ナビゲーションの←、→で画像送りが可能。画像自体をクリックすることで一覧に戻ることが出来ます。 余計なナビゲーションはなくして、写真を前面にしているシンプルさが使いやすさと、見やすさに繋がっていますね。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 3Dでクールに回転するFlashを使った画像ギャラリー「Piece
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
開閉時に弾むようなバウンスのモーションをつけたアコーディオンをjQueryで実装するチュートリアルをWeb Designers Deskから紹介します。 Create Bounce out Vertical menu with jQuery デモページ 画像は一切使用していないので、カスタマイズも簡単にできると思います。 実装にはjquery.jsとアニメーションで使用しているプラグイン「jQuery Easing Plugin」が必要です。 HTMLはシンプルで、リスト要素を使用しています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="vnav"> <ul> <li><h1>Home</h1><p>Home page</p></li> <li><h1>About Us</h1><p>Know A
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」 2010年05月12日- JQuery Narrative Select Plugin セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」が公開されています。 例えば、文章の途中にselect ボックスで選択肢を入れるようなUIがあったとすると、次のようになります。 普通にやれば、上のようになりますが、今回紹介するプラグインを使えば、次のようにアンカーっぽくなります。 クリックすると、select のように選択肢が次のようにカッコよく表示され、変更すると、当然、内容も変更されます。 Correct → Incorrect になりました。 select ボックスによるデザインも分かりやすくていいという意見もあると思いま
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></script> <script type='text/javascript' src='js/jquery.circulate.js'></script> Usage / Options / Defaults $("#anything).circulate({ speed: 400, // Speed of each qu
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxView lightbox系の画像オーバーレイスクリプト。ナビゲーションとキャプションがフェードアウトしたりとディテールが気持ちいいです Fade In and Out Tooltips for Prototype and Scriptaculous フェードイン&アウトで表示されるツールチップ Sweet Titles Transparent and Fading Tooltips ページロード時に、画像をフェードインして表示させるスクリプト Captify Displays Pretty Image Captions
Mastering the Code Things We Wish We Knew Much Earlier In Our Career - Articles, Tips, Inspirations, Sources and Resources for web designers and developers Watch video Hello, coders! Computer Science became one of the top professions and hobbies in the past two decades. Many people, especially website developers, are drawn to learn at least one programming language that will back up their written
GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」 2010年04月28日- jQuery google api and other google hosted javascript libraries. - ScriptSrc.net GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」。 jQueryを使うサイトでは、通常、自分のサーバにjQueryをアップロードして、<script>タグ書いて、srcでその位置を指定して、なんていう面倒なステップを踏むわけですが、このサイトにアクセスしてボタンを１回おせば、利用用のタグがクリップボードにコピーされます。 コピー例：<script type="text/javascript" src="htt
シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」 2010年04月15日- simpleSli.de: A Super-Simple jQuery Slideshow Plugin シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」。 画像は勿論、テキストベースのコンテンツなどもスライドとして枠内に複数のコンテンツを収納してしまえる便利なプラグインです。 カーソルが合うと、左右のページナビゲーションが現れ、クリックでページ移動が可能。 スライドの下部にプログレスバーが表示されており、大体どの辺かというのも分かるようになってます。 実装時のHTMLの次のように綺麗に定義できます。simpleSlide-slide の中に好きなHTMLで書けばOK <div class="simpleSlide-
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Framework GPLライセンスで配布されるcssドロップダウンメニューのフレームワー
Demoを見る ファイルをダウンロード jQueryのプレゼン用スライドプラグインをつくってみました。プラグインといっても何の設定も出来ませんが…。Demoを見てもらえば大体のことはわかると思います。一応以下にも説明をしておきますね。 必要なファイルを読み込む <link rel="stylesheet" type="text/css" media="all" href="./css/default.css" /> <link rel="stylesheet" type="text/css" media="all" href="./css/base.css" /> <script type="text/Javascript" src="./js/lib/jquery.min.js"></script> <script type="text/Javascript" src="./js/muk
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
