マーカーが伸びて文字が現れる

2023年10月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、うまく表現できないのですが「マーカーがシュッと伸びて消えた後に文字が現れるアレ」をやってみたいと思います。

参考：動くWebデザインアイディア帳｜シャッ（CSS）

参考：動くWebデザインアイディア帳｜jQueryとCSSを組み合わせてスクロールをしたら要素を動かす

画面読み込み時

参考元サイトの「左から」を真似してみます。

<div class="bgextend bgLRextend">
  <span class="bgappear">文字が現れる</span>
</div>

.bgextend {
  padding: 0 20px;
  box-sizing: border-box;
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  display: inline-block;
  overflow: hidden;
  opacity:0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;  
  }
}

.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
	}
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

スクロールに応じて発動

さっきのHTMLとCSSに追記します。

<div class="bgextend bgLRextendTrigger">
  <span class="bgappearTrigger">文字が現れる</span>
</div>

.bgappearTrigger, .bgLRextendTrigger {
  opacity: 0;
}

クラスの付け外しの設定をします。

function fadeAnime(){
  $('.bgLRextendTrigger').each(function(){
    var elemPos = $(this).offset().top+100;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight){
      $(this).addClass('bgLRextend');
    }else{
      $(this).removeClass('bgLRextend');
    }
  });

  $('.bgappearTrigger').each(function(){
    var elemPos = $(this).offset().top+100;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight){
      $(this).addClass('bgappear');
    }else{
      $(this).removeClass('bgappear');
    }
  }); 
}

$(window).scroll(function (){
  fadeAnime();
});

$(window).on('load', function(){
  fadeAnime();
});

まとめ

本当よくできてるなぁ。今は真似するのが精一杯です。

色を変えて蛍光ペン風にしてみたいです！