Hover
2.3.1
リンク、ボタン、ロゴ、SVG、注目の画像などに適用できる CSS3 を利用したホバー効果のコレクション。独自の要素に簡単に適用したり、変更したり、インスピレーションのために使用したりできます。 CSS、Sass、LESS で利用できます。
デモ |チュートリアル
npm install hover.css --savebower install hover --saveHover.css はさまざまな方法で使用できます。使用したいエフェクトをコピーして独自のスタイルシートに貼り付けるか、スタイルシートを参照します。次に、エフェクトのクラス名を、適用したい要素に追加するだけです。
1 つまたは複数のエフェクトのみを使用する予定の場合は、ユーザーがcss/hover.css全体をダウンロードする必要がないように、エフェクトをコピーして独自のスタイルシートに貼り付けることをお勧めします。
Grow エフェクトを使用すると仮定します。
Hover.css をダウンロード
css/hover.cssで、Grow CSS を見つけます (各効果には、その上のコメントを使用して名前が付けられます)。
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}この効果をコピーして、独自のスタイルシートに貼り付けます。
効果を表示したい HTML ファイルで、選択した要素に.hvr-growのクラスを追加します。
Hover.css 効果を適用する前の要素の例:
< a href =" # " > Add to Basket a >Hover.css 効果を適用した後の要素の例:
< a href =" # " class =" hvr-grow " > Add to Basket a >注: 2.0.0以降、他のライブラリ/スタイルシートとの競合を防ぐために、すべての Hover.css クラス名にはhvr-という接頭辞が付けられます。 Sass/LESS を使用している場合、これはscss/_options.scssまたはless/_options.lessの$nameSpace / @nameSpace変数を使用して簡単に変更できます。
多くの Hover.css 効果を使用する予定がある場合は、Hover.css スタイルシート全体を参照することをお勧めします。
hover-min.cssをダウンロードするcssという名前のディレクトリにある Web サイトのファイルにhover-min.cssを追加します。hover-min.css参照します。 < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >あるいは、次のように既存のスタイルシートに参照を追加することもできます (これは、HTML を編集できない WordPress ユーザーに役立つ可能性があります)。
@import url ( "hover-min.css" );.hvr-growのクラスを追加します。Hover.css 効果を適用する前の要素の例:
< a href =" # " class =" button " > Add to Basket a >Hover.css 効果を適用した後の要素の例:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayプロパティに関する注意事項要素を「変換可能」にするために、Hover.css は適用されるすべての要素に以下を与えます。
display : inline-block;
vertical-align : middle;この動作をオーバーライドしたい場合は、上記の CSS を Hover.css から削除するか、要素のdisplayプロパティを変更します。 CSS カスケードが有効になるように、Hover.css 宣言の後に必ずオーバーライドを宣言してください。あるいは、Hover.css の Sass/LESS バージョンを使用している場合は、 scss/_hacks.scssまたはless/_hacks.lessにあるforceBlockLevel()ミックスインを削除またはコメントアウトすることができます。
変換可能な要素の詳細については、「CSS 変換モジュール」を参照してください。
Hover.css アイコンを追加するには、Hover.css 効果が適用される要素内にアイコン HTML を配置します。例えば：
上記のコードでは、リンク要素にhvr-icon-forwardのクラスを与えており、リンクにホバーしたときにアイコンが前方に移動します。アイコン自体にはhvr-iconのクラスが与えられ、これがアニメーション化したいアイコンであることを Hover.css に知らせます。この例では、アイコンは FontAwesome からのもので、次のように FontAwesome の指示に従って Web ページのにロードしました。
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >注: Hover.css v2.3.0 では、アイコンの追加に任意の方法を使用できます (以前は、すぐに使用できるのは FontAwesome のみでした)。たとえば、別のアイコン ライブラリを使用したり、代わりに次のようなイメージ:
ここで、画像にはhvr-iconクラスが適用されているため、画像はアイコンとして機能し、マウスをホバーすると、アイコンは親要素のhvr-icon-spinクラスの定義に従って回転します。
アイコンの位置は完全に制御できます。次のようにテキストの前に配置できます。
または、カスタム CSS を使用して、アイコンを適切に配置します。
プロジェクトは次のフォルダーとファイルで構成されます。
その他の注目すべきファイルは次のとおりです。
Hover.css エフェクトの多くは、トランジション、アニメーション、変換、擬似要素などの CSS3 機能に依存しているため、古いブラウザではエフェクトが完全に機能しない可能性があります。
上記のブラウザ以外にも、Hover.css はすべての主要なブラウザでサポートされています。多くの Web テクノロジーの完全なサポートについては caniuse.com を参照し、それに応じて Web ページをテストしてください。古いブラウザーには、それらのブラウザーでサポートされている CSS または Modernizr などの機能テスト ライブラリを使用して、フォールバック効果を適用することをお勧めします。
Grunt は必須ではありませんが、開発をスピードアップできます。 Grunt がインストールされたら、コマンド ラインからgruntを実行して、http://127.0.0.1:8000/ またはネットワーク テスト用のローカル IP でアクセスされる開発サーバーをセットアップします。 Grunt を実行すると、Sass または LESS が前処理され ( scssとlessフォルダーのどちらで作業するかに応じて)、CSS ファイルが縮小されます。
注:元々、Grunt は CSS プロパティに自動接頭辞を付けるように設定されていましたが、プロジェクトを可能な限りアクセスしやすくするために、現在はそうではありません。代わりに、ブラウザの接頭辞としてprefixed(property, value) Sass/LESS mixin を使用する必要があります。開発での Sass/LESS の使用と [開発での LESS の使用] を参照してください。
Sass/LESS は必須ではありませんが、開発をスピードアップできます。お気に入りのソフトウェアまたは Grunt 経由で提供される環境を使用して Sass/LESS を前処理します。
Sass/LESS は、さまざまな CSS を特定のファイルに分離するために Hover.css プロジェクトで使用されます。各エフェクトは、 effectsディレクトリ内の独自のファイル内にあります。 Hover.css は、次の.scssファイルと.lessファイルも使用します。
特定の効果に適用されるハック (望ましくないが、通常は必要なコード行) が含まれています。ハックはここで説明されています。
_options.scss / _options.lessで指定した必要なプレフィックスをプロパティとキーフレームに適用するprefixedとkeyframesミックスインが含まれています。
プロパティには次のように接頭辞を付けることができます。
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); prefixedミックスインには、接頭辞を付けるプロパティとその値が渡されます。
キーフレームには次のように接頭辞を付けることができます。
@include keyframes(my-animation) {
to {
color : red;
}
} keyframesミックスインにはキーフレーム名が渡され、その後に @content ディレクティブを使用してコンテンツが渡されます。
. keyframes ( my-animation , {
to {
color : red;
}
}); keyframesミックスインには、キーフレーム名とその後にコンテンツが引数として渡されます。
デフォルトのオプション、さまざまなエフェクトのオプション、およびprefixedミックスインで使用するブラウザーのプレフィックスが含まれています。デフォルトでは、 -webkit-プレフィックスのみがtrueに設定されています (現在、ほとんどのブラウザーはプレフィックスを必要としていないため)。
2.0.0以降、 _optionsは$nameSpace / @nameSpaceオプションも含まれており、これを使用すると、すべてのクラスのプレフィックスが付く名前を変更できます。デフォルトの名前空間はhvrです。
$includeClasses / @includeClassesオプションはデフォルトでtrueに設定されており、すべての Hover.css エフェクトが独自のクラス名hvr-growなど) で生成されます。 Hover.css エフェクトを構成するプロパティを独自のクラス名に追加したい場合は、このオプションをfalseに設定します。
独自のエフェクトを貢献したい場合は、貢献ガイドを参照してください。
Hover.css は、要件に応じて、無料の個人/オープンソースまたは有料の商用ライセンスで利用できます。ライセンスを比較するには、Ian Lunn Design Limited Store にアクセスし、ここで商用ライセンスを購入してください。
個人/オープンソースでの使用のために、Hover.css は MIT ライセンスに基づいて利用可能です。
完全なライセンスを読む
商用利用の場合、Hover.css は商用ライセンス、拡張商用ライセンス、および OEM 商用ライセンスに基づいて利用可能です。
購入 |完全なライセンスを読む
*エンドユーザーが個別のアプリケーションを作成できるアプリケーションを除きます。 OEM商用ライセンスを参照してください。
購入 |完全なライセンスを読む
アプリケーションにより、エンド ユーザーが Ian Lunn Design Limited のソフトウェアを組み込んだ個別のアプリケーション (開発ツールキット、ライブラリ、アプリケーション ビルダーなど) を作成できるようにする場合は、OEM 商用ライセンスを取得する必要があります。 OEM商用ライセンスの詳細については、お問い合わせください。
Hover.css は、以前は MIT ライセンスに基づいて商用および非商用の両方で利用可能でした。 v2.2.0 (2017 年 3 月 24 日) より前に商用目的の MIT ライセンスを取得した人は、同じライセンスに基づいて v2.2.0 より前のバージョンの Hover.css を引き続き使用できます。
v2.2.0 以降にアップグレードしたい場合、または単純に Hover.css のサポートを示したい場合 (大変感謝しています!)、最新の商用ライセンスを購入してください。商用ライセンスを購入します。
Ian Lunn はフリーランスのフロントエンド開発者であり、CSS3 Foundations の著者です。
レスポンシブ Web サイト、WordPress Web サイト、JavaScript、アニメーション、最適化については Ian を雇ってください。
