スクロールアニメーション18

$BLOCK_KV_NAME: '.scroll-anim-18-kv';
$BLOCK_HEADER_NAME: '.scroll-anim-18-header';

// 変数
$color_primary: #2c2929;
$color_white: #fff;
$height_header: 80px;
$shadow_header: 0 5px 25px rgba(86, 49, 56, 0.15),
  0px 0px 8px rgba(86, 49, 56, 0.15);
$ff_serif: 'Noto Serif JP', Garamond, 'Yu Mincho', 'YuMincho', 'Meiryo',
  sans-serif;
$ff_sans_serif: 'Open Sans', 'Yu Gothic', '游ゴシック', 'YuGothic',
  '游ゴシック体', Hiragino Kaku Gothic ProN, 'Meiryo', sans-serif;

#{ $BLOCK_KV_NAME } {
  position: relative;
  height: calc(100vh - #{$height_header});
  overflow: hidden;
  background: $color_white;

  &__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  &__slider-item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    animation: 6s ease-out forwards;
    &.is-active {
      z-index: 2;
      animation-name: anim18ShowImage;
    }
    &.is-leave {
      z-index: 2;
      animation-name: anim18HideImage;
    }
  }

  &__img-wrapper {
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: -50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    animation: inherit;
    animation-timing-function: linear;
    @at-root #{ $BLOCK_KV_NAME }__slider-item.is-active & {
      animation-name: anim18SlideIn;
    }
    @at-root #{ $BLOCK_KV_NAME }__slider-item.is-leave & {
      animation-name: anim18SlideOut;
    }
  }

  &__img {
    display: none;
  }
}

#{ $BLOCK_HEADER_NAME } {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  height: $height_header;
  font-family: $ff_serif;
  background: $color_white;
  box-shadow: $shadow_header;

  &__nav {
    display: flex;
    height: $height_header;
    font-size: 12.5px;
  }

  &__nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px 16px;
    &::before {
      position: absolute;
      right: 16px;
      bottom: 20px;
      left: 16px;
      height: 1px;
      content: '';
      background: $color_primary;
      transition: 0.2s ease-out;
      transform: scale(0);
      transform-origin: left;
    }
    &:hover::before {
      transform: scale(1);
    }
  }

  &__btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: $height_header;
    font-family: $ff_sans_serif;
    font-size: 13px;
    color: $color_white;
    text-align: center;
    background: $color_primary;
    &:hover {
      color: $color_white;
    }
  }
}

@keyframes anim18ShowImage {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim18HideImage {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes anim18SlideIn {
  0% {
    transform: translate3d(50px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim18SlideOut {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50px, 0, 0);
  }
}