スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
Twitter bootstrap入門 #twtr_hack
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.
CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
Tori's Eye
Welcome to Tori's Eye! Tori's eye is a Twitter visualization tool, inspired by papercraft and origami. It's a visual and technical experiment implemented using only standard XHTML/CSS and Javascript. What does it do? Enter a word in the search box and then catch some birds with your mouse to read the tweet they're carrying. Tori's Eye fetches the latest tweets containing the word you input from Tw
BJKit(BeautifulJapaneseKit)（ツール） - アイデアマンズ株式会社
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
Shibuya.js in KyotoでLTをして来ました - 最速チュパカブラ研究会
いつも通りスライドをslideshareにアップロードしました …が、たぶんこれだけ見ても訳がわからないと思いますので、デモの補足説明をします。 今回のLTで行ったデモは、ASCSSというWebKitのCSS処理系をAS3に移植したもののデモです。以下のURLで実際に動かすことができます: http://svn.coderepos.org/share/lang/actionscript/ascss/src/KyotoDemo.swf 左に適当なXML（整形式であればHTMLでなくてもOK）を入れて、右にCSSを書くと、どのセレクタがどの要素にマッチしたか青い線で表示します。一つの要素に複数のセレクタがマッチした場合、詳細度が低い方から順に青い線が光ります（この順番でルールを適用すると、詳細度の高いルールが後から上書きされるため、詳細度の低いルールより「強い」ことになります） おまけ機能とし
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script graceful
CSS の構文解析と @-webkit-*** ルールの意味 - IT戦記
はじめに あのDan Kogai 氏にも好評な噂の名著「Jythonプログラミング」がついに発売されるわけですが、皆様いかがお過ごしでしょうか。今日は Jython にちなんで、 CSS の構文解析のお話をしたいと思います。（関係ない） 知ってますか？ Safari（などの WebKit を使ったブラウザ）にある以下のルールを @-webkit-rule @-webkit-value @-webkit-decls @-webkit-mediaquery これらのルールの使い方を知っていますか？ 僕は、今日まで使い方が分からなくて困っていたのです＞＜ 話は変わって 最近、僕の中では CSS （の実装）ブームです。 前回のパーサブームでは JavaScript で XPath を作ったわけですが、そのときはパーサを手で書いていました。 じゃあ、今回は yacc でも使ってみるかと鼻息荒めで挑ん
ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技
ちょっとしたサイトのアクセサリーとして使えそうな感じです。 サンプルはこちら 灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。 詳細は以下で。 コードは結構簡単 以下のようにmootools.svn.jsを読み込みます。 <script type="text/javascript" src="mootools.svn.js"></script> 以下も、bodyタグの前に挿入<script type="text/javascript"> window.addEvent('domready', function(){ var scroll = new Scroller('container', {area: 100, velocity: 1}); $('container').addEvent('mouseover', scroll.start.bin
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
コリス
対応表 | Browser Support Charts
[JS]スタイルシートを機能拡張するスクリプト -MoreCSS