fbpx
CSSトリック

CSSトリック:高度なCSSハックの究極のガイド

高度なCSSトリックの学習を検討したことがある場合は、このガイドから始めるのが最適です。 以下のCSSトピックをカバーしています。

  • CSSをアニメーション
  • CSSコードのリファクタリング
  • ネイティブCSS3アニメーション
  • CSS3でのカラーグラデーションの使用
  • CSSポジショニングの概要
  • CSSセレクターの概要
  • CSSの特異性を理解する
  • スクロールトリガーアニメーションにWOW.jsとAnimate.cssを使用する
  • CSSフレックスボックスと高度なCSSセレクターの概要

Animate.CSSとは[チュートリアル]

Animate.CSSとは[チュートリアル] このセクションでは、Animate.cssの使用を開始することで、Web開発者がシンプルで効率的なプログラミングを通じてクリエイティブで機能的なアニメーションデザインを作成するのをどのようにサポートするかについて説明します。 Webコンテンツをアップグレードしてアプリケーションデザインを改善するには、Animate.css入門[チュートリアル]がユニークなコンテンツを作成するための優れた方法です。 開発者は、デジタル環境全体でWebサイトのコンテンツを共有するときに、クリエイティブで異なる機能、より高速で高品質のコンテンツ、およびクロスブラウザーの互換性を備えた他の競合サイトよりも有利になります。 Animate.CSSライブラリ拡張は、すべてのWebおよび モバイルアプリ開発サービス.

CSSアニメーションは、さまざまなアニメーション機能を備えたカスケードスタイルシート(CSS)の拡張です。 このモジュールは、Webサイトのデザインのライブラリを埋め込み、ユーザーに便利さ、創造性、およびプロフェッショナルなWebアプリケーションを提供します。 Web開発者がAnimate.css入門[チュートリアル]アニメーションデザインを適用し、CSSシーケンスを編集し、カスケードスタイルシート拡張機能を使用してWebサイトデザインを改善します。 この拡張機能は、FlashまたはJavaScriptからの処理とメモリ使用量が少ない特定のHTML要素に簡単な構成でアニメーションデザインを実装する際の開発者の操作を簡素化します。

Advantages

間違いなく、Animate.CSSは、シンプルさと互換性のために開発者コミュニティから人気を得ています。 主に、Animate.CSSには、開発者の利便性を高めるために、開発者のWebサイトドキュメントにコピーアンドペーストするシンプルですぐに使えるスタイルシートスクリプトがあります。 また、このモジュールは、開発者の創造性を制限し、プロジェクト開発の完了時間を遅らせる追加の手順を必要とする一般的なGIFまたはFlash画像をユーザーが解決することを防ぐために構築されています。 さらに、Animate.cssの使用を開始するときのアニメーションプロパティには、多くの省略形のアニメーションデザインスタイルスクリプトがあります。 重要なことに、Cascading Styles Sheet(CSS)のAnimate.CSSプログラムには、開発者が創造的で機能的なアニメーションデザインに必要なデザインカスタマイズ開発ツールをより適切に提供できる高度なキーフレーム拡張が含まれています。 使いやすいモジュールに加えて、AnimateはJavascriptを使用した追加のアップグレードまたは改善にも対応しています。

Animate.CSSでのアニメーションの動作

CSS animateは、シンプルな 効果的なデザイン。 説明すると、Animate.CSSには、WebサイトをスタイリングするためのXNUMXつの主要なコンポーネントが含まれています。 最初のコンポーネントは、CSSアニメーションの情報をスタイル設定して保存します。 ただし、XNUMX番目のコンポーネントは「キーフレーム」を使用して、アニメーションデザインのシーケンスの開始と終了をWeb開発者に通知します。 また、このコンポーネントは高度な遷移ポイントを使用して、アニメーションの構成を改善します。

Animate.css入門[チュートリアル]

アニメーションを作成する

CSSアニメーションには、プライマリコンポーネントとサブプロパティコンポーネントが含まれます。 通常、Web開発者はAnimate.CSSスタイル固有のスクリプト要素を使用してAnimate.cssを使い始め、アニメーションプロパティの追加のデザインスタイルを含めます。 より具体的には、プロパティは異なる麦粒腫機能間で機能し、Webサイトに機能的でシンプルなアニメーションを提供します。 アニメーションのプロパティには、アニメーション名、継続時間、タイミング、遅延などのスタイル要素の幅広い基準が含まれます。 他のフォームには、アニメーションの数、方向、塗りつぶし、および再生が含まれます。 幸いなことに、ライブラリモジュールは レスポンシブウェブデザイナー これらのプロパティを、機能が不確かな多数のコードをフォーマットしてテストするのではなく、単純なテキストシーケンスを使用してWebサイトアニメーションに適用します。

キーフレーム

.CSS Animate拡張機能を介して、ユーザーは「キーフレーム」を操作して、コンポーネント要素を含むアニメーションを作成します。 ユーザーの利益のために、「キーフレーム」はカスケードスタイルシートを介してセットアップされ、Web開発者が重要なアニメーション機能に集中できるようにしながら、CSSスタイルセットの段階的な編集機能をユーザーに提供します。 詳細に説明すると、「キーストーン」は、ユーザーがタイミング、期間、および異なる設計シーケンス内の詳細な詳細要素内で構成を実行するのに役立ちます。

規定通りのキーフレーム

さらに、アニメーションの表示では、コンポーネント要素との接続を改善するために、ユーザーは「ルールでキーフレーム」を操作する必要があります。 より具体的なプロパティ構成の場合、拡張機能はデザインの「キーフレーム」間のアニメーション値を修正します。 識別の目的で、Web開発者は「keyframesat-rule」を評価して、シーケンス内の複数の名前を編集し、CSSスタイルセットに価値のない要素を見つけます。 さらに、「keyframes at-rule」は、アニメーションの便利なコードインジケーターを使用して、Web開発者の編集機能を拡張し、デザインスタイルで要素をより適切にレンダリングします。

Annimate.CSS変換

同様に重要なのは、カスケードスタイルシート(CSS)のAnimate.CSS機能が、要素の編集を改善するための「変換」プロパティを提供することです。 CSSデザインと互換性のない要素は、変換ツールで変更されます。 有益なことに、スケール、回転、スキュー、変換などの変換ツールを使用する開発者は、Webアプリケーションでより適切に設計できるように要素を構成します。 2Dまたは3Dのいずれかの変換プロパティは、Webサイトを作成するときにユーザーに追加の設計の創造性と機能を提供します。

スケール

スケールを使用すると、Animate.CSSのユーザーは、Webコンテンツにより適合するようにデザインの寸法を調整します。 特定のCSS変換関数は、要素の幅と高さを修正して、Webアプリのコンテンツをより適切にスケーリングします。 デフォルトでは、スケール値はXNUMXの属性で始まり、XNUMXより大きいまたは小さい値に調整され、要素のスケーラビリティが増減します。 簡単に言えば、CSSの属性は、要素およびコンテンツの設計に対するスケーリング構成を処理するときに、比例した修正を可能にします。

スキュー

続行するには、Animate.CSSの変換ツールは、Web開発者向けのスキュー関数で構成されています。 要素のプロパティのデザインは、歪んでいる可能性のあるWebアプリの水平軸と垂直軸に沿っています。 通常、スキュー関数には、開発者が軸上の要素を歪めるのを支援するための「x」値と「y」値が含まれています。

翻訳します

もうXNUMXつの変換機能はCSS変換です。 同様に、変換関数も「x」と「y」の値を共有して、開発者の設計機能を向上させます。 CSSスキュー機能とは異なり、変換ツールを使用すると、ユーザーは特定の要素を水平軸と垂直軸の両方に配置できます。

ローテート

さらに、Animate.cssを使い始めた開発者は、変換ツールを使用して、要素の回転機能も備えています。 簡単に、ユーザーは要素の角度を任意の方向に調整できます。 コンテンツを時計回りに回転すると回転値は正になり、要素を反時計回りに調整すると回転値は負の値に下がります。

マトリックス

最後に、CSS変換機能には、要素の行列関数が含まれます。 開発者にとって特に便利なマトリックスツールは、2D構成を単一の要素に結合して、ユニバーサル編集アプリケーションを実現します。

Animate.css入門[チュートリアル]
水を加えるだけのCSSアニメーション

Animate.CSSシステムは、「Just-Add-Water」を指します。 このモジュールは、「クロスブラウザー」アニメーションソースとして分類されます。これは、新規または確立されたWeb開発者向けの使いやすさとシンプルなデザインを示しています。

インストール

はじめに、管理者は、Just Add Water Cascading Style Sheets Animationプログラムのインストールを要求します。 最初に、インストールはNPMを介して行われます。 定義するには、Node Package Managerは JavaScriptを Animate.CSSのデザインを共有するスクリプト。 デフォルトでは、プログラミング言語はWeb開発の安定した前提としてNode.JSで動作します。 次に、ユーザーはこのコード「$ Node Package Manager install animate.css –save」を使用してプログラムをインストールします。

または、シーケンスは「$ yenaddanimate.css」に従います。 さらに説明すると、ヤーンのインストールは、管理者によるプロジェクトのインストールにも役立ちます。 通常、「Yarn」は、インストールを、インストールにコードまたは別の適切なものを使用する依存関係に関連付けます。 Node Packaging Manager(npm)のインストール方法とは異なり、「yarn」の代替方法では、新しいプログラムを追加するときに「–save」または「–sav-dev」は適用されません。 詳細には、別のより著名なプログラムからのサポートがない限り、依存関係は機能しません。 モジュールとインストール拡張機能の組み合わせは、革新的な新しいライブラリモデルと連携します。

Animate.CSSの使用[チュートリアル]

Animate.CSS Webサイトでは、Web開発者向けのオープンソースコードを利用できます。 ユーザーは Animate.cssをダウンロード さまざまなカスケードスタイルシートのアニメーションテキストにアクセスします。 リストにはさまざまなデザインスタイルが含まれており、ユーザーのWebサイトに直接適用できます。 さらに、 download コードは、Animate.Cssを使い始めるもうXNUMXつの方法です。

WebサイトのAnimate.CSSの開始

カスケードスタイルシート(CSS)スタイルシートを開発者のWebサイトに適用するのは、簡単、迅速、かつ効果的です。 ただし、テキストの実装では、ユーザーが細部に注意を払う必要があります。 まず、カスケードスタイルシート(CSS)animate.CSSスタイルシートを開発者のドキュメント内に正しく配置する必要があります。 。」 次に、管理者は「アニメーション化された」スタイルシートクラスをWebアプリケーションドキュメント内の要素に適用します。 また、アニメーション化されたスクリプトはCSS名に従い、要素の特定のアニメーション機能を実行します。 または、Annimate.CSS要素構成の別のホストとして、CDNJSなどの他のバージョンに切り替えることもできます。 形式を以下に示します。

Animate.css入門[チュートリアル]

Animate.CSSのアニメーション

Animate.cssを使い始めるWebデザイナーは、Webアプリケーションのコンテンツを差別化するシンプルで高品質のアニメーションを重視しています。 Animate.CSSで提供されるアニメーションスタイルシートには、ドキュメント要素をカスタマイズするカスケードスタイルシート(CSS)アニメーションスタイルが豊富に含まれています。 さらに、要素にアニメーションデザインを作成するには、開発者は「animated」タグを入力する必要があります。 クラスはドキュメント要素内に埋め込まれ、コンテンツ属性をより適切に定義するために追加の命令が必要です。 一般に、開発者は、「無限」に設定された機能を備えたアクティブな要素に依存して、Webサイト内でアニメーションデザインの複数のサイクルを可能にします。 また、アニメーションの継続時間の制約、遅延、ユーザーアニメーションの操作は、Animate.CSSスタイルシートリスト内で利用できます。

以下に示すのは、Webアプリケーションドキュメントに実装するためにAnimate.css [チュートリアル]を開始するWeb開発者向けのアニメーションクラスです。

タイミングアニメーションの開始

ほとんどの場合、Annimate.CSSを使い始めるWeb開発者は、Webサイトのコンテンツを改善するアニメーションデザインを求めています。 合理的には、アニメーションは、サイトの訪問者をサイトの特定の情報に引き付ける方法として実行できる必要があります。 したがって、開発者はアニメーションの遅延、速度、およびタイミングに関して要素を構成する方法を理解する必要があります。

遅延

現在、Animate.CSSは、特定のスタイルシートを使用した遅延機能で開発者を支援しています。 たとえば、遅延機能を備えたスタイルシートは次のようになります。 例。」 このシナリオでは、バウンスアニメーションクラスがアタッチされている要素に対して2秒の遅延が発生します。 遅延クラスは「遅延」として識別され、遅延関数をXNUMX秒からXNUMX秒に変更できます。 ユーザーがカスケードスタイルシート(CSS)テキスト、特にコードを追加する場合は、さらに遅延期間を許容できます。

速度

さらに、Annimate.CSSの要素設計には速度時間値があります。 開発者は、クラスの特定のスタイルシートを使用してアニメーションの速度を修正できます。 たとえば、アニメーションの時系列は次のようになります。 例。」 さらに、開発者はアニメーション要素が跳ね返ることを可能にし、「より速い」速度関数を作成します。 さらに、クラス名は「遅い」、「遅い」、「速い」、「速い」と呼ばれることもあります。 クラス名に加えて、「2秒」、「3秒」、「800ミリ秒」、「500ミリ秒」などの速度時間は、要素関数の速度に対応します。 デフォルトでは、要素レートはXNUMX秒の標準値に設定されています。 追加の拡張機能を使用するユーザーは、Cascading Style Sheets(CSS)Annimate.CSSスタイルシート内で手動でテキストを編集することにより、タイミングを変更できます。

カスタムビルドを開始する

前述のように、開発者はAnimate.CSSスタイルシートを手動で調整して、標準のデフォルトとは別の新しいアニメーションを開発できます。 「gulp.js、」はAnimate.CSSと互換性があり、カスタムアニメーションビルドを簡単にセットアップできます。 より具体的には、クロスブラウザプラットフォームは、タスク開発の自動化プログラムです。 Web開発者とプログラマーの場合、Gulp拡張機能は、ユーザーサーバー上のプラグインをサポートするために、さまざまなパイプ駆動ファイルを分析および整理します。 この場合、Gulpは依存関係と相互作用して、パーソナライズされたアニメーションのビルドと関数を作成します。

例として、初期フェーズでは、開発者にスタイルシートスクリプト「$ cdpath / to / animate.css /」を入力するように求めます。 繰り返しになりますが、管理者は「$ npminstall」を使用してドキュメントに対処します。 その後、Web開発者はビルドを「NPXGulp」パッケージングプログラムに参加させます。 さらに、Gulp内のパッケージは、Webコンテンツに合わせてアニメーションのデザインスタイルを含めるように調整できます。 ユーザーは、「animate-config.json」スクリプトを使用してこのパッケージを編集し、適切なビルドを選択します。 「true」と「false」の値でビルドオプションを選択すると、NPXGulpリストに追加または削除されるビルドが決まります。

JavaScriptを使用したAnimate.CSS

JavaScriptを使用すると、Animate.CSSライブラリモジュールにより、ユーザーはWebアプリケーションを設計するための追加機能を利用できます。 機能には、特定の方向指示を含むより特定のアニメーション機能、アニメーションタイミング信号、アニメーションキーの追加と削除、およびポストアニメーション効果が含まれます。 また、 JavaScriptは、より優れたクロスブラウザ機能を提供します Animate.CSS拡張機能を使用して、ユーザーソフトウェアに最適な減速の柔軟性をユーザーに提供します。

サマリー

要約すると、Animate.cssは、シンプルで効果的なカスケードスタイルシート(CSS)プログラミングを備えたクロスブラウザーライブラリモジュールです。 このデザインは、代替依存関係の互換性を備えた開発者の創造性を促進し、多数のアニメーションデザイン機能を含みます。 さまざまなバージョンのデザインスタイルシートに加えて、アニメーションの動作もプログラマーのテキスト操作によって変化します。 Annimate.CSSのサポートにより、Webアプリケーション開発者は、 レスポンシブウェブサイト メンテナンスが簡単で、ユニークなWebサイトの相互作用を提供する高品質のアニメーション。

CSSコードのリファクタリング

CSSコードのリファクタリング

優れたコードを作成することは、Webページで必要な結果を得るだけではありません。 優れたコードは、可能な限り効率的かつ簡潔でなければなりません。 多くの場合、同じ結果を得るには数多くの方法がありますが、最も簡潔で単純な方法は、いくつかの例外を除いて、理想的な選択です。

優れたクリーンなコードを書くことには、XNUMXつの大きな利点があります。 第一に、それは劇的にできます サイトの速度とパフォーマンスを向上させる。 ファイルが小さいほど(そして送信する外部リクエストが少ないほど)、Webサイトがブラウザーに読み込まれるまでの時間が短くなります。 第二に、優れたコードを書くことには、保守が容易になるという計り知れない利点があります。 プロジェクトを自分でコーディングする場合でも、他の開発者と一緒にコーディングする場合でも、コードがスリムであるほど(理想的には優れたドキュメントがあれば)、コードベースを再検討する必要がある人にとっては頭痛の種になりません。

良いコードを書くためのベストプラクティスは、多くの場合すべてのプログラミング言語に当てはまりますが、この投稿はWebサイトのCSSを改善するために特別に調整されます。

不要なHTTPリクエストを削除する

多くの場合、Webサイトの開発プロセスでは、HTMLドキュメントまたはCSSファイルからリンクされた複数の外部ファイルと依存関係が生じる可能性があります。 外部CDNでホストされている複数の異なるフォントまたはCSSフレームワークを試すことができます。 これらの依存関係のそれぞれは、ブラウザーに読み込まれるたびにサイトが作成するHTTPリクエストを表します。 これはサイトの読み込み時間に大きな負担をかけ、これらの要求はすべてすぐに追加されます。

一連の外部フォントファイルをプロジェクトに追加したが、現在はCSSファイルで1または2しか参照していない場合は、これらのリンクされた依存関係のいずれかを調べて、 <head> HTMLドキュメントの。

ほんの数行のコードにCSSフレームワークのみを使用していますか? これらの行をコピーしてメインに貼り付けることを検討してください .css スタイルシート、および元のCSSフレームワークコードへのリンクを削除します。

CSSルールの簡素化と統合

CSSを作成しているときに、さまざまな要素やセレクターに対して同じルールを繰り返し作成することになります。 コンピュータプログラミングでは、よく繰り返される「DRY」(Do n't Repeat Yourself)の概念がCSSにも当てはまります。 異なるセレクターに対して同じCSSルールを作成していることに気付いたときはいつでも、それらを統合する方法を見つけてください。

たとえば、書く代わりに:

p {フォントサイズ:14px; マージン:0自動; 表示:インラインブロック; } h1 {マージン:0自動; } img {display:inline-block; マージン:0自動; }

 

書くことを検討してください:

p、h1、img {マージン:0自動; } p {フォントサイズ:14px; } p、img {display:inline-block; }

 

またはそれ以上:

/ * p、h1、およびimg要素に適用* / .def-margin {margin:0 auto; } / * p要素に適用* / .def-fs {font-size:14px; } / * p要素とimg要素に適用* / .d-ib {display:inline-block; }

 

これは大きな違いのようには見えないかもしれませんが(少なくともコード行に関しては)、文字の総数が大幅に減少し、ページの読み込み時間に影響を与えます。 さらに、同じスタイルを使用している要素とセレクターを統合し、どの共通のスタイルが異なる要素に適用されているかを明確に示します。

CSSコードのリファクタリング

 IDとクラスの値を再評価します

スタイルプレゼンテーションの側面をクラスまたはID値として割り当てたくなることがよくありますが、これは理想からはほど遠いものです。 たとえば、エラーメッセージの場合、使用するのが理にかなっているように見えることがよくあります。 red 次のように、クラスまたはID値として:

これはエラーメッセージです

 

しかし、このクラスの色やその他のスタイルを変更するとどうなりますか? このクラスは、そのコンテンツやプレゼンテーションと直接の関係がなくなり、混乱を招く可能性が高くなります。 この状況でのより良い選択は、そのスタイルの提示ではなく、その機能を説明するクラス値を使用することです。

これはエラーメッセージです

 

文体的な説明ではなく、その要素のコンテンツまたは機能を説明するクラス値とID値を使用することをお勧めします。 スタイルはサイトの作成プロセス全体で何度も変更される可能性がありますが、関数に記述子を使用すると、コードがはるかに読みやすくなり、保守が容易になります。

セレクターの選択肢を再構築します

要素を選択する方法はさまざまですが、他の方法よりも効率的な方法がよくあります。 特定の要素に到達するためにセレクターを相互にネストすることは可能ですが、あまりにも多くのレベルに入る必要がある場合は、クラスまたはID値がより適切に機能するかどうかを再評価するのが最善の方法です。

冗長性を確認する

Webページのスタイルを設定する過程で、さまざまな異なる色、たとえば同じ色の多くの色合いを試すことができます。 明確な単色を決定することなく、これらの異なるルールセットをコードに残すのは簡単です。 これらのタイプの冗長性をチェックするために使用するのに適したツールは次のとおりです。 cssstats.com.

これによりコードが簡素化されるだけでなく、サイト上に40種類の色調があるのではなく、全体的なデザインの一貫性が大幅に向上します。

CSSファイルを縮小する

CSSファイルの作成とライブサーバーへの展開の準備が完全に整ったら、最高のパフォーマンスを得るためにそれらを縮小することをお勧めします。 ミニファイアはソースコードからすべての空白を削除し、ファイルサイズを大幅に削減します。 ソースコードはその機能(読みやすさのみ)を空白に依存していないため、サイトの実行方法に悪影響を与えることはありません。

CSS(およびJSファイル)を縮小するための多くの無料ツールがあります。 XNUMXつのオプションは cssminifier.com.

CSSファイルを統合する

前回の投稿で簡単に触れたように、リソースをできる限り統合することをお勧めします。 開発段階でCSSをモジュール式に保つことについては適切な議論があります(たとえば、レイアウトルールをXNUMXつのCSSファイルに保持し、カラーオプションを別のCSSファイルに保持するなど)—これらのCSSルールをすべてXNUMXつのファイルに統合して、最高のパフォーマンス。

ネイティブCSS3アニメーション

ネイティブCSS3アニメーション

人気のあるライブラリは Animate.css プロジェクトにCSSアニメーションを簡単に追加できるようにします。これらのアニメーションは、主に「バウンス」、「シェイク」などの一般的なモーションで構成されており、使いすぎるとかなり古くなる可能性があります。 CSSに組み込まれているアニメーションプロパティを利用することで、モーションだけでなく、はるかに複雑でカスタマイズされたアニメーションを作成できます。 CSSアニメーションは、要素の色、サイズ、位置、またはCSS3仕様で使用可能なその他のプロパティに影響を与える可能性があります。 この投稿では、ネイティブCSS3プロパティの使用を開始する方法と、それらの可能な使用例をいくつか紹介します。

要素にアニメーションを追加する

HTML要素にアニメーションを付けるには、最初のXNUMXつのステップで、アニメーションの名前と継続時間を宣言します。 これは animation-name 及び animation-duration プロパティ:

#myアニメーション {
    アニメーション名: 色変更;
    アニメーション期間: 5s;
}

 

animation-duration 秒またはミリ秒単位の任意の値を受け入れることができます( s or ms 整数の後)。

アニメーションを作成する

名前と期間を宣言したら、アニメーションを作成します。 これは、 @keyframes ルール、続いてアニメーション名:

@キーフレーム 色変更 {
    
}

 

の中 @keyframes ルールは、アニメーションの各「フレーム」のルールであり、からのパーセンテージ値で指定されます。 0% 〜へ 100%. 0% アニメーションの始まりです 100% 終わりであり、その間に任意のパーセント値が可能です。 これは、ビデオやフリップブックのように考えることができます。本の各ページは、組み合わされたときに動きを生み出す独自のフレームです。

@キーフレーム 色変更 {
    0% {
        背景色: ;
    }  
    50% {
        背景色: グレー;
    }
    100% {
        背景色: ;
    }
}

 

上記の例では、 color-change アニメーションは変化します background-color #myAnimation からの要素 black at 0%gray at 50% そして最後に white at 100%.

ただし、カスタムアニメーションを使用するメリットは、CSSプロパティを完全に変更でき、フレームのレベルを少しずつ変更できることです。 これの良い例は :hover 疑似クラス。 CSS :hover 状態は、要素がマウスでホバーされたときに色または小さなスタイルの変更を適用するためによく使用されますが、アニメーションを使用すると、これらの変更をより詳細に行うことができます。

ボタンを放します。:ホバー {
    アニメーション名: ボタンアニメーション;
    アニメーション期間: 5s;
    アニメーション塗りつぶしモード: フォワード;
}
@キーフレーム ボタンアニメーション {
    0% {
        背景色: ;
    }
    50% {
        変換: 階段(2.1);
        背景色: ドジャーブルー;
    }
    75% {
        変換: 階段(2.5);
        背景色: ;
    }
    100% {
        変換: 階段(1.5);
        背景色: ;
    }
}

 

上記の例では、 button-anim アニメーション効果 button カーソルを合わせたときの要素。 その background-color 要素自体のサイズが目立たないユニークなステップ(元のサイズから5倍、2.1倍、そして元の2.5倍)で変化しながら、1.5秒間にXNUMXつの等しいステップで変化します。

上記の例に含まれるXNUMXつの追加プロパティは、 animation-fill-mode プロパティ。 このプロパティは、アニメーションの期間が完了する前(および後)にスタイルを適用する方法を示すために使用できます。 使用する animation-fill-mode: forwards アニメーションの最後のフレームのスタイル( 100% ルール)が適用されたままになります。 追加せずに animation-fill-mode プロパティ、スタイル button アニメーションが完了すると、元の状態に戻ります。

結論

CSSアニメーションは非常に複雑で詳細な場合があり、最大100の異なるフレームを指定できます。 この機能はバニラCSSでネイティブに利用可能であることを考えると、視覚的な興味と複雑さをWebプロジェクトに追加する優れた方法であり、すべての最新ブラウザーで十分にサポートされています。

CSS3でのカラーグラデーションの使用

CSS3でのカラーグラデーションの使用

CSS3の導入以来、2つ以上の色が徐々にフェードインするカラーグラデーションを背景として使用できるようになりました。 以前は、グラデーションの作成はPhotoshopまたはその他を使用して行う必要がありました 画像編集 ソフトウェア。 効果的に使用すると、これは、静的な背景色だけでなく、Webページのデザインに興味やテクスチャを追加するための優れた方法です。 Internet Explorerのレガシーバージョンはこの機能をサポートしていませんが、最近のすべてのブラウザーがサポートしているため、プロジェクトに安全に追加できます。 この投稿では、グラデーションの背景の使用と、利用可能なカスタマイズオプションについて説明します。

基本的な線形グラデーション

要素の背景を設定するには(それが body div、またはその他の要素)、 background プロパティが使用され、通常は色の値が指定されています。

本文{背景:#fffbed; }

 

単色の代わりに線形グラデーションを使用するには、少なくともXNUMXつの色(hex、rgb、hsl、または名前付きの色の値のいずれかを使用)をコンマで区切って、 linear-gradient() 値:

body {background:linear-gradient(#fffbed、#45add3); }

基本的な線形グラデーション

ベンダープレフィックス

別のブラウザが処理するので linear-gradient 値が異なる場合は、ベンダープレフィックスと一緒に使用することを強くお勧めします。 これにより、Safari、Firefox、Chrome、およびOperaで値が確実に理解されます。 ベンダープレフィックスを使用するには、2つ追加します。 background のルール linear-gradient 接頭辞付きの値 -webkit- 及び -moz-。 また、ベンダープレフィックスのない通常のルールの前に表示されます。

body {background:-webkit-linear-gradient(#fffbed、#45add3); 背景:-moz-linear-gradient(#fffbed、#45add3); 背景:linear-gradient(#fffbed、#45add3); }

 

これは少し余分な入力ですが、すべての主要なブラウザーでグラデーションがサポートされることを保証します。

方向の制御

デフォルトでは、グラデーションは上から下に移行し、最初の色は linear-gradient 値はトップカラーです。

ただし、色の前にいくつかの方向キーワードを追加することで、グラデーションの方向を変更できます(つまり、 to top, to bottom, to right, to left, to right topなど)

body {background:linear-gradient(to right bottom、#fffbed、#45add3); }

 

方向をコーナーに設定する場合、x軸またはy軸のいずれかを最初に指定できます(つまり、 to right bottom 及び to bottom right 同じだ)。

複数の色

カンマで区切るだけで、グラデーションでXNUMXつ以上の色を利用できます。

body {background:linear-gradient(#eaecee、#abebc6、#45add3); }

or

body {background:linear-gradient(#eaecee、#ebdef0、#f4f6f7、#abebc6、#4eb39d、#45add3); }

 

カラーストップ

特定の色がどこから始まるかを制御して、特定の色がより多くのスペースを占めるようにしたり、より広いスペースを移行できるようにしたい場合があります。 これらの「カラーストップ」を追加するには、特定の色の後にパーセンテージ値を追加して、その色の開始位置を指定します。

body {background:linear-gradient(#eaecee、#abebc6 30%、#45add3%80); }

 

これはトランジションをより細かく制御するのに最適で、興味深いエフェクトに使用できます。

放射状グラデーション

線形グラデーションのXNUMXつのバリエーションは、放射状グラデーションです。 放射状グラデーションは要素の中心から移行し、円のように外側に移行します。 それらは線形勾配とほぼ同じ構文を使用しますが、 radial-gradient 代わりに値:

body {background:radial-gradient(#eaecee、#45add3); }

CSS3カラーグラデーション

 

CSSポジショニングの概要

CSSで理解すべき最も重要なプロパティのXNUMXつは、 position プロパティ。 ページの要素をレイアウトするために、 position プロパティ、ほとんど 高度なレイアウトの問題 このプロパティで使用できるさまざまな値を知る必要があります。 このブログ投稿では、XNUMXつの主要な値を見ていきます。 position、およびそれらをそれぞれ使用する可能性のあるインスタンス。

静的な位置

static のデフォルト値です position、つまり、どの要素に対しても、明示的に値を設定しないことを意味します。 position、 そうなる static デフォルトでは。 の要素 position of static 次のようなボックスオフセットプロパティは受け入れません。 margin or padding .

以下の例では、それぞれ div それぞれがブロックレベルの要素であるため、互いに積み重ねられます:

ユニット1 ユニット1 ユニット2 ユニット2

 

body {font-family:Helvetica; 色:白; } .container {background-color:#fffbed; } .unit {背景色:#337e7e; 高さ:80px; 幅:80px; text-align:center; 行の高さ:80px; ボーダー:#696969pxソリッド; }

 

CSSポジショニング

相対位置

の要素 position of relative の値に非常に似ています static、ただし大きな違いがXNUMXつあります。ボックスオフセットプロパティを受け入れることができます。 top, right, bottom, left.

の要素の場合 position of relative、これらのオフセットプロパティは、要素の通常の位置からの距離を設定します。 言い換えると、要素を position of relative 〜を持つ top の値 10px、要素が表示されます 10px その場合、通常表示される場所よりも低い position した static.

の要素 position of relative 要素の通常の「フロー」内にとどまり、ボックスオフセットプロパティは要素を通常のフローからシフトするだけです。

ユニット1 ユニット1 ユニット2 ユニット2

 

body {font-family:Helvetica; 色:白; } .container {background-color:#fffbed; } .unit {背景色:#337e7e; 高さ:80px; 幅:80px; text-align:center; 行の高さ:80px; ボーダー:#696969pxソリッド; 位置:相対; } .unit-2 {トップ:1px; } .unit-10 {右:2px; } .unit-30 {左:3px; } .unit-20 {下:-4px; 右:30px; }

 

CSSポジショニングの概要

絶対位置

の要素 position of absolute ボックスオフセットプロパティも受け入れますが、要素の通常のフローからは削除されます。 ボックスオフセットプロパティの使用 absolute 配置された要素は、その要素を親要素に直接関連して配置します。

とまったく同じCSSを取ります position: relative; 上記の例ですが、単に position 〜へ absolute 個々の要素の完全に異なる配置になります:

ユニット1 ユニット1 ユニット2 ユニット2

 

body {font-family:Helvetica; 色:白; } .container {background-color:#fffbed; } .unit {背景色:#337e7e; 高さ:80px; 幅:80px; text-align:center; 行の高さ:80px; ボーダー:#696969pxソリッド; 位置:絶対; } .unit-2 {トップ:1px; } .unit-10 {右:2px; } .unit-30 {左:3px; } .unit-20 {下:-4px; 右:30px; }

 

CSSポジショニング

固定位置

を持つ要素 position of fixed と非常によく似ています position: relative;、ただし、位置は親要素ではなく、ブラウザのビューポートを基準にしています。 さらに、要素はページとともにスクロールせず、ユーザーがページのどこにいるかに関係なく、「固定」されたままで常に表示されます。 これは、常に表示されたままにするために、ヘッダーとフッターをページに「修正」するためによく使用されます。

CSSセレクターの概要

CSSセレクターの概要

Web開発では、多くの場合、同じ結果を達成するための多数の方法があります。 (言語に関係なく)適切なコードを作成するための鍵は、可能な限り最も効率的な方法を使用し、必要なコードを最小限に抑え、コードベースを最小限に抑えることです。 これにより、ページの読み込み時間が短縮されるだけでなく、自分や他の開発者にとってソースコードが明確になります。 CSSを作成する場合、対象とする要素を選択する方法と、そのための最良の方法を知ることが重要です。 このセクションでは、最も一般的なCSSセレクターのいくつかと、それぞれを使用するのに最適なインスタンスについて説明します。

タイプセレクター

すべてのHTML要素には、その要素タイプに対応するセレクターがあります。 かどうか div, p, img またはその他のHTML要素の場合、対応するCSSセレクターはまったく同じですが、タグで使用されている山かっこを除いています。

p {色:黒; } div {表示:インライン:ブロック; } img {幅:200px; }

 

タイプセレクタは、ターゲットにしたい場合に最適です あらゆる 特定の要素タイプのインスタンスを作成し、それらすべてに同じスタイルを適用します。

クラスセレクター

クラスセレクターは、特定の要素に関連付けられたクラス名を利用します。 このセレクターは、要素のタイプに関係なく、特定のスタイルをさまざまな異なる要素に適用する場合に最適です。 たとえば、次のクラスがあるとします。 .responsive に適用 p, div 及び img 素子:

この段落はレスポンシブですレスポンシブdiv

 

次のCSSコードブロックは、これらのすべての要素を同じクラスでターゲットにします。

.response {幅:80%; マージン:0自動; }

 

クラスセレクターは常に、ピリオド(.)クラス名の前。

IDセレクター

IDセレクターはクラスセレクターに似ていますが、特定のHTMLドキュメントの単一の要素にのみ適用できます。 これは、 単一の要素をターゲットにしたい:

これはユニークなスタイルの段落です
#myParagraph {色:緑:幅:200px; フロート:左; 表示:インラインブロック; }

 

IDセレクターは常に、ポンド記号またはハッシュ記号(#)ID名の前。

ユニバーサルセレクター

ユニバーサルセレクターは、HTMLドキュメント内のすべての要素をターゲットにします。 これは、すべての要素からデフォルトのマージン、パディング、その他のスタイルを削除するなど、CSSのリセットによく使用されます。

* {マージン:0; パディング:0; }

 

ユニバーサルセレクターは、アスタリスク(*).

:hover

もうXNUMXつの一般的なセレクター(および多くのCSS「疑似クラス」のXNUMXつ)は :hover。 この疑似クラスをセレクターに追加すると、要素のホバー状態がターゲットになります。 これは、これらのスタイルが ユーザーがマウスでその要素の上に移動したときに適用されます。

a:hover {text-decoration:underline; 色:紫; }

 

:hover 多くの場合、ユーザーがリンクにカーソルを合わせたときに強調表示するリンクまたは要素に使用されます。 この疑似クラスは、マウスカーソルがないため、モバイルデバイスでは実際には使用されませんが、ラップトップおよびデスクトップユーザーには適しています。

CSSの特異性を理解する

CSSの特異性を理解する

CSSコードを作成する過程で、作成したコードがページにまったく影響を与えないと思われる状況に必ず遭遇します。 これはイライラさせられ、混乱を招き、以下のような支援なしではトラブルシューティングが困難になる可能性があります。 Chromeデベロッパーツール。 ただし、CSSの特異性とカスケードがどのように機能するかをよりよく理解することは、これらの問題を完全に軽減するのに大いに役立ちます。 このセクションでは、実行しようとしていることをブロックしているコードを特定しようとするときに通常発生する主な問題のいくつかを指摘することを目的としています。

CSS(カスケードスタイルシートの略)が上から下に機能することはよく知られています。 つまり、一般的に言えば、ドキュメントのより下にあるコードは、より上にある他のコードよりも優先されます。 この簡単な例は、同じ要素をターゲットとするXNUMXつの宣言を持つことです。

 

p {色:青; } p {色:緑; }

 

この例の段落要素の色は、段落に青の色を割り当てる宣言の後に表示されるため、常に緑になります。

問題は、要素セレクターだけでなくセレクターにもさまざまなレベルの特異性があり、セレクターを組み合わせるとその特異性が高まり、他のルールが上書きされることです。

要素と疑似要素

要素と疑似要素の特異性は最も低いレベルです。 彼らは対象とするので 特定の要素のインスタンス、要素セレクターの使用は、それらのスタイルを本当に適用したい場合にのみ使用する必要があります 段落、div、ヘッダーなどのインスタンス。たとえば、次のコードは、1pxの黒い実線のボーダーをドキュメント内のすべての段落要素に適用します。

 

p {ボーダー:1px黒一色; }

 

クラス、属性、疑似クラス

クラス、属性、および疑似クラスは、より高いレベルの特異性を持ち、それらに関連付けられた要素にのみ適用されます。 同じスタイルを共有したい場合はいつでも、クラスを複数の異なる要素に適用できるという意味で、それらは再利用可能です。 これらのスタイルは、要素レベルのスタイルと競合するスタイルもオーバーライドします。 以下の例では、クラスが次のものを除いて、すべての段落要素が緑色になります。 alert、赤になります:

 

p {色:緑; } p.alert {色:赤; }

 

IDが

IDは、最高レベルの特異性を備えており、ほとんどすべてのものをオーバーライドします。 何度でも再利用できるクラスとは異なり、IDは、 要素をページに追加します。

 

p#myParagraph {色:黒; } p.alert {色:赤; } p {色:緑; }

 

下の段落にはさらにXNUMXつの宣言がありますが、 p#myParagraph 宣言、ID #myParagraph 常に黒になります。

インラインスタイル

インラインスタイルは、IDよりもさらに高いレベルの特異性を持っています。 要素に適用されるスタイルを見つけて管理することが困難になるため、インラインでスタイルを適用することは一般的に非常に不快ですが、正当化できる状況があります。

私の赤い段落

 

上記のインラインスタイルは、他の場所で適用されているスタイルに関係なく、常に赤になります。*

!important

上記の注意点のXNUMXつは、インラインスタイルを含む場合でも、 !important。 いつでも !important がCSSルールに追加された場合、このルールは他のすべてのルールよりも常に優先されます。

 

p {色:青!重要; }

 

!important CSSをブロックしているものがわからない場合は、命の恩人になることができますが、簡単に悪用され、コードを混乱させるだけでもかまいません。 原則として、 !important 他のすべてが失敗した場合のみ。

特異性をよりよく理解およびチェックするための非常に便利なツールは、 キーガンストリートの特異性計算機。 疑わしいときはいつでも、ここでセレクタを確認することは非常に役立ちます。

スクロールトリガーアニメーションにWOW.jsとAnimate.cssを使用する

WOW.jsおよびAnimate.css

アニメーションは、視覚的な興奮と動きをWebサイトに追加する優れた方法であり、人気のある animate.css ライブラリは、CSSベースのアニメーションを任意のWebサイトに追加する簡単な方法を提供しています。 ただし、ユーザーがWebサイトの特定のセクションにスクロールした後でのみこれらのアニメーションをトリガーしたい場合はどうでしょうか。

もちろんこれはjQueryを介して実行できますが、その関数にJavaScriptライブラリを使用するだけで、単純なスクリプトで実行できる関数に不要なバルクが追加されます。 WOW.jsはこの問題を解決し、スクロールによってトリガーされるアニメーションを追加するための使いやすいライブラリを、jQueryを必要とせずにわずか3kBで提供します。

この投稿では、WOW.jsとanimate.cssをWebプロジェクトで使用するためのガイドを提供します。さえずるするにはクリック

スクロール効果以外のさまざまなアニメーションについて学習したい場合は、このブログ投稿の最後のセクションで、他のCSSおよびJavaScriptアニメーションライブラリのリストを確認してください。

animate.cssについて

WOW.jsとAnimate.cssを使用したスクロールトリガーアニメーション2019の更新

CSSアニメーションを使用すると、HTMLのWebサイトに人目を引く視覚効果を簡単に追加できます。 CSSアニメーションの最も人気のあるライブラリのXNUMXつはanimate.cssです。 ライブラリは小さいかもしれませんが、キーフレーミングを複雑に使用せずにウェブサイトにもっと魅力的なものを追加したいと考えている初心者のウェブ開発者にとっては完璧なツールです。 このブログの投稿では主にWOW.jsの使用方法について説明しますが、animate.cssファイルは非常に用途が広く、他のファイルでも使用できます。

サイトの要素に追加できる多くのアニメーションには、次のものがあります。

  • 静的アニメーション:これらのタイプのアニメーションは、ウェブページを読み込んで開くとすぐに表示されます。 つまり、スクロール(WOW.js)は必要ありません。
  • スクロールアニメーション:これらのタイプのアニメーションは、ユーザーがWebページ上の要素のビューにスクロールすると表示されます。 これは、WOW.jsで注目するタイプのアニメーションです。 このアニメーションはjQueryでも作成できます。
  • クリックアニメーション:jQueryとJavaScriptプログラミングを組み合わせることで、ユーザーが特定の要素をクリックしたときに実行されるアニメーションをWebサイトに作成できます。
  • 「特別な」アニメーション:これらの風変わりなアニメーションは、目を引くアニメーションでユーザーの注意を即座に即座に捉えたい場合に、要素に使用できます。

WOW.jsについて

WOW.jsはJavascriptファイルであり、HTMLドキュメントに追加すると、サイトに魅力的で動的な効果を作成できます。 このスクロール効果は、MITのもとでオープンソースコードとしてライセンスされていたため、Webデザイナーにとって最も人気のあるオプションのXNUMXつです。 WOW.jsを実装するWebサイトにいる場合、サイトを下にスクロールすると、アニメーション要素が魔法のように表示されます。 この影響の例については、公式Webサイトにアクセスしてください。 WOW.js。 これは、animate.cssで利用できる優れた設計ツールです。

JavaScriptを使用した他のアニメーションオプションと比較して、WOW.jsはシンプルでかさばらないコードで非常に人気があります。 他のCSSアニメーションライブラリを使用してWOW.jsをアクティブ化できることに注意してください。 WOW.jsは、animate.cssをデフォルトのライブラリとして扱います。 これには、CSSHakeやDynCSSなどのライブラリが含まれます。 WOW.jsはオープンソースプロジェクトで無料で使用できますが、商用プロジェクトのライセンスを購入する必要があります。

プロジェクトにanimate.cssとWOW.jsを追加する

Webサイトのアニメーションを開始するための最初のステップは、HTMLドキュメントにanimate.cssとWOW.jsを追加することです。 HTMLプロジェクトにファイルを追加する方法はいくつかあります。 animate.cssとWOW.jsのディストリビューションは、それぞれの公式サイトからダウンロードするか、次の場所から入手できるファイルにリンクするだけです。 CDN。 CDNは、JavaScriptおよびCSS用の膨大な数のライブラリをホストしています。

Webサイトでanimate.cssを使用する主な利点は、CSSコードがXNUMXつのファイルに保持されるため、プロジェクトが簡素化されることです。 とてつもなく。 CSSファイルをプロジェクトに追加したら、あとはドキュメントの先頭にあるHTMLにリンクするだけです。 または、CDNファイルをHTMLドキュメントにリンクするだけです。 animate.cssファイルを直接追加するか、単にCDNファイルにリンクするかに応じて、hrefのみがわずかに異なります。

animate.cssとWOW.jsをインストールする

CDN上のanimate.cssおよびWOW.jsファイルを表示するには、以下のリンクをクリックしてください。

(注:「最小化」コードとは、機能を維持するために空白や短い文字を削除することを指しますが、ファイルサイズをコンパクトにします。これにより、コードをカスタマイズまたは変更したい人にとってコードの読み取りと編集が難しくなります。コード。)

npmを使用してanimate.cssとWOW.jsをインストールする

または、npm(Javascriptパッケージマネージャー)などのパッケージマネージャーを使用して、コマンドラインにいくつかのキーワードを入力するだけで、animate.cssとWOW.jsの両方をインストールできます。 プロジェクトディレクトリのルートから、コマンドラインから次のコマンドを実行します。

npm インストール wowjs

npm経由でWOW.jsをインストールする利点のXNUMXつは、animate.cssも依存関係として自動的にインストールされることです。 このように、animate.cssをダウンロードする手順に上記のオプションのいずれかを適用することについて心配する必要はありません。 ファイルを直接追加するか、CDNを使用するのと同様に、animate.cssはドキュメントの中でリンクされます(hrefパスはファイルの場所によって異なります)。

スクリプトの場合、HTMLドキュメントの下部、終了タグのすぐ下にリンクして、WOW.jsをWebサイトに追加できます。 この後には <script> 以下に示すように、WOW.jsをアクティブにするタグ:

<script>

新しいWOW()。init();

要素へのアニメーションの追加

両方のファイルがプロジェクトに追加されたら、スクロール時にアニメーション化するHTML要素を選択します。 クラスが.wowの要素は、ユーザーがページ上でその要素に到達するまで非表示のままになります。 このクラスは、見出し、テキスト、画像、またはWebサイトの大部分に適用できます。 鬼ごっこ。

h1要素など、WOW.jsでアニメーション化するHTML要素に.wowのクラスを追加します。

私のサイトへようこそ!

Animate.cssには75種類のアニメーションスタイルがあり、いずれも公式サイトでデモできます(上記を参照)。 使用するアニメーションを選択したら、その名前を、アニメーション化する要素のCSSクラスとして、「wow」クラスとともに追加します。 次に、HTMLドキュメントでのanimate.cssとWOW.jsの動作例をいくつか示します。

私のサイトへようこそ!

h1要素は、ユーザーがページ上でスクロールすると、すぐにフェードインします。

ここをクリック

に含まれるコンテンツユーザーがページ上でタグにスクロールすると、タグがサイトにパルス効果を作成するようになりました。

WOW.jsアニメーションの変更

HTMLドキュメントのインライン編集により、CSSアニメーションにわずかな調整を加えることができます。 これらのXNUMXつのプロパティは後で追加できます クラス=「すごい」 さらに、それらを任意のHTMLタグ内で組み合わせます。 基本的に、これらの単純なプロパティは、ユーザーがスクロールアニメーションに多様性を追加するための優れた簡単な方法です。 以下は、WOW.jsでHTML要素をアニメーション化するときに変更できるXNUMXつのプロパティの説明です。

  • data-wow-delay =“ _ s”:通常、ユーザーがその場所にスクロールすると、要素が自動的に表示されます。 このプロパティを使用すると、アニメーションを_秒遅らせることができます。
  • data-wow-duration =“ _ s”:アニメーションを最後に_秒にすることができます。これは、要素の外観を高速化または低速化するのに役立ちます。
  • data-wow-iteration =“ _”:このプロパティを使用すると、ページ上で静的になる前に、アニメーションを_回繰り返すか、繰り返すことができます。
  • data-wow-offset =“ _”:このプロパティを使用すると、アニメーションを開始する前に、ブラウザの端から_ピクセルでアニメーションを開始できます。

animate.cssおよびWOW.jsの代替アニメーションライブラリ

Bounce.js

Bounce.jsは、見事なCSS3およびJavaScriptアニメーションを作成するための使いやすいツールですBounce.jsは、Webサイト用の素晴らしいCSS3およびJavaScriptアニメーションをわずか数分で作成できる使いやすいツールです。 開発者は、Bounce.js Webツールでさまざまなアニメーションのリストを試して、静的なキーフレームを生成し、さらにWebブラウザーで直接アニメーションをカスタマイズすることもできます。 アニメーションが基準を満たしている場合は、CSSコードをサイトから直接エクスポートして、プロジェクトに貼り付けることができます。 次に、Webブラウザーで作成したアニメーションを使用して、HTML文書の要素に直接適用できます。 Webツールはユニークな短縮URLも生成し、いつでも編集したい場合に備えて、新しいWebブラウザーでアニメーションにアクセスできます。

JavaScriptを使用してアニメーションを作成し、Bounce.jsライブラリをプロジェクトにインストールする方法の詳細については、Bounce.jsライブラリをプロジェクトにインストールする手順に従ってください。 Githubサイト.

Anime.js

Anime.jsは、CSSプロパティ、JavaScriptオブジェクト、SVG、DOM属性を利用して印象的なアニメーションを作成しますもうXNUMXつの人気のあるアニメーションライブラリはAnime.jsで、CSSプロパティ、Javascriptオブジェクト、SVG、およびDOM属性を利用して印象的なアニメーションを作成します。 Julian Garnierのコレクションには、自分のサイトに直接追加できる数十のシームレスなアニメーションがあります。 Anime.jsで作成されたさまざまなアニメーションをAnime.jsCodepenコレクションで表示できます。 WOW.jsとは異なり、このアニメーションライブラリは、サイト上のHTML要素をアニメーション化するために必ずしも使用されるわけではありません。 むしろ、Anime.jsは、Webサイトの視覚的な魅力を高めるために、Webサイト用に個別のアニメーション「イラスト」を作成するために使用されます。 私のお気に入りのいくつかはガルニエのものが含まれています 線画アニメーションレイヤードアニメーションのデモ。 Anime.jsライブラリをプロジェクトに追加するには、npmからインストールできます。

でAnime.jsを使用するための指示とドキュメントを表示します Githubサイト.

Hover.css

Hover.cssは、アニメーション化された要素の上にマウスを置くだけで、ウェブサイトに人目を引く効果をもたらします。Hover.cssは、アニメーション化された要素の上にマウスを置くだけで、ウェブサイトに人目を引く効果をもたらします。 このアニメーションライブラリを使用して、ボタン、ロゴ、画像などの通常の2D要素にさらに魅力的なものを追加できます。 Hover.css Webサイトでは、各ボタンの上にマウスを置くと、背景、2D、シャドウ、アウトラインの遷移などのさまざまなアニメーションを参照してテストできます。 XNUMXつまたはいくつかのHover.cssアニメーションを使用する予定の場合は、ファイルをダウンロードして、特定のアニメーションをコピーして独自のスタイルシートに貼り付けることができます。 ただし、多くのHover.cssアニメーションの使用を計画している場合は、基本的に、Hover.cssスタイルシートをインストールしてHTMLドキュメントにリンクする同じ手順に従うことができます。 すべてのHover.css効果にアクセスして、サイト上の適切なHTML要素をアニメーション化できます。

Hover.cssをインストールして使用するための具体的な手順とドキュメントを表示するには、公式にアクセスしてください Githubサイト.

Typed.js

WOW.jsおよびAnimate.cssブログ記事の使用:Typed.jsの概要象徴的なタイプライターまたはタイピング効果を作成するには、Web開発者に人気のあるオプションはTyped.jsを使用することです。 人気のグループワークスペースプラットフォームであるSlackなど、多くのWebサイトがこのアニメーションライブラリを使用して、ページに文字列入力効果を作成しています。 npmを介してHover.cssライブラリをインストールするか、CDNファイルをHTMLドキュメントにリンクするだけです。 本質的には <script> タグ、タイプライター効果でHTMLテキストタグをアニメーション化できます。 十分な調整を行うことで、Webサイトでより高度なタイピング効果を作成して、さらに素晴らしい効果を得ることができます。 たとえば、入力時にコンピュータが一時停止する効果や、単語の文字を削除する効果を作成できます。

公式 Githubサイト すべてのソースコードと、個人の好みに合わせて入力アニメーションをカスタマイズする方法に関する詳細なドキュメントが含まれています。

CSシェイク

CSSシェイクは、すべての「シェイク」HTML要素が行うアニメーションのコレクションです。タイトルが示すように、このCSSライブラリはWebサイト上のすべてのHTML要素を「シェイク」するアニメーションのコレクションです。 この風変わりなアニメーションは、ウェブサイトの特定の画像やセクションに注目を集めたい場合に最適です。 また、ウェブサイトの要素をよりインタラクティブにします。これは常にフロントエンド開発にとってプラスになります。 CSShake Webサイトで、ページ上のさまざまな要素にカーソルを合わせると、さまざまなシェイクアニメーションを試すことができます。 CSShake Githubのソースコードには、独自のカスタムシェイクアニメーションを作成する方法を説明する詳細なドキュメントも含まれています。 ドキュメントを読んでjQueryプロパティを調整し、理解する必要があります。

CSShakeを自分のプロジェクトにインストールする準備ができたら、インストールの指示に従ってください。 Githubサイト.

CSSフレックスボックスと高度なCSSセレクターの概要

CSS Flexbox (またはフレキシブルボックスレイアウト)はCSS3仕様に最近追加されたもので、特に複数のデバイスサイズとレスポンシブWebデザインで作業する場合に、Webページのレイアウトの問題の多くに対処することを目的としています。 より最近のCSS grid プロパティは、複雑なグリッドベースのレイアウトを作成することができ、 flexbox 多くの場合、大規模なレイアウト内にコンポーネントの小さなグループをレイアウトするためのより良い選択です。 grid。 この投稿では、一般的なレイアウトの問題に対するflexboxプロパティの使用について簡単に紹介します。

display: flex

フレックスボックスを作成する最初のステップは、 display: flex プロパティ内のすべてのフレックスアイテムのコンテナーとして機能する親要素にプロパティ。

ほとんどのレイアウトでは、追加のプロパティを使用する必要があります。 このプロパティのみを使用して、単純な2列のレイアウトを作成できます。

たとえば、2つのコンテナを div 要素を互いの上に積み重ね、それを追加して2列のレイアウトに変換します display: flex プロパティ:

元のコード:

HTML


    
    

 

CSS:

#コンテナ {
    高さ:600px。
    幅:800px。
}
#column1 {
    背景色:青;
    高さ:300px。
    幅:400px。
}
#column2 {
    背景色:緑;
    幅:400px。
    高さ:300px。
}

 

CSSフレックスボックスの概要

フレックスボックスを使用したCSS:

#コンテナ {
    高さ:600px。
    幅:800px。
    ディスプレイ:フレックス;
}
#column1 {
    背景色:青;
    高さ:300px。
    幅:400px。
}
#column2 {
    背景色:緑;
    幅:400px。
    高さ:300px。
}

 

CSSフレックスボックスの概要

flex-direction

フレックスコンテナー内の要素のフローをさらに制御できます。 flex-direction プロパティ。 デフォルトでは、フレックスコンテナー内のすべての要素は、 row 左から右にこのプロパティを設定して、 column, row-reverse or column-reverse.

で間隔と配置を調整する justify-content

多くの場合、コンテナ内の要素が占めるスペースよりも多くのスペースがコンテナ内にあるため、特定の方法で要素の間隔を正当化する必要がある可能性があります。 デフォルトでは、フレックスコンテナ内のすべての要素は、コンテナの最初に配置されます(と呼ばれます)。 flex-start)ですが、他にもさまざまなオプションがあります。 実際の位置は、設定によって異なります。 flex-direction:方向が次のように設定されている場合 row その後 flex-start コンテナの左端まで表示されますが、 column コンテナの一番上を示します flex-start.

元のコード例に戻って、 width 私たちのコンテナの違いをよりよく示すために少し justify-content 設定を行います。

justify-content: center すべての要素を列の中央に直接配置します。


    
    

 

#コンテナ {
    高さ:600px。
    幅:1000px。
    ディスプレイ:フレックス;
    justify-content:center;
}
#column1 {
    背景色:青;
    高さ:300px。
    幅:400px。
}
#column2 {
    背景色:緑;
    幅:400px。
    高さ:300px。
}

 

CSSフレックスボックスの概要

justify-content: flex-end の反対です justify-content: flex-start、要素をコンテナの最後に配置します。

CSSフレックスボックスのヒント

justify-content: space-between コンテナの両端にすべての要素を配置し、コンテナの中央にあるスペースと、内部の追加要素の周囲にスペースを残します(3つ以上の要素を持つコンテナのインスタンスの場合)。

CSSフレックスボックスハッキング

justify-content: space-around のようなものです spae-between、ただしコンテナの両端に追加のスペースがあります。

CSSフレックスボックスのヒントとコツ

高度なCSS3セレクター

ただし、より詳細なレベルで要素をターゲティングするために、他にも多数の高度なセレクタがあります。 CSSを学ぶ上で最も重要なことのXNUMXつは、ジョブに適したセレクターに慣れることです。 この投稿では、要素をターゲティングするための最も有用な高度なセレクターのいくつかを取り上げます。

子セレクター

子セレクターは、互いにネストされた要素をターゲットにするために使用されます。 子セレクターには、子孫セレクターと直接子セレクターのXNUMX種類があります。

子孫セレクター

子孫セレクターは、親要素のどこにネストされているかに関係なく、特定の要素(または要素のグループ)をターゲットにするために使用されます。 例えば:

.コンテナp

 

の両方のインスタンスをターゲットにします p 次のHTMLの要素:

これは段落ですこれは、さらに下にネストされた別の段落です。

 

直接の子セレクター

親要素からXNUMXつ下のレベルにある要素のみをターゲットにする場合は、直接の子セレクターを使用します。

.container> p

 

最初だけを選択します p 次のHTMLの要素:

これは、ダイレクトチャイルドセレクターの対象となる段落ですこれは別の段落であり、直接子セレクターの対象ではありません

 

兄弟セレクター

一般的な兄弟セレクター

一般兄弟セレクターは、最初の兄弟の後に表示される同じネストされたレベルの要素を選択します。 例えば:

h1〜div

 

上記の2つをターゲットにします div 後に現れる要素 h1、しかしその前のもの、またはそれ以上のレベルでネストされる可能性のあるものではありません:

段落タイトルこのdivがターゲットになります別の段落このdivもターゲットになります

 

隣接する兄弟セレクター

隣接する兄弟セレクターは、表示される要素をターゲットにするために使用されます 直接に 特定の要素の後。 例えば:

h1 + p

 

のみを対象とします p 直後の要素 h1:

..。 ..。 この段落が対象になります..。 ..。

 

疑似クラス

以前のCSSセレクターの投稿では、 :hover セレクタ。 ただし、他にも多くの疑似クラスがあります。 :link, :visited, :active 等です。

スタイルを設定するには a まだアクセスしていないリンクは、 :link セレクタ:

a:link {color:green; }

 

風刺する a アクセスしたリンクは、 :visited セレクタ:

a:visited {color:blue; }

 

世界 :active セレクターは、ユーザーが要素をクリックするなど、要素を操作するときにいつでも使用できます。

.click-me:active {border-radius:50%; }

 

:focus ユーザーがマウスまたはキーボードのクリックで入力したフォーム要素など、要素に「フォーカス」がある場合は常に使用されます。

a:フォーカス{高さ:120%; }

結論

この投稿で役立つCSSトリックを見つけましたか? 以下のコメントを共有してください。

 

アンジェロ・フリシナの日光メディア

著者紹介

アンジェロは20年以上にわたってクリエイティブITの世界に携わってきました。 彼は1998年にDreamweaver、Flash、Photoshopを使用して最初のWebサイトを構築しました。 彼は、HTML / CSS、Flash ActionScript、XMLなどの幅広いプログラミングスキルを学ぶことで、知識と専門知識を広げました。

アンジェロはオーストラリアのシドニーでCIW(Certified Internet Webmasters)プログラムを使用して正式なトレーニングを修了し、コンピューターネットワーキングの中心的な基礎と、それがワールドワイドウェブのインフラストラクチャとどのように関連しているかを学びました。

アンジェロは、Sunlight Mediaの運営とは別に、ウェブとアプリの開発、デジタルマーケティング、その他の技術関連のトピックに関連する有益なコンテンツの作成を楽しんでいます。

1 コメント

  • ガブリエル・ルッソ 22 4月2022、2:44の午後

    Ottimo articolo、molto esaustivo!

    Ho letto con piacere ripassando qualche nozione che non uso da unpo'。 Stavo cercando il modo di far ripetere un animazione ogni volta che l'utente scorre un puntospecificodellapagina。 ポトレイ運賃に来ますか?

    l'eventualerispostaあたりのGrazieanticipatamente。