こんにちは、Ryohei(@ityryohei)です! ボックスがスライドインで表示された後、重なり要素(マスク)がスライドアウトするアニメーションのご紹介です。 ページを下にスクロールしていくと、ボックスがスライドインで表示されます。その後、グラデーションの要素がスライドアウトしてコンテンツが表示されるアニメーションになります。 具体的には、下記のデモのような処理となります。 See the Pen Box Slide In Animation | jQuery by ryoy (@intotheprogram) on CodePen. 最近、このタイプのアニメーションが流行しているみたいで、似た表現を取り入れたサイトをよく見かけます。 今回、私なりに「こんな感じで実装しているのかな?」と考えながら、CSSとjQueryでスライドインアニメーションを実装してみました。同様の処理を検討して
![【CSS/JS】スライドイン表示後にマスクがスライドアウトするアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/e82fae9f44f5c16d6e86cb0772e2c0b76d2f028b/height=288;version=1;width=512/https%3A%2F%2Finto-the-program.com%2Fuploads%2Fslidein.jpg)