【斜め背景】CSS+jQueryでペンキを塗るようなアニメーションを簡単実装!

153 view

こんにちは、ぶっきーでございます。
最近「斜め背景をガーッとペンキを塗るような感じでアニメーションさせて!」
という依頼がありました。

それってjavascriptとかゴリゴリに書かないと実装出来ないのでは?と思っていたのですが、思いの外CSSとjQueryの簡単な記述だけで作れました。

かなり簡単なので是非お試しあれ!

まずは斜め背景を作ってみよう!

下記のような形になります。

HTML

<div id="main">
<div class="layer-01"></div>
<div class="layer-02"></div>
<div class="content-width">
<div class="container">
<h1>コンテンツ</h1>
<p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
<p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
<p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</div>
</div>
</div><!-- #main -->

CSS

#main {
position: relative;
overflow: hidden;
}
#main .layer-01,
#main .layer-02 {
display: block;
content: "";
position: absolute;
top: 0; 
width: 100%;
height: 100%;
opacity: .3;
}
#main .layer-01 {
left: 0; 
background-color: #ff0;
z-index: 1;
-webkit-transform: skewY(28deg) skewX(-28deg) translateX(0);
transform: skewY(28deg) skewX(-28deg) translateX(0);
}
#main .layer-02 {
right: 0;
height: 140%;
background-color: #f00;
z-index: 2;
-webkit-transform: skewY(118deg) skewX(24deg) translateX(0);
transform: skewY(118deg) skewX(24deg) translateX(0);
}
#main .container {
position: relative;
z-index: 3;
}

斜め背景を作るポイントは「skew」の指定です。
角度を指定するもので「rotate」というものがありますが、こちらは対象を回転させるのに対して、「skew」は対象を傾斜させます。

「rotate」と「skew」の違い

「rotate」

ウィンドウ幅が狭いとき

ウィンドウ幅が広いとき

「skew」

ウィンドウ幅が狭いとき

ウィンドウ幅が広いとき

「rotate」はウィンドウ幅が広いとき、狭いときで斜め背景の表示が違いますが、「skew」はウィンドウ幅を広げても狭めても表示は同じです。

背景に使う時にはどんなウィンドウ幅でも同じ表示をさせたい場合が多いと思います。
そんな時は「skew」を使用しましょう!

アニメーションさせてみよう!

斜め背景が実装できたところで本題のアニメーションを実装してみましょう。

CSS

先程のCSSを下記のように修正してください。

#main {
position: relative;
overflow: hidden;
}
#main .layer-01,
#main .layer-02 {
display: block;
content: "";
position: absolute;
top: 0; 
width: 100%;
height: 100%;
opacity: .3;
}
#main .layer-01 {
left: 0; 
background-color: #ff0;
z-index: 1;
-webkit-transform: skewY(28deg) skewX(-28deg) translateX(-100%);
transform: skewY(28deg) skewX(-28deg) translateX(-100%);
transition: .5s all ease-in;
}
#main .layer-02 {
right: 0;
height: 140%;
background-color: #f00;
z-index: 2;
-webkit-transform: skewY(118deg) skewX(24deg) translateX(-100%);
transform: skewY(118deg) skewX(24deg) translateX(-100%);
transition: 1s all ease-in;
}
#main .container {
position: relative;
z-index: 3;
}
/* 追加 */
#main .layer-01.is-active {
-webkit-transform: skewY(28deg) skewX(-28deg) translateX(0);
transform: skewY(28deg) skewX(-28deg) translateX(0);
}
#main .layer-02.is-active {
-webkit-transform: skewY(118deg) skewX(24deg) translateX(0);
transform: skewY(118deg) skewX(24deg) translateX(0);
}

斜め背景をtranslateX(-100%)で画面外に置いておきます。
その背景に「is-active」クラスが付与された段階で元の位置までアニメーションします。

アニメーション部分はこれで終わりました。
あとはjQueryで「is-active」クラスを付与するだけです。

jQuery

jQuery(function($){
$(window).on('load', function(){
$('.layer-01').addClass('is-active').delay(500).queue(function() {
$('.layer-02').addClass('is-active').dequeue();
});
});
});

画面が読み込まれた際に「.layer-01」に「is-active」クラスを付与、500ミリ秒後に「.layer-02」にも「is-active」を付与するという記述です。

addClassにはdelay()は本来効かないですが、上記記述のqueue()とdequeue()を追加することによってdelay()が効くようになります。

完成形

ボタンをクリックするとアニメーションが始まります。

最後に

今回は画面が読み込まれた際に「is-active」を付与しアニメーションを開始していましたが、jQueryの記述を変更すれば「スクロールした時」や「画面をリサイズした時」など、色々なタイミングで制御できます。

簡単に実装出来るので是非お試しください。

WRITER

ぶっきー

制作 ぶっきー

新潟生まれ、新潟育ちの新潟Boy。
95年生まれのラストゆとり世代。

専門学校に通いながらアルバイトとして働いていたが、
2017年度の春で晴れて正社員にランクアップ。