This page has been moved.This page has been moved.
[CSS]アニメーションを伴った画像ギャラリーをCSS3で実装するチュートリアル
jQueryなどのJavaScriptを使用せずに、フェードのアニメーションで画像が切り替わるギャラリーを実装するCSS3のチュートリアルを紹介します。 各画像への#リンクも有効です。 Pure CSS3 Slider (Fade Transition) [ad#ad-2] Pure CSS3 Sliderのデモ Pure CSS3 Sliderの実装 Pure CSS3 Sliderのデモ 画像ギャラリーのナビゲーションは下部の丸いアイコンで、クリックするとフェードのアニメーションで画像が切り替わります。 デモの対応ブラウザはFirefox, Chrome, Safari, IE9+です。 ※IE9ではフェードのアニメーションはなしです。 デモページ ギャラリーの各画像の#リンクにも対応しています。 デモページ：5枚目を表示 Pure CSS3 Sliderの実装 HTML HTMLは画
Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. View Demo Download Files The easiest way to handle this is just to use CSS fixed positioning. Our
【jQuery】記事を開閉したりする、switchHat.js
小粋空間の中の人に会った時にMT5でこんな事したいんすよねーって話をしてて、その後MTQに書いたら、速攻でプラグインにしてくれました！ マジ感謝です。ありがとうございます。 ウェブページとかで、ページを生成したくない場合に使えるプラグインです。 PagePublishControllerプラグイン: 小粋空間 さて、今回は折りたたみするJSを結構前から所々で使ってて、毎回ソレを微妙に改変したりしながら使ってたのですがもうちょっと汎用性を高めた感じにしたくて、javascript が全く分からないのに色々やってソレっぽくしました。 これは、RedLine MagazineさんのjQueryでリストを開閉させたいがベースです。2007年11月08日 00:19 にちゃっかりしっかりコメント残してますね。 どんな感じの時に使えるかと言いますと、ウチのブログならサイドバーに有るアーカイブ部分です。
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
【Fluid Grid Layout】可変グリッドレイアウト | スタッフブログ | アデジナーレ
ウィンドウサイズに合わせてコンテンツが再配置され可変するレイアウトが、流行ってきているようですね。今時期は「Fluid Grid Layout」と呼ぶようです。 当社の非公開実績ページを制作しており、こちらで使ってみました。 非公開の実績はご紹介できないので、サンプルを下記にアップしました。 （見ないと感じが掴めないと思うので…） http://labs.adesignare.com/ajax_js/fluid_grid/ 最初から全部作るのは大変なので、xluneさんサイトを参考にさせていただきました。 http://blog.xlune.com/2009/09/jqueryvgrid.html 以下、覚え書きです。 下記をダウンロードします。 jquery.vgrid.0.1.6.min.js (compressed: 20100713) jquery.vgrid.0.1.6.js (
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択でき
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード <scrip
多彩なエフェクトが魅力なイメージギャラリー用jQueryプラグイン・Skitter - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなか使いやすそうで、汎用性 もあるかなと感じたので備忘録。 エフェクトが多数あり、機能も中々 良く、クロスブラウザ対応している イメージギャラリー用のjQueryの プラグインです。 イメージギャラリーは数多に存在するのでまぁ選択肢の一つです。まぁ後発の方が機能が良くなりやすいっていう見方も出来なくは無いですね。 22のFlashライクなエフェクトから選べます。どれもクールなエフェクトですよ。 エフェクトにはそれぞれデモが用意されているので触ってみてください。 フルスクリーンにも出来ます。 サムネorボタンのナビゲーション ナビゲーションを選択できます。ボタンかサムネイル。 ナビゲーションの表示の有無 そのナビゲーションを常時表示させるか、マウスオーバー時に表示
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
jQuery Menus with Stunning Animations - noupe
jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool. Apart from being a lightweight cross-browser JavaScript library that simplifies HTML and Ajax interactions for rapid web development, it also gives sites that sleek look while also representing important data in a very attractive way. [fblike] Yo
第6回 裁ち落としてインパクトのあるデザインを作る | gihyo.jp
ユーザビリティを落とさずインパクトを出すには 雑誌などで、ページサイズいっぱいに画像を配置したデザインをよく見ますよね。 写真を全面にレイアウトすることで、インパクトを出すことができます。 今回は、同様の効果をウェブで実現する方法を解説します。 ここ数年、ブラウザサイズいっぱい（width:100%）に背景画像などを敷いたサイトを多く見かけるようになりました。ただ、パターン画像ならリピートすればいいですが、1枚絵だとそうはいきません。1枚絵を背景にする場合、以下の3つくらいの方法が考えられます。 backgroundとの輪郭をはっきりさせた形で、画像のサイズでぶつ切りにする グラデーションさせるなどして、backgroundの色となじませる ウィンドウサイズを固定値にする 1と2は、制約のある中でのデザインになるため、自由度が下がります。 3は、デザインする枠のサイズを決められるため、自由
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
Vertical Scroll Menu with jQuery Tutorial
Introduction Just last week, I came accross to this website Narrow Design. His scroll menu caught a lot of my attentions, I played with it for a while. Yes, unfortunately, it's built in flash. And, Yes, we are going to implement it with jquery - javascript based scroll menu that will do the same thing. Of course, it will not be 100% the same, because some of the fancy features just not that practi
Home - Hot!Ajax Magazine
Animated CSS3 photo stack is use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements. Requirements & Add-Ons Requires jQue
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
