[CSS] Pure CSS Parallax Websites – CSSだけで実現するパララックススクロール
CSSだけで実装できるパララックススクロール。2014年に書かれて15年に追記されたようなのでそれほど新しい記事ではないけれど、こんな手法もあるんやなー思ったので紹介。transform: translateZを使ってZ軸方向にオブジェクトを移動させてパララックススクロールさせているようです。これなら対応ブラウザの条件さえクリアすれば、わりとサクっと導入できそうです。
Tag Archives: CSS3
[CSS] Top 50 CSS Libraries, Frameworks and Tools from 2016 – CSSライブラリで振り返る2016年
CSSライブラリやフレームワークが50個紹介されてます。そんなにあるの！？って思いましたが、わりと細かいネタCSSなんかもあって、ゆるーい感じで見れます。例えばStar Wars Intro.css、もうこれはアレです、スター・ウォーズのイントロを再現しただけのCSSです。他にはマイクラっぽい3Dオブジェクトを作るもの、CSSだけで作るローディングアニメーションなどもあります。Brand ColorsなんかはCSSライブラリというよりはカラーピッカーですね。結構量も多いので見応えあります。
[CSS] cssreference.io – CSSプロパティ名から効果を学べるリファレンスサイト
CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。
[Web Design] Use Your Interface – アニメーションで見るインターフェース作例
動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。
[CSS] A huge collection of CSS backdrops – CSSだけで描画するクールなグラデーション背景
CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。
[CSS] You Might Not Need Javascript – ソレもしかしたらJSじゃなくも良くね？という作例集
Javascript使わなくてもCSSだけでできるYO！という作例集。例えばイメージスライダーやModal、ビュースイッチャー（タブ切り替え）、ファイルアップロード、フォームバリデーション、アコーディオン、Lightboxなどを、JSを使わずにCSSだけで実現する方法が紹介されています。CSSはSCSS形式で記述されているので、通常のCSSの方が使いやすいという人はSassMeisterあたりを使えばエンコードできます。JS使わなくてもわりと色々できちゃうんですよね。
[CSS] text-spinners – テキストを使ったローディングスピナー
テキストを使ったローディングアニメーション。導入はリンク行を1行追記するだけ。配置はClass付けたspanタグを置けばイイみたいです。アニメーションさせるのに使っているのがテキストデータなので、ロードにはほとんど時間がかからないものと思われます。興味深いのが絵文字を使ったアニメーション。月の満ち欠けや地球の自転、走る人など、絵ヅラ的に連続している絵文字をアニメーションのコマに使っている点です。また「How it works」の項を見ると、どういう仕組みで動作しているのか分かります（これがまた超シンプル）。特にJSを使う事もなく、CSSだけで簡単に導入できる点も使い勝手が良さそうです。