エンジニアの副業は週1からでも可能?副業の例や探し方も解説
- ITエンジニア
- 副業
柄やアニメーションがついた文字は人気が高く、さまざまな場面で活用されています。なかでも人気なのは、画像・動画をテキストの形で切り抜いたデザイン(文字マスク)でしょう。
今回は、画像・動画を文字で切り抜いたバラエティ豊かな文字マスク作品を13選ご紹介します。ぜひWebサイト制作のヒントにしてみてください。
目次
Codepenをご紹介する前に、まずはStratego Brandingの例を見てみましょう。Stratego Brandingのデザインチームは、文字マスクを使うことで、スローガンをよりどっしりと、力強く、そして魅力的に表現しています。優れている点を3つにまとめてみました。
Stratego BrandingのエレガントでビジネスライクなWebデザインは、カリスマ性と個性を兼ね備えています。ソリューションのシンプルさを利点に変えている、お手本のような例ですね。このように、シンプルなデザインに華を添えたい場合には、特に文字マスクがおすすめです。
では、Codepenの作品を見ていきましょう!
最初にご紹介するのは、Dudley Storeyによるクラシックな方向性の作品です。このような効果がついた文字はあちこちで目にしますよね。この作品には、HTML / SCSS / JavaScriptが使われています。背景はHTML5の動画です。この作品は編集可能ですので、ぜひ遊んでみてください。
See the Pen
SVG Text Mask w/ Video Fill by Dudley Storey (@dudleystorey)
on CodePen.
Jesus Graciaによるこの作品も、古典的なデザインです。画像マスクとSVGテキストを組み合わせ、オリジナルの文字を作っています。使われているのはHTML・CSS・JavaScript。安定感のあるトリオです。最初に紹介したStratego Brandingの例を再現したい方にもおすすめです。
See the Pen
Masking image with svg text by Jesús Gracia (@JesGraPa)
on CodePen.
このAlexによる作品には、ホバーエフェクトが使われています。CSSのみで作られているため、軽量で高速です。オンマウスで拡大・縮小できます。Google Chromeで試すのがおすすめです。
See the Pen
Mask Effect by Alex (@alexpopovich)
on CodePen.
CSSとHTMLのみで作品を作りたいなら、この作品を参考にしてみましょう。作者であるWifeoはHTMLとCSSのみで、この優れたデザインを実現しています。こちらもGoogle Chromeで試すのがおすすめです。
See the Pen
CSS3 font mask animation by Wifeo (@wifeo)
on CodePen.
ここまでは比較的シンプルなデザインをご紹介してきましたが、この作品はすこしアイデアをひねり、ぼかし効果を使っています。作者のMatt DesLauriersは、ぼかした背景の上にクリーンなテキストを表示させました。とてもスタイリッシュなデザインですね。
See the Pen
Blur Mask by Matt DesLauriers (@mattdesl)
on CodePen.
さらに複雑なのが、Marti Fenosaによるこの作品です。GSAPとSVGを使うことにより、遊びごころ溢れる魅力的なアニメーションを可能にしています。こちらもGoogle Chromeから見るのがおすすめです。
See the Pen
Mask animation with GSAP & SVG by Martí Fenosa (@martifenosa)
on CodePen.
Mask animation with GSAP & SVG
文字を装飾する要素として人気なのは画像や映像ですが、グラデーションも負けていません。MahdIMの作品は、マスクとグラデーションを使ったシンプルなデザインです。JavaScriptは使わず、アニメーションつきのグラデーションとSVGのマスクを組み合わせています。シンプルでありながらエレガントさもあり、さまざまなプロジェクトで活躍してくれそうです。
See the Pen
SVG mask + animated gradient by MahdIM (@MahdIM)
on CodePen.
このMiles Mannersの作品はMahdIMの作品とよく似ていますが、こちらはマスクを作るのにGranim.jsを使っています。設定からフォント、サイズ、文字などが変更可能で、簡単にプロジェクトに活用可能です。
See the Pen
Includable Granim.js Text Masking by Miles Manners (@milesmanners)
on CodePen.
Includable Granim.js Text Masking
DroidPinkmanは、文字を一色で塗りつぶすのではなく、グラデーションをつけて文字を現れたり消えたりさせています。
See the Pen
Animated SVG Mask by DroidPinkman (@dennisgaebel)
on CodePen.
アニメーションも、画像や映像と同じく文字を装飾するのにぴったりです。Rachel Smithによるこの作品は、ほぼSnap.svgで作られています。遊び心があって、実用性にも優れたデザインです。
See the Pen
text masking with snap.svg by Rachel Smith (@rachsmith)
on CodePen.
この作品を見た人の多くは、AppleによるiPhoneのプロモーションを思い浮かべるのではないでしょうか。作者のSusan Leeは、SVG、GSAP、そしてScrollMagicを活用してこの洗練された作品を作りました。
See the Pen
SVG Video Mask Animation – ScrollMagic & Greensock by Susan Lee (@susan8098)
on CodePen.
SVG Video Mask Animation – ScrollMagic & Greensock
最後にご紹介するのは、Tympanusによる作品。さまざまな特徴をもつ11種類の文字がセットになっています。CSSとSVGで作られたこれらの文字は、アニメーションがついたfill(塗り)とstroke(線)に特化しています。
シンプルそうに見えて奥深いのが、画像・動画の文字切り抜き(文字マスク)の特徴です。映像や視差効果、グラデーション、アニメーションなど、さまざまな要素と組み合わせられます。
キャッチフレーズやスローガンを装飾しながらも、決して目立ちすぎない文字マスク。ぜひ活用して、Webデザインに華を添えてみてください。
(原文:Nataly Birch 翻訳:Asuka Nakajima)
こちらもおすすめ!▼
画像/動画をテキストで切り抜いた文字マスク作品13選!文字に柄やアニメーションをつけよう
Workship MAGAZINE
CSS/JavaScriptで文字に動きを!テキストアニメーション30選
Workship MAGAZINE