先日（２週間ほど前）、このブログのネタとして作ったロゴが、個人的になんとなく
気に入っていて、
そのロゴのクリンと土星の輪みたくなっているところを
アニメーションさせたくて仕方がなくなってきたので、
今回は、これまであまり使ったことがないoffset-pathというcssの機能を使いこなして
土星の輪っかアニメーションを作ってみたいと思います。
先日のブログリンク
BoxySVGでロゴ作りチュートリアル
デモ
いきなり完成形をお見せします。
いかがですか？
色やグラデーションなども含めて、いろいろなテクニックが入っていて、コレCSSだけでできちゃうので、覚えておくと効果的なWebデザインが作れちゃうかもね。
ソースコード
ring.html
<div class="ring-area">
<div class="ring" id="path"></div>
<div class="atom"></div>
</div>
ring.css
.ring-area,
.ring-area *,
.ring-area *::before,
.ring-area *::after{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
.ring-area{
--size-ring : 400px;
--size-atom : 30px;
--border : 20px;
position:relative;
width:var(--size-ring);
height:var(--size-ring);
max-width:90vw;
max-height:90vw;
transform: rotate(45deg);
margin:0 auto;
}
.ring{
width : 100%;
height : 100%;
clip-path:circle();
background: linear-gradient(#3e1485, #007a7d);
mask-image: radial-gradient(transparent calc(var(--size-ring) / 2 - var(--border)), black calc(var(--size-ring) / 2 - var(--border)));
transform : scale(0.4, 1.0);
position:absolute;
top:0;
left:0;
}
.atom{
position:absolute;
top : 0;
left : 0;
width : var(--size-atom);
height : var(--size-atom);
background-color:#3e1485;
border:4px solid white;
border-radius:50%;
transform:translate(0, 25%);
offset-path : ellipse(20% 50%);
animation : ring-move 3.0s cubic-bezier(0.59, 0.26, 0.52, 0.85) 0.0s infinite;
}
@keyframes ring-move{
to{
offset-distance: 100%;
}
}
@media (max-width:400px){
.ring-area{
--border : 70px;
}
}
使われているテクニックの解説
今回このアニメを実装したいと思いついた時から、実際にCSSだけで実現するまでにいくつかのテクニックを組み合わせないといけなかったので、その内容を解説しておきます。
- 円形の切り抜きは、border-radiusじゃなくて、clip-pathを使うべし
- 中のくり抜き処理は、mask-imageを使うべし
- 楕円を作る構造体は、transformを使うべし
- 円周を沿って動く衛星アニメは、offset-pathを使うべし
円形の切り抜きは、border-radiusじゃなくて、clip-pathを使うべし
丸くくり抜いた要素を使う時に、
border-radius:50%;とすると簡単にきれいなまんまるな形状を作ることができますが、
どうやら、
clip-path:circle();としても同じ結果が得られるようです。
この２つの違いは、縦横比が違う要素を比率に合わせて丸くしたい場合は、border-radiusで、まんまるにくり抜きたい時はclip-pathのcircleを使うと良いでしょう。
border-radius:50%
width:200px;
height:100px;
background-color:black;
border-radius:50%;
clip-path:circle()
width:200px;
height:100px;
background-color:black;
clip-path:circle();
中のくり抜き処理は、mask-imageを使うべし
borderラインを単色で表示したい場合は、くり抜きなどは使わなくてもいいんですが、デモのようにグラデーションを装飾したい場合は、borderラインの部分を残すように、くり抜きを行わなければいけません。
borderライン部分に装飾をする裏技などもいくつかありますが、今回の場合はこの方法が一番やりやすかったです。
そして、上記のclip-pathは、外側のくり抜きをする処理なのですが、内側のくり抜きをするには、
mask-imageを使うのがいいでしょう。
mask-imageは、urlを使って、別の画像を重ねて色彩値によるオーバーレイみたいな効果が出せる機能なのですが、今回はこれを、グラデーションを使って円形でくり抜くやり方で実装しています。
mask-image: radial-gradient(transparent calc(var(--size-ring) / 2 - var(--border)), black calc(var(--size-ring) / 2 - var(--border)));
--size-ringが円形のサイズで、
--borderが枠線の太さを、cssのプロパティ変数でセットしています。
直接数値を登録してもいいので、このやり方で円形くり抜きができるので、便利に使えると思います。
楕円を作る構造体は、transformを使うべし
次に、くり抜いたドーナツ型の丸をパースが付いたように変形するには、その要素をそのまま、サイズ変形しただけじゃ、パース変形をしてくれません。
簡単に下記のようにすることで、楕円変形が作れますよ。
楕円サンプル
width:200px;
height:200px;
background-color:black;
border-radius:50%;
mask-image: radial-gradient(transparent 80px, black 80px);
transform: rotate(45deg) scale(0.3, 1.0);
円周を沿って動く衛星アニメは、offset-pathを使うべし
最後に作った楕円に沿って要素を動かすには、指定したパスの開始ポイントから終了ポイントまで、バンク配置してくれる
offset-pathという機能を使うと簡単に実装できます。
ただし、実際に表示している要素をそのままパスとして利用することはできなくて、自分でsvgのpathと同じ記述をcss内で行う必要があります。
それをさらに、
offset-distance: 50%;という命令で、0%がパスの開始ポイント100%がパスの終了ポイントで、スライドすることができるので、これを
@keyframesでアニメさせてやります。
今回のように、単純な形であればcssだけで実装できますが、複雑な形状に沿ってアニメさせたい場合は、svgを読み込んでその中のpathタグにidをセットしておいて、urlで指定するという事も可能なので、アイデア次第で表現は無限大です。
四角形を移動するパスアニメ
.offset-1{
width:150px;
height:150px;
border:1px solid red;
margin:10px;
position:relative;
}
.offset-1::before{
content:"";
display:block;
width:20px;
height:20px;
background-color:blue;
position:absolute;
top:0;
left:0;
offset-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
animation : ring-move 3.0s linear 0.0s infinite;
}
@keyframe offset-1-anim{
to{
.offset-1::before{
offset-distance: 100%;
}
}
}
あとがき
使った事が無い機能を使う時は、リファレンスサイトを熟読しますが、なかなか自分が思った通りのサンプルや解説が書かれていないことも多いです。
そんな時は、ネットで色々なサイトに行って、サンプルをあさって、自分がやりたいことができるソースをみつけたり、ひたすら自分で変数を変えながらトライすることが多いのですが、
今回もそんなトライ系で根気よくゴールまで辿り着くことができました。
いや〜、デジタルの作業って結構、やる気と根気と元気が重要だと、改めて認識！
0 件のコメント:
コメントを投稿