パーツ番号 02-08-03 ・ JavaScript使用
スクロール連動マーカー下線
重要キーワードの下線が、その行が所定の位置までスクロールされるにつれて滑らかに伸びていきます。強み紹介文やサービス訴求のキーワード演出に効果的です。
プレビュー
ソースコード
HTML
<div class="d02-08-03-stage">
<span class="d02-08-03-hint">↓ scroll</span>
<div class="d02-08-03-scroll">
<div class="d02-08-03-pad-top"></div>
<p class="d02-08-03-text">私たちが大切にしているのは、<span class="d02-08-03-mark">誠実な対応</span>と<span class="d02-08-03-mark">圧倒的なスピード</span>、そして<span class="d02-08-03-mark">お客様に寄り添う姿勢</span>です。この3つを軸に、日々サービスを磨き続けています。</p>
<div class="d02-08-03-pad-bottom"></div>
</div>
</div>CSS
.prev.d02-08-03{padding:0;display:block}
.d02-08-03-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
.d02-08-03-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
.d02-08-03-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 24px}
.d02-08-03-pad-top{height:60px}
.d02-08-03-pad-bottom{height:130px}
.d02-08-03-text{margin:0;font-size:15px;line-height:2.1;color:#475569}
.d02-08-03-mark{
position:relative;font-weight:700;color:#1a2333;padding:0 .05em;
}
.d02-08-03-mark::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:7px;
background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:3px;z-index:-1;
transform:scaleX(var(--p,0));transform-origin:left center;
}JavaScript
(function(){
var stage = document.querySelector('#item-02-08-03 .d02-08-03-stage');
var scroller = document.querySelector('#item-02-08-03 .d02-08-03-scroll');
if(!stage || !scroller) return;
var marks = scroller.querySelectorAll('.d02-08-03-mark');
function update(){
var stageRect = stage.getBoundingClientRect();
for(var i = 0; i < marks.length; i++){
var rect = marks[i].getBoundingClientRect();
var progress = ((stageRect.height * 0.72) - (rect.top - stageRect.top)) / (rect.height + 50);
progress = Math.min(Math.max(progress, 0), 1);
marks[i].style.setProperty('--p', progress.toFixed(3));
}
}
scroller.addEventListener('scroll', update, {passive:true});
update();
})();クラス名 .d02-08-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。