[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
スライド時にキャプション等のテキストを遅延表示させる事が出来るイメージスライダー・ayaSlider - かちびと.net
キャプション等のテキストがスライド時に遅延して表示させる、という演出が可能なイメージスライダーのご紹介。上手く説明できないのでデモをご覧頂ければと思います。 素敵なエフェクトで演出できるスライダーです。ビジュアルが重要なコンテンツと相性良さそうですね。 スライド時に画像が表示され、その後にキャプションやリストなどのテキストコンテンツがアニメーションエフェクト付きで表示されます。 IE Tabで確認しただけですけど、動作はしていましたので、よくあるCSS3で、といった類のものでは無いっぽいです。まだよくコード見て無いですけど・・ コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="ayaSl
シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque
画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo", itemSelector: ".piyo", itemForegroundElementSelector: ".hoge
[JS]グリッドに沿ってさまざまな要素を互い違いにスライドさせるスクリプト -Grid Slide
Grid Slide Plugin [ad#ad-2] Grid Slideのデモ Grid Slideの使い方 Grid Slideのデモ デモは2つあります。 まずは、div要素をスライドさせるシンプルなデモから。 デモページ：Demo 2 Grid Slideの使い方 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 Demo 2のバウンドのエフェクトを使用する場合は「jQuery Easing Plugin」も記述します。 <link href="gridslide.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascri
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、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
jQuery製ばらばらに切り替わるApple風スライダー
jQuery製ばらばらに切り替わるApple風スライダー Appleサイトのスライダー（カルーセル？）は画像がばらばらに切り替わるのでとてもクールですね。 ということで、動きはあまり再現されていないのですが、それっぽいのを作ってみました。 投稿日2011年12月01日 更新日2011年12月01日 使い方 こんな感じでマークアップします。 リストの数だけボタンを作成してください。 「id=arrow」という画像はボタンを追尾する画像です。 html <div id="slider"> <div id="thum"> <ul> <li><img src="img/01.png" width="128" height="128" /></li> <li><img src="img/02.png" width="128" height="128" /></li> <li><img src="im
[JS]アニメーションのタイミングが絶妙なナビゲーションのスクリプト
マウスオーバーすると、下からパネルとアイコンをアニメーションでスライド表示するナビゲーションを実装するチュートリアルをCodropsから紹介します。 A Fresh Bottom Slide Out Menu with jQuery デモページ ナビゲーションのインタラクションにはjQueryが使用されており、シャドウや角丸のエフェクトにはCSS3が使用されています。 パネルやアイコンの表示位置、アニメーションのタイミングは変更が可能です。 パネルとアイコンのタイミングを異なる値にするのがポイントです。 チュートリアルではHTML、CSS、JavaScriptのコードが解説付きで紹介されており、全ソースをダウンロードすることもできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
