jQueryとCSSで、スクロールするとセクションの境目で文字も切り替わる
サイトの中央にテキストを配置し、スクロールするとセクションの境目で文字も切り替わるページを制作しました。レスポンシブ対応ですが、うまい方法が思いつかずガタガタしているので、参考になるソースや修正のヒントをいただけると嬉しいです！
サンプルページはこちら（2021/8 追記: 閉じてしまいましたmm）
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="home">
<header>
<a href="" class="st-Header_Logo"><img src="./img/logo.jpg" alt=""></a>
<div class="st-Header_MenuBtn">
<span></span>
<span></span>
<span></span>
</div>
</header>
<section id="home-sec-1" class="sw-section">
<div class="sw-Container__FixCenter">
<h1 class="home-Title">Welcome!<br>test</h1>
</div>
</section>
<section id="home-sec-2" class="sw-section">
<a href="">
<div class="sw-Container__FixCenter">
<h2 class="home-Title">ABOUT</h2>
<p>introduction</p>
</div>
</a>
</section>
<section id="home-sec-3" class="sw-section">
<a href="">
<div class="sw-Container__FixCenter">
<h2 class="home-Title">WORKS</h2>
<p>website/leaflet</p>
</div>
</a>
</section>
<section id="home-sec-4" class="sw-section">
<a href="">
<div class="sw-Container__FixCenter">
<h2 class="home-Title">PROJECT</h2>
<p>website/leaflet</p>
</div>
</a>
</section>
<footer>
<p>Copyright (c) 2017 Chinatsu All Rights Reserved.</p>
</footer>
</div>
</body>
<script src="./js/jquery-3.2.0.min.js"></script>
<script src="./js/module.js"></script>
</html>
CSS
/* Reset
========================================================================== */
html{
font-size: 62.5%;/*10px*/
color: #333;
}
a{
color: #333;
}
/* Header
========================================================================== */
#home{
margin-top: 40px;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
height: 20px;
padding: 10px;
color: #fff;
background-color: rgba(255,255,255,.6);
z-index: 20;
}
.st-Header_Logo img{
height: 20px;
}
.st-Header_MenuBtn{
width: 20px;
position: relative;
}
.st-Header_MenuBtn span{
width: 20px;
height: 2px;
position: absolute;
border-top: 3px solid #333;
border-radius: 2px;
}
.st-Header_MenuBtn span:first-child{
top: 0px;
}
.st-Header_MenuBtn span:nth-child(2){
top: 8px;
}
.st-Header_MenuBtn span:nth-child(3){
top: 17px;
}
/* Section
========================================================================== */
.sw-section{
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.sw-Container__FixCenter{
position: absolute;
width: 100%;
text-align: center;
}
/* Home
========================================================================== */
.home-Title{
font-size: 4rem;
font-weight: bold;
}
.home-Title+p{
font-size: 2rem;
}
#home-sec-1{
background: url(../img/home-img-1.jpg) top /cover fixed no-repeat;
}
#home-sec-2{
background: url(../img/home-img-2.jpg) top /cover fixed no-repeat;
}
#home-sec-3{
background: url(../img/home-img-1.jpg) top /cover fixed no-repeat;
}
#home-sec-4{
background: url(../img/home-img-2.jpg) top /cover fixed no-repeat;
}
/* Footer
========================================================================== */
footer{
text-align: center;
height: 40px;
}
footer p{
padding-top: 15px;
font-size: 1rem;
}
jQuery
/*global $ window*/
$(function () {
'use strict';
/*background size*/
var swSectionHeight = $(window).height();
$('.sw-section').css('height', swSectionHeight - 40);
/*scroll event*/
$('#home-sec-1 .sw-Container__FixCenter').each(function () {
$(this).css('top', swSectionHeight / 2.5);
});
$(window).scroll(function () {
var windowSt = $(window).scrollTop();
$('#home-sec-1 .sw-Container__FixCenter').each(function () {
$(this).css('top', swSectionHeight / 2.5 + windowSt);
});
$('#home-sec-2 .sw-Container__FixCenter').each(function () {
$(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight + 40);
});
$('#home-sec-3 .sw-Container__FixCenter').each(function () {
$(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight * 2 + 80);
});
$('#home-sec-4 .sw-Container__FixCenter').each(function () {
$(this).css('top', swSectionHeight / 2.5 + windowSt - swSectionHeight * 3 + 120);
});
});
});
未完成ですが、何かに流用できそうであればご自由にどうぞ。