[B! CSSアニメーション][テクニック] three

three_bee id:three_bee

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

[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック
パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zooming Background Images 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。 Fitbit このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。実装には多くの方法がありますこのエフェクトを実現するには、多くの異なる方法があります。一つの選択肢として、jQueryのプ
three_bee 2016/08/17
css

CSSアニメーション

*tips

*css

HTML

#CSS

#ウェブ

あとで読む

表現

テクニック
リンク
使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。エンジニア速報は Twitter の@commteで配信しています。もくじメニュー１．円形２．タブ３．ナビゲーション４．アコーディオンウィンドウ５．モーダルウィンドウ６．フローティングウィンドウ７．Dialog(ダイアログ) ８．フォーム＋バリデーションボタン９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
three_bee 2013/12/09
jQuery

css

jquery

テクニック

メニュー

サンプル

まとめ

CSSアニメーション

*制作

ui
リンク
1