CSS3のtransform3dとjQueryを使って、ひっくり返すアニメーション ｜ スターフィールド株式会社
対応する必要のあるブラウザがどんどん新しい物に移り変わっていく今、 CSS3ならではの表現も利用しやすくなってきています。 今回はCSS3を使った表現の中でも、 ひっくり返すことでコンテンツが切り替わるようなアニメーションの方法について、 考えてみました。 ↓作ってみたもの DEMO 方法 1. 要素を配置する 回転の対象となるコンテンツを重ねて同じ位置に配置し、 それらを少なくとも２つの要素で囲みます。 <main> <div class="wrapper"> <section id="page1" class="active"> <div> <h2>PAGE1</h2> <figure><img src="images/about.jpg"></figure> <p>彼らはこの向うの事実で精神が楽しむられれると時分を考えるせがったり、影響に投げから、一般にしがいるとするて役に立つれると
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」 | スターフィールド株式会社
var initPhotoSwipeFromDOM = function(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; //
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能（スマートフォン） ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSlider
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
