手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
スマホのボタンタップUIをCSSとJavaScriptを使って良い感じにしてみる | TENPURA - 1→10design Lab -
スマートフォンのボタンのタップUIは、 iPhoneとAndroidではデフォルトのUIが異なります。 iPhoneでは黒く透過し、Androidでは黄色い枠がつきます。 VIEW DEMO ※ スマホで見て下さい。 iPhoneではデザインに余り影響が出ないのでいいですが、Androidは濃い色がついてしまうので、黄色を使っていないサイトのデザインでしたら、どう見ても不自然に目立ってしまします。 大半のスマートフォンサイトはこういったUIのままリリースされているのが現状です。 そういったデフォルトのタップUIを消すには下記のCSSを記述すれば消えます。 body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color:
レスポンシブコーディングのスニペットいろいろ - やっぱりWebが好き - Writing Mode
コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペットまとめ。 レスポンシブでサイトを作ることが増えています。 予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。 ワンソースで考えたほうが運用は効率的だと思うから。 Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいありま
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
