10のすばらしいアニメーションテキストCSSとJavaScriptコードスニペット

公開: 2021-03-09

基本的なCSSと数行のJavaScriptを使用して、かなりまばゆいばかりのテキスト効果を作成できます。これらの効果は、テキスト表示アニメーションから3D回転、または想像できるその他のものにまで及びます。

そして、この投稿では、Web全体からの最もクールな10の例をカタログ化し、ほんの少しの定型化されたテキストとCSSコードで何ができるかを示しています。

これらのCSSアニメーションツールもお気に召すかもしれません。

1.タイトルアニメーション

Robin Treurによるこのアニメーションのタイトル効果は、多くの映画やビデオゲームのスタイルに従います。文字は、CSS3テキストシャドウとわずかな斜めの傾斜を使用して、突出した3D効果を発揮します。

フェードインアニメーションスタイルは、同じ傾斜したテキストを持つ1930年代の古典的な映画を思い出させます。すべてがCSSを介して制御されますが、「再起動」ボタンはJavaScriptを使用して作成されています。このようにして、アニメーションを何度も再生して見栄えを良くすることができます。

2.粉砕

壊れた粉砕テキストの作成は、After Effectsなどのツールを使用した簡単な作業ですが、コードを使用したテキスト粉砕アニメーションの作成は非常に困難であり、ArsenZbidniakovによるこのペンは非常に印象的です。

テキストは実際にはSVGシェイプを使用して作成されているため、アニメーションプロセスが少し簡単になります。これは、通常のようにテキストを選択、コピー、または操作できないことも意味します。

ただし、ロゴやその他の非インタラクティブなページ要素に使用する場合は、サイトに同様の効果を追加できます。

3.ツイストレター

開発者のMamunKhandakerは、このねじれた文字のアニメーションのコレクションをまとめました。アニメーションスタイルごとに名前が異なり、この1本のペンですべてを閲覧できます。

ツール/ウェブアプリのランディングページやホームページで使用されているこれらのテキスト効果を見ることができました。これらはすぐに注目を集め、訪問者に永続的な印象を残します。さらに、それらはすべて100％純粋なCSSで作成されており、非常に簡単に調整できます。

4.ピクセルアルファベット

このユニークなアニメーションピクセル効果は間違いなく奇妙ですが、奇妙なことに魅惑的です。これは主にJavaScriptに依存しており、HTML5キャンバス要素を操作する方法として開発者GeorgiNikoloffによって作成されました。

フォントベースとしてNotoSerifを使用し、文字をcanvas要素内の可鍛性要素に変換します。 JavaScriptは文字を小さなドットに分割し、これらがアニメーションの基礎を形成します。

これが実用的だとは言えませんが、Webアニメーションがどこまで進んだかを証明しています。

5.カルーセルの入力

この効果は、小さなポートフォリオや代理店のWebサイトでよく知られています。入力テキストのアニメーションは、サイトのヘッダーに表示されることが多く、ワードプロセッサで入力している人の外観を模倣しています。

CSSとJavaScriptのアニメーションをうまく組み合わせて、すべてが1つの要素に含まれています。時々あなたはウェブサイトが彼らの仕事の説明、彼らの歴史、または彼らが一緒に働いたクライアントをリストするためにこれを使用するのを見るでしょう。

適度に使用すると、間違いなく楽しい効果です。一度に1つの単語しか表示されないため、ページの読みやすさが制限されますが、控えめに使用すると、誰でもコピーできる非常に優れた効果になります。

6.タイガータイガー

ウィリアム・ブレイクの詩「タイガー」から言葉を借りて、ジョセフ・マルトゥッチによるこの非常にユニークなアニメーションは本当にあなたの注意を引き付けます。

ここでの焦点は、コンテンツではなく、活版印刷のスタイルとアニメーションにあります。テキストの各「セグメント」には、テキストのアウトラインと光る効果を備えた独自のスタイルがあります。これは、 setTimeout()を使用してテキストを順番にアニメーション化するようにホームページのスタイルを設定する方法の優れた例です。

7.スナップSVG

オープンソースのSnap.svgライブラリを使用すると、わずかなコードで誰でも高解像度のSVG画像を作成できます。これは、Illustratorのようなプログラムを学ぶよりもはるかに簡単で、AlexisBlondinによって作成されたこの楽しい例のようにアニメーション化できます。

アニメーションで使用されるランダムな文字を含め、すべての文字はJavaScriptを介して動的に作成されます。最新のSVGサポートは膨大であり、これらの画像タイプは、今後数年間でWebサイトの構築方法を根本的に変える可能性があります。このSnap.svgアニメーションはほんの一例であり、間違いなくクールなものです。

8.ブラケットアニメーション

これは、私がいつも見ているもう1つのかなり一般的なテキストアニメーション手法です。ページ上のローロデックスのように、テキストが回転する角かっこを使用します。

このアニメーションは、CSSだけで作成できることを除いて、前述のタイピングカルーセル効果を模倣しています。これは、あるCSSキーフレームから別のCSSキーフレームに移動するカスタムループアニメーションに依存しており、各フレームは回転するテキストに異なる単語またはフレーズを表示します。

この効果は非常に微妙で、ホームページで読みやすくなっています。あなたがあなたのホームページのためにいくつかのクールなテキスト効果を探しているなら、これは素晴らしい選択でしょう。

9.アンブレイカブルキミーシュミット

この甘いロゴ効果は、Netflixシリーズ「アンブレイカブルキミーシュミット」から借りたものです。テキストスタイルやカスタムアニメーションなど、すべてがCSSで作成されます。

ページ本体にはアニメーションを開始するクラスがあり、このクラスはJavaScriptを使用してページに追加されます。そこからはすべて純粋なCSSです。それは主に、驚くほどリアルなバウンス効果を作成するために一連の変換を使用します。

これは、CSS3の使用方法を知っている場合にCSS3が実行できることのさらに別の例です。

10.SVGテキストの入力

最後に、ボックスシャドウとCSSストロークプロパティを組み合わせて使用する、この非常にユニークなSVGフィラーアニメーションについて説明します。

このテキストは完全にSVGで作成されていますが、通常のテキストのように文字をコピーして貼り付けることもできるように選択することもできます。すべてのブラウザに完全に準拠しており、アニメーションはどのWebサイトにも収まるほど微妙です。

これらのテキストアニメーションはすべて、テーブルに何か新しいものをもたらします。あなたはそれらすべてがあなた自身の仕事で実用的または使用可能であるとは思わないかもしれませんが、それらは正しいアプローチでほとんど何でも可能であることを証明します。