LoginSignup
4

More than 1 year has passed since last update.

jQueryとCSS スクロールするとセクションの境目で文字も切り替わる

Last updated at Posted at 2017-06-12

jQueryとCSSで、スクロールするとセクションの境目で文字も切り替わる無題.png

サイトの中央にテキストを配置し、スクロールするとセクションの境目で文字も切り替わるページを制作しました。レスポンシブ対応ですが、うまい方法が思いつかずガタガタしているので、参考になるソースや修正のヒントをいただけると嬉しいです!
サンプルページはこちら(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);
    });
  });

});

未完成ですが、何かに流用できそうであればご自由にどうぞ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4