スゴイのが登場！アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。 アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac
[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。
![[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfd16f6b3cf9495ffab4b2256010a83797a2cf0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110801-02.png)
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
![[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox](https://cdn-ak-scissors.b.st-hatena.com/image/square/1dd910b325a6cc2c3c080f26dc7ac70824dc0015/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110701.png)
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」 - NxWorld
「Radiobox.css」と「Checkbox.css」は、それぞれラジオボタンとチェックボックスの選択時にアニメーションを加えることができるスタイルシートです。 全体的にこれどんな場面で使うのっていう感じのエフェクトが多いので案件などではあまり使われなそうですが、ちょっと遊び心いれたいとか変わったアニメーションを付けたい時には便利かもしれません。 Radiobox.css 「Radiobox.css」はラジオボタン選択時にアニメーションを付けることができるCSSで、小刻みに動くTremolo、跳ねるBoing、回転するWheelなど全12種類のアニメーションがあります。 アニメーションの適用は簡単で、該当のCSS（radiobox.min.css）を読み込み、あとは<input type="radio" />に特定のクラスを記述するだけです。 例えば、Boingエフェクトはクラスが.r
[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
![[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ
HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ（正常化）するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。 イラスト: Girls Design Materials 定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです！ 下2つは通常のリセットとは異なるアプローチのスタイルシートです。 ress Normalize.css sanitize.css Marx Reset CSS minireset.css css-wipe Cleanslate Unreset CSS ress -GitHub normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるH
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」 - NxWorld
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！ 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
![[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a99bb8a10dc67f32f5120a14ca9f4d9546de9b36/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016042601.png)
[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
![[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
PHPの便利な日時操作ライブラリCarbonで曜日を日本語で表示する | A Small, Good Thing – blog
みんな Carbon 使ってるー？私は毎日使ってます。 ところで、曜日を表示しようと思って、 echo Carbon::now()->format('Y年m月d日(D)'); とかやると、2016年03月09日(Wed)ってなって、いやん、となったことありませんか？私はあります。 そんな時は、setlocale()とformatLocalized()メソッドを使うと、、 setlocale(LC_ALL, 'ja_JP.UTF-8'); echo Carbon::now()->formatLocalized('%Y年%m月%d日(%a)'); 2016年03月09日(水)ってなるんやで。 それぞれ、利用する変換指定子が異なるので注意。 format()の時 http://php.net/manual/ja/function.date.php formatLocalized()の時 http
Google Analyticsがさらに使いやすくなる！ユーザーのさまざまなインタラクションを自動的にトラッキングするスクリプト -Autotrack
Google純正のGoogle Analyticsをさらに使いやすくする便利なスクリプトを紹介します。 ページ上のあらゆる要素のクリックイベント、メディアクエリのトラッキング、TwitterやFacebookボタンのトラッキングなどをGoogle Analyticsで自動的に取得することができます。 Autotrack -GitHub Introducing Autotrack for analytics.js Autotrackの使い方 Autotrackのプラグイン Autotrackの使い方 サイトにAutotrackを加えるには、2つのことをします。 ページに「autotrack.js」をロードさせる。 Autotrackのプラグインを必要とするトラッキングのスニペットをアップデートする。 参考: トラッキングのスニペット、プラグインの使用 既にデフォルトのJavaScriptのス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS![[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/17cdfacd1e45aee2b86d8c20988b611f663292c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061001.png)
[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ![[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)
CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css
