マーカーが伸びて文字が現れる
Web
2023年10月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、うまく表現できないのですが「マーカーがシュッと伸びて消えた後に文字が現れるアレ」をやってみたいと思います。
参考:動く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();
});
文字が現れる
まとめ

本当よくできてるなぁ。今は真似するのが精一杯です。
色を変えて蛍光ペン風にしてみたいです!