[B! canvas][css] battaのブックマーク

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄いウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

batta 2024/08/29

リンク

【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する

こんにちは、R&D 部の青野です。「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。ということで、読みにくいページを作りました。と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。（さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の

batta 2017/10/05

canvas
css

リンク

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js

スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ

batta 2016/01/20

リンク

[JS]透過処理をした写真画像の転送量を軽くする方法

通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visibl ity = 'hidden' // Preload the un-alpha'd image var image = document.cre