Kissui.scrollanim - CSS3/JavaScriptによるスクロールアニメーション MOONGIFT
SPA（シングルページアプリケーション）で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。 今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現できるでしょう。 Kissui.scrollanimの使い方 Kissui.scrollanimはHTMLタグで指定できます。 <p data-kui-anim="fadeIn">Show this with fade-in</p> 実際のスクロールをしているところです。 Kissui.scrollanimではコンテンツが徐々に出現したり、バウンドする、大きさを変えるといったようなアニメーションがHTMLだけで簡単に指定できます。後はスクロールをJavaScriptが検知し
Keen-UI - マテリアルデザインのUIコンポーネント集
デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。 Keen-UIの使い方 スクリーンショットを多めに紹介します。まずはアラート。 入力補完。 アイコン付きの入力補完。 ボタン。 チェックボックス。 折りたたみ。 確認ダイアログ。 フローティングのボタン。 アイコンボタン。 アイコン。 メニュー。 モーダル。 ポップオーバー。 ローディング。 ラジオボタン。 ラジオグループ。 レーティング。 Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一
css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション MOONGIFT
アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。 今回紹介するcss-keyframer.jsはそんなキーフレームアニメーションをCSSのように指定できるソフトウェアです。 css-keyframer.jsの使い方 デモです。JavaScriptの中にCSS風にアニメーションを指定しています。複数のエフェクトが指定できます。 実際のアニメーションです。形を変えつつ、回転しつつ、さらに色が変わります。 css-keyframer.jsではCSS3で指定できるスタイル設定を、時間を変化させながら適用できます。例えば四角がいきなり角丸になるのではなく、徐々に変化していくことでユーザの目を引く
Clairvoyance - CSSカバレッジツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。 Clairvoyanceの使い方 Clairvoyanceを実行します。 $ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。 レポートです。使われているクラスは緑色に
cssファイルやjsファイルブラウザに表示した時に整形して表示する Chrome拡張機能 PrettyPrint
「PrettyPrint」は、CSSファイル や jsファイル をブラウザに表示した時に自動整形して表示してくれる Chrome拡張機能 です。 「Chrome ウェブストア - PrettyPrint」 以下、実際に使ってみた様子です。 ChromeブラウザにCSSファイル、jsファイルを表示した時に自動整形してくれます「PrettyPrint」を Chromeブラウザ にインストール(再起動不要)し CSSファイル や jsファイル を表示すると上記のように見易く自動整形して表示してくれます。 特に圧縮されたファイルを Chromeブラウザ で確認する時には便利だと感じました。 圧縮された js ファイル圧縮された jsファイル を開くと以下のように整形して表示します。 「jQuery」 圧縮された CSS ファイル圧縮された CSSファイル を開くと以下のように整形して表示します。
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower
IDEA * IDEA
IDEA * IDEA