[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめBubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近githubで人気になっているtobiasahlin/SpinKitというレポジトリ（Starが2,500個も！）では、 CSS3アニメーションを使った心地よいアニメーションのサンプルが公開されています。 今回はそのレポジトリの内容を拝借して、各アニメーションの実装内容を学んで、自分も書けるようになろうというためのブログです。 SpinKitで公開されているCSSアニメーション 公開されているものは執筆時には全部で８個あり、http://tobiasahlin.com/spinkit/でデモが確認出来ます。 綺麗なものがいっぱいあって、個人的には好きです。 以下ではそれぞれのアニメーション内容を拝借して、実装内容を学びたいと思います。 <style> .spinner1 { width: 30px; height: 30px; backgroun
![[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53d67670ab9a4d96908df62696837d176e920257/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F297.jpg)
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka
画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Markaの使い方 Markaのデモ 上記gifアニメーションの実際の動きは、下記ページで楽しめます。 Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。 各アイコンのスタイルシートファイル では、Markaの使い方を。 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="sty
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery
