こんにちは、keishibukiでございます。 最近「斜め背景をガーッとペンキを塗るような感じでアニメーションさせて!」 という依頼がありました。 それって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">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。こ
![【斜め背景】CSS+jQueryでペンキを塗るようなアニメーションを簡単実装! | スタッフブログ | 株式会社クーネルワーク](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d098b406c7e0640bb68739d2c357dcff63083f7/height=288;version=1;width=512/https%3A%2F%2Fcunelwork.co.jp%2Fwp-content%2Fuploads%2Fbuki_008_01.png)