HTML
CSS
tweenmax

最近よく見る斜め背景を作ってみた

はじめに

最近のwebサイトで背景が「斜め」になっているサイトをよく見る気がします。
[背景 斜め css js]...など検索して一度挫折しました...がやっぱり気になる!!
どんな実装しているのか?? と思い、わからないなりに実装してみました。

参考にしたページ
斜め背景でカッコいいフロントエンドデザイン

今回作ったデモ

デモのコード

index.html
<div class="contents">
  <div class="naname naname--left slideOn">
    <div class="naname__bg naname__bg--left slideBox-left"></div>
    <p class="naname__text naname__text--left">TRUNK CAMP</p>
  </div>
</div>
<div class="naname naname--right slideOn">
  <div class="naname__bg naname__bg--right slideBox-right"></div>
  <p class="naname__text naname__text--right">TRUNK CAMP</p>
</div>
.
.

leftとrightを交互に配置していきます。

style.css
.contents {
  overflow: hidden;
 }
.naname {
  width: 120%;
  height: 700px;
  position: relative;
  z-index: -1;
 } 
.naname__bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  content: ""
 }
.naname__bg--right {
  background-color: orange;
  margin-left: 30%
 }
.naname__bg--left {
  background-color: red;
  margin-left: 60%
 }
.naname__text {
  text-align: center;
  font-size: 90px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%
 }
.naname__text--right {
  transform: rotate(-5deg) translateX(-65%) translateY(-180%)
 }

.naname__text--left {
  transform: rotate(5deg) translateX(-65%) translateY(-80%)
 }
 .naname--right {
  background-color: #111;
  transform: rotate(5deg);
  margin-left: -50px;
  margin-top: -150px
 }

.naname--left {
  background-color: blue;
  transform: rotate(-5deg);
  margin-left: -50px;
  margin-top: -200px
 }    

これで土台を作成(無駄なコードがあったらごめんなさい。。。)
イメージ的に横長の箱をtransformで斜めにして、marginで強引に引っ張ってくる感じ。

おまけ

app.js
$(function() {
    const slideOn = $('.slideOn');
    slideOn.on('inview', function() {
        const slideBoxL = $(this).find('.slideBox-left');
        const slideBoxR = $(this).find('.slideBox-right');
        TweenMax.to(slideBoxL, 1, {
          "margin-left": '0',
          delay: .8,
          ease: Power2.easeOut
        }),
        TweenMax.to(slideBoxR, 1.5, {
          "margin-left": '130%',
          delay: 1,
          ease: Power2.easeOut
        })
    });
});

今回はTweenMaxとinview.jsを使って即席でアニメーションをつけてみました。(これも最近よく見るよね...)

まとめ

ベストプラクティスかと言われれば、そんな気がしないコードですが、改善改良をして参考程度になると嬉しいです!