[B! スライド] ricopinxのブックマーク

ricopinx id:ricopinx

スライドに関するricopinxのブックマーク (6)

[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。コンテンツ部分をクリックしても閉じることができるようにするコードを追記しました。スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコードスライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
ricopinx 2017/06/02
スライド

CSS

jQuery
リンク
http://web-design-cafe.com/archives/481
ricopinx 2016/12/28
プラグイン

jQuery

スライド

slider
リンク
coolwebwindow.com
ricopinx 2016/12/28
jQuery

スライド

bxslider
リンク
画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装するjQueryプラグイン・slideshowify.js - かちびと.net
地味に良さそうだったので備忘録。画面いっぱいに画像を広げてフェードエフェクトでスライドショーを実装できるjQuery プラグイン・slideshowify.jsです。この手のプラグインは沢山あるので選択肢の一つとして・・なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもしれません。キャプチャ見ても全然ピンと来ないと思いますのでSampleご覧下さい。 Sample 基本的には直接貼られた画像をスライド化します。※画像はmark sebastian氏より(CC-BY) 指定されたセレクタ外のコンテンツはpositionプロパティによって画像上に配置されている形となります。スライドしている画像はdisplay:none;を使用していますので各々の画像にリンクは貼れま
ricopinx 2016/12/28
プラグイン

スライド

画像

jQuery
リンク
jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験｜BLACKFLAG
先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたがその動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。まずは動作サンプルから。このブログ自体がリキッドレイアウトではないので実際の動作は下記の別枠表示から。リキッド対応カルーセルサンプルを別枠で表示※表示後、ブラウザの枠を伸び縮みさせてみてください。並べられたコンテンツ要素（画像）は一定時間（サンプルでは5秒）ごとにスライドし左右の「≪」「≫」のボタンでも一つずつスライドさせることが可能です。ブラウザのサイズによって画面上に表示されるコンテンツ要素の個数が変化します。この動作の全体構成について、 HTML構成は前回の記事と変わりありません。 ◆HTML <div id="carouse
ricopinx 2015/11/05
カルーセルパネル

スライド

レスポンシブ
リンク
カスタマイズも自由にできるjQuery「bxSlider」の使い方 – bl6.jp
個人的にかなりよさげなjQueryスライダーを使ってみました。その名もbxSlider。もしかして結構有名なのかもしれませんが… 色々とオプションもありカスタマイズもしやすかったので今後の為にもメモしときます。 [ads_center] bxSliderの使い方基本的にはよくあるjQueryプラグインと同じです。まずはこちらからファイルをダウンロードします。 bxSlider ダウンロードしたZIPファイルを解凍するとjquery.bxSlider.min.jsというファイルが入っているのでこれをhead内に読み込みます。ちなみにjquery.easing.1.3.jsというファイルもありますがこちらはスライドのモーションなどを変えたい時に使用するのでデフォルトでもいい場合は特に必要ありません。 <script type="text/javascript" src="http://aja
ricopinx 2013/12/09
コピペするだけでやっと実装できたチュートリアル

jQuery

スライド

JavaScript
リンク
1