この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
画像の切り替え時のエフェクトが とっても素敵なjQueryのイメージ スライダー・jq-tilesのご紹介で す。クロスブラウザという訳では 無いのでこのままだと用途は限ら れますけど・・ 素敵なエフェクトが用意されたスライダー。CodeCanYouにあるような有料のスクリプトでたまに見かけるタイプです。OSSで公開されてるのはちょっと珍しいかも。 タイル状に画像が切り取られながらフェードアウトします。他にもいろいろ。 目を惹く事は出来そうです。 $('.foo').tilesSlider() 本体とプラグインを読み込んで初期化すれば動作します。 { x : 4, // x軸にタイルを動かす数値。最大20 y : 4, // y軸にタイルを動かす数値。最大20 effect : ‘default’,//エフェクト指定 fade : false, // フェードさせるかどうか auto :
画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo", itemSelector: ".piyo", itemForegroundElementSelector: ".hoge
JavaScript無しで、HTMLとCSSを使って非常にシンプルな実装をしたアコーディオン型スライダーを紹介します。 Make an Accordian Style Slider in CSS3 アコーディオンはCSS3アニメーションで滑らかに開閉し、スライドの数を減らしても増やしても動作します。 見た目だけではなく、非常に機能的なつくりです。 HTML HTMLはリスト要素を使い、非常にシンプルです。 <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">キャプション</a> </div> <a href="#"><img src="image.jpg"/></a> </li> <li> <div class="image_title"> <a href="#">キャプション</a> </div>
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
TOP > plugin > サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」 動的なサイトを手軽に構築できる jQueryを、サイト構築に利用している方も多いと思います。そんな中今回紹介するのが、サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」です。 JavaScript – jQuery Banner Rotator / Slideshow | CodeCanyon インデックスや画面スライドなど、多彩な機能を表現できるプラグインが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■jQuery Slideshow & Conte
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is s
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des
Since usually the best galleries are created in jQuery, we’ve mainly focused on jQuery type sliders, but there are a few simple CSS galleries as well. This collection has been organized into five main categories so you can easy switch to your preferred section. Before we start, we wanted to tell you that it’s up to you to go for a free or premium solution for your jQuery gallery or slider. Your We
Recreating the Nikebetterworld.com Parallax Effect パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル。 単なるスライダーではなく背景とコンテンツが別々に動くスライダーが作れます。 パララックス効果を使うことで奥行きを出せて画面が切り替わるインパクトも強くすることができますね 見本は nikebetterworld.com というnikeのサイトです。インパクト重視なサイトを作りたい場合に使えそうですね 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル
psdのフリースライダー素材まとめ「Huge Collections of Different kinds of Free Slider (PSD Files)」 インターネット上にはさまざまなフリー素材が公開されており、自分とは異なる感性で制作された素材を活用されている方も多いはず。そんな中今回紹介するのは、webサイト制作に利用するさまざまなスライダー素材を集めた「Huge Collections of Different kinds of Free Slider (PSD Files)」です。 Volume Slider Free PSD – Ahmad Hania Blog メイン画像用のスライダーから、パーツデザインとしてのスライダーまで、さまざまなスライダーが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Web Sli
Slider.js: Slideshow wit... / Diapo | a free jQuery sl... / Nivo jQuery Slider他...全20件
Wave Display Effect with jQuery and CSS3 “The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content”. Nivo Slider 16 unique transition effects Loads of settings to tweak Simple clean & v
like Apple’s New Slide effect | jQuery Plugins Apple.comの新スライダーエフェクトを実装するjQueryプラグイン apple.com のページ上部にある製品一覧ウィジェット。かなり良い感じで動きますが、これを再現するjQueryプラグインが出ました。 説明しづらいのでデモを見てみてください。 apple.com の例 ヘッダーの製品部分の動きを見てみてください 今回紹介するプラグインのデモ ほぼ同じ動きですね。 なんというかappleってこういう細部にもこだわっていてその動き方とかにもセンスを感じるっていうところは本当にさすがだなぁと思いますね。 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 divを並べた後、たった１行でオシャレなス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
