05 Blue hour ft. Julianna Barwick Julianna Barwick (Vocals), Mike Andrews (Granular Synthesis), Amir (Viola), Sunny (Additional Production), Alexander Thompson (Engineer)
レスポンシブWebデザインの弱点の1つにパフォーマンスがあります。allWebクリエイター塾のウェブサイトもレスポンシブWebデザインで作成されています。ページ下部に配置しているナビゲーションに「スクロールパフォーマンス」という問題がありました。 「スクロールパフォーマンス」とはスクロールした際の「垂直方向の画面の動きのスムーズさ」を意味します。スクロールパフォーマンスが悪いとユーザーはスクロールした際に画面がひっかかったような印象うけ、ユーザー・エクスペリエンスを損ないます。 今回、リサーチをして検証した結果「スクロールパフォーマンス」が改善できたのでご紹介します。 allWebクリエイター塾のナビゲーションの問題 allWebクリエイター塾のWebサイトは、ナビゲーションを画面の最下部に配置しています。これは、タブレットでユーザーがナビゲーションボタンを押しやすいという理由からです 赤
Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’
CSS3には拡大、縮小、移動、傾斜、回転を行えるtransformプロパティがあります。 このtransformは2D, 3Dどちらにも対応しています。 ASのtransform.matrix(Matrix)も得意では無かったのですが、復習がてらのメモです。 W3C: CSS Transforms transform(matrix)で最適化 DOMElementのアニメーションでパフォーマンスを良くするためにはtransformを使った方が良いと、あるセミナーでGoogleの中の人とMozillaの中の人が言ってたので間違いないでしょう。 て言うか信じてます、試しては無いです。伝聞で申し訳ないです。 でもカクカク動いてたiPhone上でのアニメーションをtransformに変えたらかなりスムーズに動くようになったので効果はあると思っています。 追記 – スマホのアニメーションが改善されたっ
今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();(角度の変更) #img01 img { animation: animat
jQueryのanimateではアニメーションしながらtransoformさせることが出来ないようです。 それを可能にするのが今回ご紹介するこちらの「Transit」になります。 transformがjQueryで動かせる 基本的には以前ご紹介した、transformの動作がjQueryで可能になるプラグインです。 要素を変化させる、CSS3「transform」のおさらい|WEB Drawer 3Dアニメーションもできて、従来のanimateのeasingなども実装できます。他にもtransform以外のmarginなどもアニメーションさせることができます。 サンプルページ いろいろな動きができる 他にも様々な使い方が配布サイトに載っていますので御覧ください。 Transit – CSS transitions and transformations for jQuery 対応ブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く