CSS3アニメーションエフェクトを簡単に実装できる「iHover – CSS3 hover effects pack」＆「Magic Animations CSS3」｜BLACKFLAG
WindowsXPのサポートも終了し、この先はWebサイト制作において IE8を対象外にできる状況が増えることが想定され CSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。 そんな中、最近あちこちで話題になっていた 複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる 「iHover – CSS3 hover effects pack」と「Magic Animations CSS3」の 各ツールがこの先とても参考にできそうだったのでメモ書きとして紹介してみます。 iHover – CSS3 hover effects pack この「iHover」はマウスオーバー時に 様々なパターンのCSS3アニメーションエフェクトを実装させる チュートリアル集になっています。 デモ画面には、円形アニメーションパターンと 四角系アニメーションパターンが用意さ
jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 「jquery.cookie.js」を使用しページ遷移した際でも viewportの値（レイアウト状態）は引き継がれるようになっています。 ボタンにはそれぞれアクティブ時にクラスがつくようになっていますが PCで閲覧している場合はボタンをクリックしてもレイアウトは変わらないので ボタンの装飾を変えると違和感が出てしまうこともあります。 （切り替えボタン自体をiPhone、iPad、Androidの時のみに表示する、 みたいな構成にするのが理想的かもしれません。） iPhone／iPad／Android以外はボタン非表示サンプルを別枠で表示 ※サンプル画面はスマートフォンでご確認ください。 実際、あまり使う機会はないかもしれませんが レスポンシブレイアウトで構築したWebページでスマートフォンでもPC画面を表示させたい、 とい
レスポンシブ対応のナビゲーションメニューを実装するチュートリアル11選｜BLACKFLAG
レスポンシブ対応を求められるWebサイト制作では ナビゲーションメニューの構成について 何かと気を使わなくてはいけない点が出てきます。 ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが 便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルが そこそこ溜まっていたので11種類ほどまとめて紹介してみます。 Responsive Nav – Responsive Navigation Plugin Responsive Nav – Responsive Navigation Plugin jQueryなどライブラリファイルを使わずに 1.7KBという軽量スクリプトで構成された 「Responsive Nav – Responsive Navigation Plugin」。 PCサイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法｜BLACKFLAG
jQueryでの画像ビューアー用プラグインはたくさん公開されていますが、 単純にサムネイルを並べて、クリックしたらメインビジュアルが切り替わる シンプルなスライドショー的ビューアーを作ってみたので紹介してみます。 まずは動作のサンプルから。 サムネイル画像をクリックしてください。 jQuery SIMPLE IMAGE VIEWER【SAMPLE】 「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」サンプルを別枠で表示 下部に並べてあるサムネイルをクリックすると メインビジュアル部分がクロスフェードして切り替わります。 （自動でスライドする動作などは今回は付けていません。） サムネイルは透過具合でアクティブ状態か、 そうでないかを変化させています。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <div> <img src="img/p
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法｜BLACKFLAG
以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、 一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、 同様のパターンで、フェードインさせる順番をランダムにするパターンを できるだけシンプルな構成で作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像がランダムによって順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
