[B! CSS3][アニメーション] s99e209のブックマーク

s99e209 id:s99e209

CSS3とアニメーションに関するs99e209のブックマーク (2)

ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。エフェクトサンプル１．アニメのようにテキスト下の画像を移動させるアニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
s99e209 2015/03/16
CSSアニメーションを使って、面白い動きができるコードまとめ。

css3

アニメーション
リンク
ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや
s99e209 2014/03/11
「jSlideMenu」の不具合で、Android2.x上でスライドした直後にメニューリンクがタップされる問題があったので、<a href="javascript:void(0)" onclick="return false;" id="menu_button"> のように属性を付けて解決した。

CSS3

jQueryプラグイン

スライド

アニメーション
リンク
1