SCSS(カバースライド)

コメントを残す

カバースライドアニメーションを作る

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
<!-- ホバーしたときに暗くする -->
    <!-- <div class="cover-slide hover-darken inview">
<img class="img-zoom" src="images/image-1.jpg" alt="">
  </div> -->
<!-- アス比を保ちたいときの設定 -->
  <div class="cover-slide hover-darken inview">
  <div class="bg-img-zoom img-bg50"></div>
  </div>
  </div>
</body>
</html>

mixinの記述

@mixin animation($name, $duration: 1s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: forwards) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
 }
}

SCSSの記述

@import "mixin";

// 画像のズレを修正する設定
img {
// 画像の横幅をWindowのサイズと同じにする
  max-width: 100%;
// 画像とのズレ(余白)を解消する
  vertical-align: bottom;
}
.cover-slide {
  position: relative;
// パン(拡大)したときの余分な部分をカット
  overflow: hidden;

  &::after {
// 疑似要素に必須の設定
    content: "";
    position: absolute;
    z-index: 2;
// 画像に必要な設定
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
// ココまで
    background-color: #eaebe6;
    opacity: 0;
    }
  &.inview {
  &::after {
  opacity: 1;

  @include animation(
    $name: kf-cover-slide,
    $duration: 1.6s,
    $timing-function: ease-in-out
);
  }
 }
}

// アニメーションに最適なプロパティ(パフォーマンスが良い)
  @keyframes kf-cover-slide {
  0% {
// アニメーションの起点の設定
    transform-origin: left;
    transform: scaleX(0);
}
  50% {
    transform-origin: left;
    transform: scaleX(1);
}
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
}
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.img-zoom {
// 初期状態は透明にする
  opacity: 0;

.inview & {
// inviewが発火されたとき透明度解除しつつ、アニメーション
  opacity: 1;
  transition: transform 0.3s ease;
  @include animation(
    $name: kf-img-show,
    $duration: 1.6s,
    $timing-function: ease-in-out,
// アニメーションが終わったときの設定を残さない(解除)
    $fill-mode: normal
);
// ホバーしたときに拡大するようにする
  &:hover {
    transform: scale(1.05);
  }
 }
}

  @keyframes kf-img-show {
  0% {
    opacity: 0;
}
  50% {
    opacity: 0;
}
// 50％になってからパン(拡大)した画像を出したいので
  50.1% {
    opacity: 1;
    transform: scale(1.5);
}
  100% {
    opacity: 1;
 }
}
// ホバーしたときに暗くする設定
  .hover-darken {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
// 画像の上に表示したい
    z-index: 4;
    transition: background-color 0.3s ease;
    pointer-events: none;
  @include animation(
    $name: kf-img-show,
    $duration: 1.6s,
    $timing-function: ease-in-out,
    $fill-mode: normal
);
}
  &:hover::before {
    background-color: rgba(0, 0, 0, 0.4);
 }
}
// .bg-img-zoomを使うときの設定
  .bg-img-zoom {
     background-image: url(images/run.jpg);
// リピートなし
     background-repeat: no-repeat;
// ポジションをセンター
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 400px;
// 上(80行目)の.img-zoomの設定を読み込む
     @extend .img-zoom
}

.img-bg50 {
  position: relative;
// アスペクト比を保ちたいときの設定
  &::before {
    display: block;
    content: '';
    padding-top: 50%;
 }
} 

// アニメーションに最適でないプロパティ
// @keyframes kf-cover-slide {
// 0% {
// left: 0;
// right: 100%;
// }
// 50% {
// left: 0;
// right: 0;
// }
// 100% {
// left: 100%;
// right: 0;
// }
// }

コメントを残すコメントをキャンセル