jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
jQueryプラグインなスライダー | かえラボBlog
jQueryプラグインにチャレンジしてみました。 よくあるスライダーです。 (10/26 追記) iPhone&iPad対応しました。 細かいことはCSSで調整ください (9/7 追記) ドラッグに対応しました。 slider.js Demo HTML側の記述は下記を参考ください。 <div class="slideFrame"> <ul class="slideGuide" id="slide-00"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> <div class="slideCtrl left"><</div> <div class="slideCtrl right">></div> </div> リスト要素の部分はdiv要素など他のブロック要素でも構いません。 ガイド用クラス(.slide
iMovieとKeynoteでの自作結婚式エンドロールの作り方〜前編 - 結婚式の準備ブログ
普通にiMovieだけで作るのが簡単で良いと思いますが、いろいろと試した結果iMovieでスライドショーを作ると単調なスライドショーになってしまうので、結局、KeynoteとiMovieを使ってエンドロールを作ることにしました。 Keynoteを使った方が写真の表現に変化を持たせることができるため演出的に面白くなります。YouTubeでエンドロールを見て参考したいと思ったものは大抵iMovieだけでなく、Keynoteを使ったりしていました。 作り方をまとめたので参考にしてみてください。作り方のイメージが湧けば他のソフトでも応用できると思います。 １．必要なソフトをそろえる ・iMovie ・Keynote ２．YouTubeで良さそうなエンドロールを見つける まず、最初にしたことが「YouTubeでよさそうなエンドロールを見つける」ことです。何もない状態から始めるのは結構たいへんなので、
jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法｜BLACKFLAG
先日ここでレスポンシブ対応のスライドショーの試作品として 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題して jQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを 紹介しましたが、操作面に関してフリック操作には対応していなかったので、 メイン部分にフリック動作を追加してみたパターンを試しに作ってみたので紹介してみます。 レスポンシブ動作部分はブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法 サンプルでは6枚の画像を自動でスライド切り替えしています。 メインビジュアル部分をフリックすることで左右に移動させることができ 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り
jQueryでローテーションバナーを実装
jQueryでローテーションバナーを実装 jQuery2011年12月14日 少し前はローテーションバナーはFlashで作成する場合が多かったと思いますが、最近ではJavascriptで制作する案件も増えてきています。 今回は、jQueryを使用してローテーションバナーを実装してみましたので、どうぞご参考にしてみてください。 jQueryはこちらからダウンロード jQuery Easing 実際のサンプル 仕様 最大個数に規定はなし 自動スクロールはなし リピート機能はなし 左右に移動ボタンを配置 一番右に移動した際、右ボタンをグレーアウト 一番左に移動した際、左ボタンをグレーアウト バナーが3個以下の場合、左右の移動ボタンは非表示 HTML <div class="rotate-banner"> <p id="btn-left"><img src="images/btn-left.gif
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ノンプログラマーのためのjQuery入門
http://miracle-ysdesign.com/blog/javascript/409.html