Smooth as Butter: Achieving 60 FPS Animations with CSS3
Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here. While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people
Importing CSS Breakpoints Into JavaScript | Lullabot
There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or requir
A follow up to obtaining 60fps scrolling performance
A follow up to obtaining 60fps scrolling performance 60fps scrolling article got quite a few people excited but also a few smart people to point out some flaws in the approach. I was planning to just update the original article but I’ve compiled so much info about this topic that I thought it would be better to do a follow up article and dive into the detail of the techniques that I tried and some
【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
コレは使ってみたいな！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
Ripple Click Effect From Google Material Design Using jQuery & CSS3
Recreating the ripple click effect from Google material design Description Recently Google released its material design spec which showcases some very cool user interactions. One of them is the ripple click effect where an ink-drop like element moves out radially from the position where the user taps/clicks. This effect has also been integrated in the paper elements collection in the Polymer Proje
Finding/Fixing Unintended Body Overflow | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Ughck, accidental horizontal scrollbar, amiright? That can be a pain, but you can usually find the offending element by surfing around the ol’ DevTools and selecting elements until you find something that extends too far over to to the right (off-page to the left doesn’t tend to trigger a sc
background-size polyfillの使い方、IE8で背景画像を全画面表示にする時の注意点 | お墨付き！
body { /* 画像ファイルの指定 */ background-image: url(images/background-photo.jpg); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ b
Code Snippets | CSS-Tricks
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
Minimal Form Interface | Codrops
A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website
[JS]シンプルでかっこいいナノサイズのバーを実装するjQueryいらずの超軽量スクリプト -nanobar
ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装するスクリプトを紹介します。 jQueryなど他のスクリプトは必要なく、725bytesで超軽量です。 デモページ：nanobar = 60% 右端の「100%」をクリックすると、100%に達した後にスマートなアニメーションでバーが消えるのもかっこいいです。 nanobarの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 <body> ... <script src="path/to/nanobar.js"></script> </body> もし、browserifyを使用している時は、下記の記述でもOK var Nanobar = require('path/to/nanobar') Step 2: JavaScript スクリプトを実行して、バーを
[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js
写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari, Firefox, Opera, IE10+でご覧ください。 上記のアニメーションは左からのぺらっですが、上下左右の全ての方向からぺらっができます。右のベタ塗りはめくるとシャドウが半透明で適用されます。 Sticker.jsのフッタ 最初のデモは写真画像なのでカーソルはアローですが、フッタのはリンクなのでポインターになっています。 Sticker.jsの使い方 Step 1: 外部ファイル 当ス
Device State Detection with CSS Media Queries and JavaScript
Being able to detect device state at any given moment is important for any number of reasons and so it's important that web app CSS and JavaScript are in sync with each other. In working on the Mozilla Developer Networks' redesign, I found that our many media queries, although helpful, sometimes left JavaScript in the dark about the device state. Is the user viewing the site in desktop, tablet, or
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
On Keeping Breakpoints DRY | CSS-Tricks
Effective web performance tuning for smartphone
CssUserAgent (cssua.js)
web.dev
ご存じですか、dialog要素
GitHub - blivesta/animsition: A simple and easy jQuery plugin for CSS animated page transitions.
Smart Fixed Navigation