CSSでボールのバウンドとブレンドモードを使う
こんにちは。CSS のお時間がやってきました。
アニメーション
アニメーションによってユーザへリアクションを示せ、動きのあるアプリケーションとして魅せることができます。
前作はこちらです ↓
LINK葉っぱが下から上へ向かって色が塗られるア...こんにちは。CSS のお時間が...https://blog.isirmt.com/post/css_lea...
完成物
デモ
実際にアニメーションのデモンストレーションページを用意しました。
LINKBALL BOUNCE(Ball bou...ボールバウンドして背景を反転さ...https://isirmt.github.io/TemplateCSS...
↑よりぜひアクセスしてください。
ソースコード
にてアニメーションの全容を掲載しています。ご自由にお使いください。使う際にDelete HereとHeadのメタさえ消せば直ぐに利用可能です。
表現について
オブジェクトの内側だけ色が変わっている、という表現は個人的に好きな表現です。ブレンドの設定もCSSでは変えることができ、表現の拡張が可能です。
作成
HTML
<div class="container">
<div class="text">TEXT</div>
<div class="ball"></div>
</div>今回はこれだけで作ります。サイズさえ調整すれば簡単に使うことができます。
ベース部分のCSS
一度.ball以外は用意しておきましょう。
.container {
position: relative;
width: 20rem;
height: 16rem;
background-color: white;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
// お好みで
.text {
font-family: sans-serif;
font-size: 80px;
font-weight: bold;
}.textはテキストでマスクしたり自由なもので結構です。写真をマスクすると映えたり...?
.containerはコンテンツ中央縦配置を行っています。
ボールの作成
重力落下は JS の制御が正確ですが、(a = 9.8 (m/s)的な？) 今回はCSSでそれっぽいものを作ります。
まずはキーフレームと関連プロパティを。
.ball {
animation: bounce 1s cubic-bezier(.56, 3.51, .15, 1) forwards;
}
@keyframes bounce {
0% {
bottom: 100%;
}
100% {
bottom: 50%;
}
}keyframesは上から中央に向かって下がるだけのコードに見えます。ここで、cubic-bezierの出番です。
- cubic-bezier(3次ベジェ曲線)
出典：
パラメータにはP1とP3の x, y 座標入力することcで関数を作成できます。この値は[0:1]を超えて入力可能なため疑似的なバウンドを実現しました。
挙動はここで確認や編集が可能です。
アニメーションは複数組み合わせることができます。書き方はtransitionプロパティと同じでカンマ区切りで実現可能です。
ボールをコンテンツいっぱいまで拡張するアニメーションを遅延付きで導入します。
.ball {
animation: bounce 1s cubic-bezier(.56, 3.51, .15, 1) forwards, size .5s forwards .9s;
}
@keyframes size {
0% {
width: 2rem;
height: 2rem;
left: calc(50% - 1rem);
border-radius: 2rem;
}
100% {
width: 100%;
height: 100%;
bottom: 0%;
left: 0%;
border-radius: 0;
}
}また、ボールのCSSも記載します。
.ball {
position: absolute;
width: 2rem;
height: 2rem;
background: #ffffff;
border-radius: 2rem;
left: calc(50% - 1rem);
z-index: 10;
mix-blend-mode: exclusion;
animation: bounce 1s cubic-bezier(.56,3.51,.15,1) forwards, size .5s forwards .9s;
}position: absoluteなので、transform制御ではなく、bottomを使いました。
最後に
逆のマスクをやってみたいです。テキストで画像を切り抜くのではなく、コンテンツ内を特定の画像でマスクし、文字の内側だけ下の背景が映っているような。
<div>
<img>
<p>TEXT</p>
<mask> ←
</div>img を absolute で配置してテキストを中央に配置し、maskでテキスト以外を上から塗りつぶすような表現をしてみたいですね。(言語化が合っているか分からない)
もし、良い方法等ありましたらコメントお願いします(^▽^)/
