ホームページって、どこも似たり寄ったりで、使っている画像が良いか悪いかぐらいの判断しかないと思ってたんですよ。
でも、たまに、見た目も良いし、みたことがない表現のホームページってあって、ハッとさせられます。
個人的には、そういうホームページをどんどん量産していくようにして、まさに会社で他に無いページを作っていきたいと思っているんですよ。
そこで、今回はCSSのマスク機能を使って、面白い表現ができるので、そのテクニックをご紹介します。
デモ
画面をタップするとアニメーションが始まります。
（もう一度タップすると、逆再生します）
ソース
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css" />
<script type="module" src="main.js"></script>
<div id="canvas">
<img src="img.jpg" alt="sample-image" />
<svg class="stroke" xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
<path
class="svg-elem-1"
style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 70px; stroke-linecap: round;"
d="M 59.18 93.66 C 59.18 93.66 152.339 43.279 163.222 52.324 C 174.86 61.994 178.219 86.808 120.001 126.681 C 61.1 167.02 47.832 172.326 61.624 196.855 C 74.93 220.52 106.955 195.449 144.943 176.602 C 192.072 153.217 249.838 131.289 265.373 152.466 C 281.157 173.981 223.104 195.003 166.681 235.046 C 100.121 282.285 69.588 304.582 83.538 323.703 C 100.686 347.201 145.984 328.448 200.775 286.392 C 257.465 242.879 317.684 214.414 331.343 239.073 C 344.611 263.022 212.972 358.581 212.972 358.581"></path>
</mask>
</svg>
</div>
style.css
svg.stroke .svg-elem-1 {
stroke-dashoffset: 1257.7664794921875px;
stroke-dasharray: 1257.7664794921875px;
-webkit-transition: stroke-dashoffset 3s ease-in-out 0s;
transition: stroke-dashoffset 3s ease-in-out 0s;
}
svg.stroke.active .svg-elem-1 {
stroke-dashoffset: 0;
}
#canvas{
width:400px;
height:400px;
position:relative;
border:1px solid red;
}
#canvas img,
#canvas svg{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
#canvas img{
z-index:1;
mask: url(#mask);
-webkit-mask: url(#mask);
}
#canvas svg{
z-index:2;
}
main.js
class Main{
constructor(){
this.event()
}
get elm_svg(){
return document.querySelector("svg.stroke")
}
event(){
window.addEventListener("click",()=>this.click())
}
click(){
if(!this.elm_svg){return}
// on -> off
if(this.elm_svg.classList.contains("active")){
this.elm_svg.classList.remove("active")
}
else{
this.elm_svg.classList.add("active")
}
}
}
switch(document.readyState){
case "complete":
case "interactive":
new Main();break
default:
document.addEventListener("DOMContentLoaded",()=>new Main())
}
解説
ワイパーで汚れを拭い取って、中身が表示されるような表現なので、
曇りガラスを拭き取ったり、
何かを表示させるときの演出としては、かなり斬新な印象を与えられるので、かなりのインパクトがあるはずです。
技術的な内容としては、cssのmask機能と、svgのpathアニメーションを使って表現しています。
cssのmask機能について
cssのmask機能は、任意の画像を、アルファチャンネルとして表示することが手軽にできる機能ですが、それをsvgのpathを使って利用する事で、大画面でも対応できるマスク機能になります。
css:maskのリファレンスサイト
もちろん、gif画像を使ってアニメーションさせてもいいのですが、ファイル容量と、アニメーション粒度、ピクセル粒度などを考えるとsvgを使った方が圧倒的に良いです。
cssのmask機能は、HTMLに設置した、idを、以下のように指定するだけで、アルファチャンネル化させることができます。
mask:url(*idの値);
SVGアニメーション
svgファイルは、
BOXY SVG Editorを使うと、簡単に作成できます。
BOXY SVG Editorの使い方は、本家ページのチュートリアルか、以前ブログで書いたものを参照ください。
BOXY SVG Editor チュートリアル
過去ブログ記事
作成したpathをアニメーション化させるのも、良いサービスがあって、
「SVG Artista」を使うと、いとも簡単に作成することができます。
SVG Artista
SVGのPATHアニメーションは、pathの長さに応じて、設定値がわかるので、こうしたツールを使うことで、めちゃくちゃ効率よくデータ作成ができます。
あとがき
いかがでした？
今回は、大手企業のホームページでは、なかなか使うのを躊躇してしまうけど、
LPや、ちょっと変わったページを作りたい場合に、インパクトのある印象を与えることができる、CSS技を作ってみました。
こういうテクニックをたくさん持っておくと、ホームページの制作実績ポートフォリオもかなり楽しい感じになるでしょうよ。
0 件のコメント:
コメントを投稿