【コーディング練習用】スクロールで追従している要素の色を変えたり任意の場所で止める
JavaScriptのgetBoundingClientRect()やwindow.scrollYなどを使用してposition:fixed;の要素の色を変えたり、任意の位置で止めたりしてみます
要素のスクロール位置を取得してなんやかんやするのはWeb制作のコーディングにおいても頻出です
デザインデータも配布していますのでぜひ自分でもやってみてください！！
デザインデータ（Googleドライブ）
なんかファイルが見えてるけどそのままダウンロードすればXDとして開けます
let title;
let title_en;
let title_ja;
let sec02;
let dummy;
title = document.querySelector('.title')
title_en = document.querySelector('.title .en')
title_ja = document.querySelector('.title .ja')
sec02 = document.querySelector('.sec02')
dummy = document.querySelector('.dummy')
function setPos() {
title_pos = title.getBoundingClientRect().top;
title_en_pos = title_en.getBoundingClientRect().top + (title_en.clientHeight / 2);
title_ja_pos = title_ja.getBoundingClientRect().top + (title_ja.clientHeight / 2);
sec02_pos = sec02.getBoundingClientRect().top + window.scrollY;
dummy_pos = dummy.getBoundingClientRect().top + window.scrollY;
}
document.addEventListener('DOMContentLoaded', function () {
setPos()
})
window.addEventListener('load', function () {
setPos()
})
window.addEventListener('resize', function () {
setPos()
})
window.addEventListener('scroll', function () {
if (window.scrollY + title_en_pos >= sec02_pos) {
title_en.classList.add('active')
} else {
title_en.classList.remove('active')
}
if (window.scrollY + title_ja_pos >= sec02_pos) {
title_ja.classList.add('active')
} else {
title_ja.classList.remove('active')
}
if (window.scrollY + title_pos >= dummy_pos) {
title.classList.add('active')
} else {
title.classList.remove('active')
}
});<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
</title>
<link rel="shortcut icon" href="assets/images/favicon.png">
<meta name="format-detection" content="telephone=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<section class="sec01">
<img src="assets/images/bg1.jpg" alt="" width="743" height="770">
</section>
<section class="sec02">
<div class="inner">
<h1 class="title">
<span class="en">
<svg xmlns="http://www.w3.org/2000/svg" width="829.68" height="83.64" viewBox="0 0 829.68 83.64">
<g id="グループ_3" data-name="グループ 3" transform="translate(-187.8 -344)">
<path class="step" id="パス_2" data-name="パス 2" d="M4.8-7.2A55.881,55.881,0,0,0,16.92-.84,42.782,42.782,0,0,0,32.64,1.8c8.52,0,16.8-1.32,23.64-8.16,5.76-5.76,7.56-12.84,7.56-20.16,0-5.52-1.08-9.96-5.16-14.28-4.2-4.56-9.48-6.36-14.52-7.92L37.8-50.64c-4.92-1.44-6.36-2.88-6.96-3.6a5.354,5.354,0,0,1-1.08-3.6,5.923,5.923,0,0,1,2.04-4.32,9.968,9.968,0,0,1,6.84-2.4c2.76,0,7.44.48,13.68,5.4l8.28-16.2c-7.56-3.96-16.8-6.48-24.72-6.48-9.72,0-16.44,3.48-20.52,7.56C11.88-70.8,8.04-64.8,8.04-54.96c0,4.08.48,9.72,4.56,14.16,3.24,3.6,8.16,5.4,11.52,6.48l5.4,1.68c5.16,1.56,8.28,2.4,10.32,4.2a6.253,6.253,0,0,1,2.28,4.8,7.158,7.158,0,0,1-2.04,5.04c-1.32,1.44-3.84,2.76-8.04,2.76-7.2,0-13.92-3.96-18.36-8.16ZM124.2-62.4V-80.04H69.36V-62.4H86.4V0h20.76V-62.4Zm54.72-17.64H133.44V0h45.48V-17.64H154.2v-13.8h23.4V-49.08H154.2V-62.4h24.72Zm47.04,53.52c6.24,0,13.68-.84,19.92-6.96s7.08-13.56,7.08-19.92c0-6.72-1.2-13.44-7.44-19.44-6.12-5.88-13.32-7.2-20.28-7.2H192.12V0h20.76V-26.52ZM212.88-63.24h7.08c2.64,0,6.48.36,8.88,2.88,2.16,2.16,2.4,5.04,2.4,7.2,0,1.92-.12,5.16-2.64,7.32-2.52,2.28-6.6,2.52-8.76,2.52h-6.96ZM325.32,0c9.84,0,17.4-3.12,21.72-7.56,3-3,5.88-8.16,5.88-15.72,0-6.36-2.16-11.52-5.4-14.64a19.9,19.9,0,0,0-10.92-4.8,12.6,12.6,0,0,0,6.48-6.24,20.745,20.745,0,0,0,2.28-9.84c0-7.08-2.16-12-4.92-15-4.92-5.4-11.76-6.24-17.52-6.24H291.96V0Zm-12.6-64.08h3.84c4.08,0,6.6,1.08,7.92,2.4a8.228,8.228,0,0,1,1.92,5.4A7.754,7.754,0,0,1,324.48-51c-2.16,2.28-5.76,2.52-7.92,2.52h-3.84Zm0,31.08h4.32c5.16,0,10.32.12,12.84,2.64a8.134,8.134,0,0,1,2.04,5.76,7.786,7.786,0,0,1-1.68,5.16c-2.28,2.64-7.08,3.24-12.84,3.24h-4.68ZM379.2,0h20.88V-38.4l29.88-41.64h-25.2L390.24-58.2,375.12-80.04H350.28L379.2-38.4Z" transform="translate(183 425.84)"/>
<path class="work" id="パス_1" data-name="パス 1" d="M456.48-80.04,480.36,0h21.12l15.36-46.32L531.36,0H552.6l25.56-80.04H556.44L541.32-28.32,525.6-80.04H509.04L492.12-28.32,478.2-80.04Zm214.8,40.08a41.4,41.4,0,0,0-12.6-30c-8.16-7.8-19.68-11.88-31.56-11.88s-23.4,4.08-31.56,11.88a41.4,41.4,0,0,0-12.6,30,41.532,41.532,0,0,0,12.6,29.88c8.16,7.8,19.68,11.88,31.56,11.88s23.4-4.08,31.56-11.88A41.532,41.532,0,0,0,671.28-39.96ZM627.12-61.68a23.959,23.959,0,0,1,16.08,6.36,21.6,21.6,0,0,1,6.48,15.36A22.04,22.04,0,0,1,643.2-24.6c-3.72,3.72-9,6.24-16.08,6.24a22.708,22.708,0,0,1-16.2-6.36,20.342,20.342,0,0,1-6.36-14.88,21.941,21.941,0,0,1,6.36-15.72A23.053,23.053,0,0,1,627.12-61.68Zm57.36-18.36V0h20.76V-30.72L725.16,0h25.8L725.88-32.76a22.421,22.421,0,0,0,11.04-5.52c3.96-3.84,6.36-9.84,6.36-16.68,0-6.36-2.28-13.32-6.84-18-5.88-6.12-13.56-7.08-19.56-7.08Zm20.76,16.08h3.96c4.56,0,8.04,1.2,9.96,3.12a9.438,9.438,0,0,1,2.76,6.72,9.965,9.965,0,0,1-2.64,6.72c-2.52,2.4-6.96,3.24-10.08,3.24h-3.96Zm75.24-16.08H759.72V0h20.76V-34.68L807.6,0h26.88L799.8-42.12l31.8-37.92H805.92l-25.44,33Z" transform="translate(183 425.84)"/>
</g>
</svg>
</span>
<span class="ja">ステップバイワーク</span>
</h1>
<div class="title dummy">
<span class="en">
<svg xmlns="http://www.w3.org/2000/svg" width="829.68" height="83.64" viewBox="0 0 829.68 83.64">
<g id="グループ_3" data-name="グループ 3" transform="translate(-187.8 -344)">
<path class="step" id="パス_2" data-name="パス 2" d="M4.8-7.2A55.881,55.881,0,0,0,16.92-.84,42.782,42.782,0,0,0,32.64,1.8c8.52,0,16.8-1.32,23.64-8.16,5.76-5.76,7.56-12.84,7.56-20.16,0-5.52-1.08-9.96-5.16-14.28-4.2-4.56-9.48-6.36-14.52-7.92L37.8-50.64c-4.92-1.44-6.36-2.88-6.96-3.6a5.354,5.354,0,0,1-1.08-3.6,5.923,5.923,0,0,1,2.04-4.32,9.968,9.968,0,0,1,6.84-2.4c2.76,0,7.44.48,13.68,5.4l8.28-16.2c-7.56-3.96-16.8-6.48-24.72-6.48-9.72,0-16.44,3.48-20.52,7.56C11.88-70.8,8.04-64.8,8.04-54.96c0,4.08.48,9.72,4.56,14.16,3.24,3.6,8.16,5.4,11.52,6.48l5.4,1.68c5.16,1.56,8.28,2.4,10.32,4.2a6.253,6.253,0,0,1,2.28,4.8,7.158,7.158,0,0,1-2.04,5.04c-1.32,1.44-3.84,2.76-8.04,2.76-7.2,0-13.92-3.96-18.36-8.16ZM124.2-62.4V-80.04H69.36V-62.4H86.4V0h20.76V-62.4Zm54.72-17.64H133.44V0h45.48V-17.64H154.2v-13.8h23.4V-49.08H154.2V-62.4h24.72Zm47.04,53.52c6.24,0,13.68-.84,19.92-6.96s7.08-13.56,7.08-19.92c0-6.72-1.2-13.44-7.44-19.44-6.12-5.88-13.32-7.2-20.28-7.2H192.12V0h20.76V-26.52ZM212.88-63.24h7.08c2.64,0,6.48.36,8.88,2.88,2.16,2.16,2.4,5.04,2.4,7.2,0,1.92-.12,5.16-2.64,7.32-2.52,2.28-6.6,2.52-8.76,2.52h-6.96ZM325.32,0c9.84,0,17.4-3.12,21.72-7.56,3-3,5.88-8.16,5.88-15.72,0-6.36-2.16-11.52-5.4-14.64a19.9,19.9,0,0,0-10.92-4.8,12.6,12.6,0,0,0,6.48-6.24,20.745,20.745,0,0,0,2.28-9.84c0-7.08-2.16-12-4.92-15-4.92-5.4-11.76-6.24-17.52-6.24H291.96V0Zm-12.6-64.08h3.84c4.08,0,6.6,1.08,7.92,2.4a8.228,8.228,0,0,1,1.92,5.4A7.754,7.754,0,0,1,324.48-51c-2.16,2.28-5.76,2.52-7.92,2.52h-3.84Zm0,31.08h4.32c5.16,0,10.32.12,12.84,2.64a8.134,8.134,0,0,1,2.04,5.76,7.786,7.786,0,0,1-1.68,5.16c-2.28,2.64-7.08,3.24-12.84,3.24h-4.68ZM379.2,0h20.88V-38.4l29.88-41.64h-25.2L390.24-58.2,375.12-80.04H350.28L379.2-38.4Z" transform="translate(183 425.84)"/>
<path class="work" id="パス_1" data-name="パス 1" d="M456.48-80.04,480.36,0h21.12l15.36-46.32L531.36,0H552.6l25.56-80.04H556.44L541.32-28.32,525.6-80.04H509.04L492.12-28.32,478.2-80.04Zm214.8,40.08a41.4,41.4,0,0,0-12.6-30c-8.16-7.8-19.68-11.88-31.56-11.88s-23.4,4.08-31.56,11.88a41.4,41.4,0,0,0-12.6,30,41.532,41.532,0,0,0,12.6,29.88c8.16,7.8,19.68,11.88,31.56,11.88s23.4-4.08,31.56-11.88A41.532,41.532,0,0,0,671.28-39.96ZM627.12-61.68a23.959,23.959,0,0,1,16.08,6.36,21.6,21.6,0,0,1,6.48,15.36A22.04,22.04,0,0,1,643.2-24.6c-3.72,3.72-9,6.24-16.08,6.24a22.708,22.708,0,0,1-16.2-6.36,20.342,20.342,0,0,1-6.36-14.88,21.941,21.941,0,0,1,6.36-15.72A23.053,23.053,0,0,1,627.12-61.68Zm57.36-18.36V0h20.76V-30.72L725.16,0h25.8L725.88-32.76a22.421,22.421,0,0,0,11.04-5.52c3.96-3.84,6.36-9.84,6.36-16.68,0-6.36-2.28-13.32-6.84-18-5.88-6.12-13.56-7.08-19.56-7.08Zm20.76,16.08h3.96c4.56,0,8.04,1.2,9.96,3.12a9.438,9.438,0,0,1,2.76,6.72,9.965,9.965,0,0,1-2.64,6.72c-2.52,2.4-6.96,3.24-10.08,3.24h-3.96Zm75.24-16.08H759.72V0h20.76V-34.68L807.6,0h26.88L799.8-42.12l31.8-37.92H805.92l-25.44,33Z" transform="translate(183 425.84)"/>
</g>
</svg>
</span>
<span class="ja">ステップバイワーク</span>
</div>
<p class="text">ホームページを通じて、本当に良いモノ・正しいコトが選ばれるインターネットを<br>
目指すことがステップバイワークの事業テーマです。</p>
<div class="btn">
<a href="">わたしたちについて</a>
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>@use "../foundation/f-mixin" as *;
@use "../foundation/f-variables" as *;
body {
height: 500vh;
}
.sec01 {
height: 100vh;
height: 100svh;
text-align: right;
img {
object-fit: cover;
height: 100%;
width: calc(50% + 60px);
}
}
.sec02 {
height: 100vh;
height: 100svh;
padding: 100px 0;
display: flex;
align-items: center;
background: url(../../images/bg2.jpg) center no-repeat;
background-size: cover;
.inner {
max-width: 1000px;
width: calc(100% - 40px);
margin: 0 auto;
position: relative;
}
.title {
display: flex;
flex-direction: column;
gap: 34px;
margin-bottom: 50px;
position: fixed;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
padding-right: 20px;
&.active {
position: absolute;
top: 0;
transform: none;
}
.en {
width: 830px;
max-width: 100%;
path {
transition: fill 0.3s ease;
}
.step {
fill: black;
}
.work {
fill: white;
}
&.active {
.step {
fill: white;
}
}
}
.ja {
font-size: 30px;
font-weight: bold;
color: black;
transition: color 0.3s ease;
&.active {
color: white;
}
}
&.dummy {
position: static;
opacity: 0;
transform: none;
padding-right: 0;
}
}
.text {
color: white;
font-size: 20px;
line-height: 2;
letter-spacing: 0.08em;
}
.btn {
margin-top: 50px;
a {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid white;
color: white;
height: 50px;
font-size: 20px;
line-height: 2;
letter-spacing: 0.08em;
padding: 0 20px;
}
}
}