Fade Images

HTML -共通-

          
<div class="anime-wrapper pattern-one">
  <img src="img/building-1920.jpg" alt="画像">
  <p>Animation Scene1</p>
</div>

SCSS -共通-

          
.anime-wrapper{
  position:relative;
  overflow: hidden;
  text-align: center;
  img{
    width:80%;
  }
  p{
    position:absolute;
    top:30px;
    left:160px;
    font-size: 3rem;
    font-weight: bold;
    color: #f7eff1;
  }
}

01 - TopContents

標準フェードイン

Animation Scene1

SCSS

          
.pattern-one{
  img{
    opacity:0;
    transition:0.7s;
    transition-delay: 1s;
  }
  p{
    opacity:0;
    transition:0.7s;
    transition-delay:1s;
  }
  &.show{
    img,
    p{
      opacity: 1;
      transition-delay:1s;
    }
  }
}

TIPs.DESIGN

02 - TopContents

横方からスライドイン

Animation Scene2

SCSS

      
// 2横からスライドイン
.pattern-two{
  img{
    opacity: 0;
    // 右方向にセット
    transform:translateX(40px);
    transition-delay: 1s;
    transition:0.7s;
  }
  p{
    opacity: 0;
    //左方向にセット
    transform:translateX(-40px);
    // 1秒待つ
    transition-delay: 1s;
    //0.7sかけて表示
    transition:0.7s;
  }
  &.show{
    img,
    p{
      opacity: 1;
      transform:translateX(0);
    }
  }
}

TIPs.DESIGN

03 - TopContents

下方からスライドイン

Animation Scene3

SCSS

      
// 3下からスライドイン
.pattern-three{
  img{
    opacity:0;
    //下方向にセット
    transform:translateY(40px);
    transition-delay: 1s;
    transition:0.7s;
  }
  p{
    opacity:0;
    //下方向にセット
    translate:translateX(40px);
    transition-delay: 1s;
    transition:0.7s;
  }
  &.show{
    img,
    p{
      opacity:1;
      transform:translateX(0);
    }
  }
}

TIPs.DESIGN

04 - TopContents

ズームイン

Animation Scene4

SCSS

      
// 4 大->小
.pattern-four{
  img{
    opacity: 0;
    // 1.2倍から等倍へ
    transform:scale(1.2);
    transition: 0.7s;
  }
  p{
    opacity: 0;
    // 左方向にセット
    transform: translateX(-40px);
    transition-delay:1s;
    transition:0.7s;
  }
  &.show{
    img{
      opacity: 1;
      //等倍
      transform:scale(1);
    }
    p{
      opacity: 1;
      transform:translateX(0);
    }
  }
}

TIPs.DESIGN

05 - TopContents

スクリーンが横切る

Animation Scene5

SCSS

      
// 5 いったん隠してから表示
.pattern-five{
  img{
    opacity:0;
    transition:0.7s;
  }
  p{
    opacity: 0;
    // 左方向にセット
    transform:translateX(-40px);
    transition-delay:1s;
    transition:0.7s;
    z-index: 1;
    overflow: hidden;
    
    &::before{
      content:"";
      width:100%;
      height:100%;
      position:absolute;
      left:0;
      top:0;
      background-color:#fff;
      transition-delay:1s;
      transition:0.7s;
    }
  }
  &::before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    background-color:#fff;
    z-index:1;
    transition:0.7s;
  }
  &.show{
    &::before{
      transform:translateX(100%);
    }
    img{
      opacity: 1;
    }
    p{
      &::before{
        transform:translateX(100%);
      }
      opacity:1;
      transform:translateX(0);
    }
  }
}

TIPs.DESIGN

06 - TopContents

叩きつけ

Animation Scene6

SCSS

      
// 6 
.pattern-six{
  img,
  p{
    opacity:0;
  }
  &.show{
    img,
    p{
      transform:scale(1);
      animation: ready 0.7s;
      animation-delay:0.7s;
      animation-fill-mode:forwards;
    }
  }
}
@keyframes ready {
  0%{transform: scale(5); opacity:0;}
  60%{transform: scale(1); opacity:1;}
  65%{transform:translate(0px, 0px) rotateZ(0deg); opacity:1;}
  75%{transform:translate(2px, 2px) rotateZ(1deg); opacity:1;}
  85%{transform:translate(0px, 2px) rotateZ(0deg); opacity:1;}
  95%{transform:translate(2px, 0px) rotateZ(-1deg); opacity:1;}
  100%{transform:translate(0px, 0px) rotateZ(0deg); opacity:1;}
}

TIPs.DESIGN