@yomi3311posted at 2023-12-05

ページレイアウト　スクロール時要素をフェードインさせる方法を教えてください

Q&A

解決したいこと

現在WEBページを作成中です（現状未完成）。
現状ページ更新時に１回だけ画像等が動作するようになってしまっています。
上記の動作ではなく、毎度ページをスクロールすると画像等がフェードインする動作を入れたいのですが、解決方法を教えてください。。
プログラミング初心者のため出来れば詳しく説明していただけますと大変助かります。。

※jQueryは使用不可

現状のコード

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="base.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>

	<body class="home blog" itemscope="" itemtype="http://schema.org/WebPage">

		<div id="container">
			<header class="header ex ex_fade_up ex_delay1000 show" role="banner" itemscope=""
				itemtype="http://schema.org/WPHeader">

				<div id="inner-header" class="wrap">

					<p id="logo" class="h1" itemscope="" itemtype="http://schema.org/Organization"><a
							href="http://educure.linew.co.jp" rel="nofollow"><img
								src="http://educure.linew.co.jp/wp-content/themes/linew/library/images/logo_green.svg"
								alt="株式会社LiNew"
								data-src="http://educure.linew.co.jp/wp-content/themes/linew/library/images/logo_green.svg"
								class=" lazyloaded"><noscript><img
									src="http://educure.linew.co.jp/wp-content/themes/linew/library/images/logo_green.svg"
									alt="株式会社LiNew" data-eio="l"></noscript></a></p>


					<div class="nav_wrapper">
						<nav role="navigation" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
							<ul id="menu-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc"
								class="nav top-nav cf">
								<li id="menu-item-33"
									class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33">
									News</a></li>
								<li id="menu-item-15"
									class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
									About</a></li>
								<li id="menu-item-2117"
									class="menu-item menu-item-type-post_type_archive menu-item-object-service menu-item-2117">
									Service</a></li>
								<li id="menu-item-2118"
									class="menu-item menu-item-type-post_type_archive menu-item-object-recruit menu-item-2118">
									Recruit</a></li>
								<li id="menu-item-17"
									class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
									Contact</a></li>
							</ul>
						</nav>
					</div>

					<div class="burger-btn">
						<span class="bar bar_top"></span>
						<span class="bar bar_mid"></span>
						<span class="bar bar_bottom"></span>
					</div>

				</div>

			</header>


			<div class="carousel-container">

				<!-- Image 1 -->
				<img class="image" src="./image/IMG_0258-1.jpeg" alt="Image 1">
				<!-- Image 2 -->
				<img class="image" src="./image/IMG_0256.jpeg" alt="Image 2">
				<!-- Image 3 -->
				<img class="image" src="./image/IMG_0242-1.jpeg" alt="Image 3">
				<!-- Image 4 -->
				<img class="image" src="./image/IMG_0224-1.jpeg" alt="Image 4">
				<!-- Image 5 -->
				<img class="image" src="./image/IMG_0218-4.jpeg" alt="Image 5">

			</div>

			<div class="carousel-container-txt">
				<p>世の中の課題をITで解決し、
					<strong>関わった世界中の人たちを幸せにする</strong>
				</p>
			</div>




			<section id="ourservice" class="graybg">
				<div class="inner-mainwid">
					<h1 class="section_title">Our Service</h1>
					<ul class="ourservice_list">
						<li>
							<div class="img-ex">
								<img src="http://educure.linew.co.jp/wp-content/uploads/2021/05/educure01-1024x683.jpg"
									alt="educure"
									data-src="http://educure.linew.co.jp/wp-content/uploads/2021/05/educure01-1024x683.jpg"
									class=" lazyloaded">
								<noscript><img
										src="http://educure.linew.co.jp/wp-content/uploads/2021/05/educure01-1024x683.jpg"
										alt="educure" data-eio="l"></noscript>
							</div>
							<div class="txt ex">
								<a href="https://lp.educure.jp/" target="_blank">
									<h2><img src="http://educure.linew.co.jp/wp-content/uploads/2021/05/black-300x96.png"
											alt="educure"
											data-src="http://educure.linew.co.jp/wp-content/uploads/2021/05/black-300x96.png"
											class=" lazyloaded">
										<noscript><img
												src="http://educure.linew.co.jp/wp-content/uploads/2021/05/black-300x96.png"
												alt="educure" data-eio="l"></noscript>
									</h2>
									<div class="catch">
										<p>DXを推進する エンジニア育成</p>
									</div>
									<p class="excerpt">IT事業参入をご検討中の事業者様向けのサービスです。</p>
									<i class="fas fa-external-link-alt" aria-hidden="true"></i>
								</a>
							</div>
						</li>
						<li>
							<div class="img-ex-show">
								<img src="http://educure.linew.co.jp/wp-content/uploads/2021/05/techpassion01-1024x683.jpg"
									alt="TECH Passion"
									data-src="http://educure.linew.co.jp/wp-content/uploads/2021/05/techpassion01-1024x683.jpg"
									class=" lazyloaded">
								<noscript><img
										src="http://educure.linew.co.jp/wp-content/uploads/2021/05/techpassion01-1024x683.jpg"
										alt="TECH Passion" data-eio="l"></noscript>
							</div>
							<div class="txt ex show">
								<a href="https://techpassion.jp/" target="_blank">
									<h2><img src="http://educure.linew.co.jp/wp-content/uploads/2021/05/logo.png"
											alt="TECH Passion"
											data-src="http://educure.linew.co.jp/wp-content/uploads/2021/05/logo.png"
											class=" lazyloaded">
										<noscript><img
												src="http://educure.linew.co.jp/wp-content/uploads/2021/05/logo.png"
												alt="TECH Passion" data-eio="l"></noscript>
									</h2>
									<div class="catch">
										<p>未経験から<br>本気でエンジニアへ</p>
									</div>
									<p class="excerpt">「未経験から本気でエンジニア」を目指すプログラミングスクールです。</p>
									<i class="fas fa-external-link-alt" aria-hidden="true"></i>
								</a>
							</div>
						</li>
						<li>
							<div class="img ex show">
								<img src="http://educure.linew.co.jp/wp-content/uploads/2021/10/6c40ac7b707e13491fda6a6b4f02d82d-1024x597.jpg"
									alt="人生を変える英会話アプリ"
									data-src="http://educure.linew.co.jp/wp-content/uploads/2021/10/6c40ac7b707e13491fda6a6b4f02d82d-1024x597.jpg"
									class=" lazyloaded">
								<noscript><img
										src="http://educure.linew.co.jp/wp-content/uploads/2021/10/6c40ac7b707e13491fda6a6b4f02d82d-1024x597.jpg"
										alt="人生を変える英会話アプリ" data-eio="l"></noscript>
							</div>
							<div class="txt ex show">
								<a href="https://lp.redfire.jp/" target="_blank">
									<h2><img src="http://educure.linew.co.jp/wp-content/uploads/2021/10/abb886337b510d088a858a59a12bf114.png"
											alt="人生を変える英会話アプリ"
											data-src="http://educure.linew.co.jp/wp-content/uploads/2021/10/abb886337b510d088a858a59a12bf114.png"
											class=" lazyloaded">
										<noscript><img
												src="http://educure.linew.co.jp/wp-content/uploads/2021/10/abb886337b510d088a858a59a12bf114.png"
												alt="人生を変える英会話アプリ" data-eio="l"></noscript>
									</h2>
									<div class="catch">
										<p>人生を変える英会話アプリ</p>
									</div>
									<p class="excerpt">登録者数約25万人! YouTuber講師ジョージ監修！ オンライン英会話アプリ！</p>
									<i class="fas fa-external-link-alt" aria-hidden="true"></i>
								</a>
							</div>
						</li>
					</ul>
					<div class="other_btn_area">
						<a href="/service/" class="other_btn">Other service<i class="fas fa-arrow-circle-right"
								aria-hidden="true"></i></a>
					</div>
				</div>
			</section>

	</body>

</html>

CSS

body {
    margin: 0;
    font-family: "Roboto","Noto Sans JP","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 100%;
    line-height: 1.5rem;
    color: rgba(0,0,0,0.87);
    overflow-x: hidden;
}

.header {
    background-color: rgba(255,255,255,0.95);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
}

.header .wrap {
    display: flex;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    align-items: center;
}



.wrap, .mainwid {
    width: 100%;
    max-width: calc( 1120px + 2.5rem * 2);
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}



.clearfix, .cf {
    zoom: 1;
}

.nav {
    margin: 0;
    display: flex;
	margin-left: 60%;
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

ol, ul {
    padding: 0;
	box-sizing: border-box;
}

ul {
   
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

li {
    display: list-item;
	margin-right: 30px;
}


.carousel-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}

.image{
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: change-img-anim 25s infinite;
}


.image:nth-of-type(1) {
    animation: change-img-anim-first 25s infinite;
      animation-delay: 0s;
  }
  .image:nth-of-type(2) {
      animation-delay: 5s;
  }
  .image:nth-of-type(3) {
      animation-delay: 10s;
  }

  .image:nth-of-type(4) {
    animation-delay: 15s;
}

.image:nth-of-type(5) {
    animation-delay: 20s;
}

@keyframes change-img-anim-first {
	0%{ opacity: 1;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

.carousel-container-txt {
    position: absolute;
    top: 90%;
    left: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: #fff;
    width: 80%; /* Adjust the width as needed */
}

.carousel-container-txt p {
    margin: 0;
    font-size: 2rem;
    font-weight: 700px;
    line-height: 2.5rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.54);
}

.carousel-container-txt strong {
    color: #fce244;
    
}




.inner-mainwid {
    width: 100%;
    max-width: calc( 1120px + 2.5rem * 2);
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.section_title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    text-align: center;
    margin: 0 auto 3.5rem;
}



.section_title:before {
    margin: 0 auto 1.5rem;
    margin-top: 100px;
    content: "";
    display: block;
    width: 20%;
    height: 2px;
    background: #2da690;
    transition: .1s ease-in-out;
}

@keyframes fadeInAndMoveDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

 .section_title, .section_title:before {
    animation: fadeInAndMoveDown 1s ease-out forwards;
}

.img-ex {
    display: flex; /* 親要素をflexコンテナに設定 */
}

.img-ex img {
    margin-left: -20%;
    z-index: 1;
    width: 70%; /* 50%の幅に変更 */
    height: auto; /* アスペクト比を保持するために高さを自動に設定 */
    opacity: 0; /* 初期状態で透明にする */
    animation: fadeInUp 1.5s ease-in-out forwards; /* アニメーションの設定 */
}

@keyframes fadeInUp {
    from {
        opacity: 0; /* 初期状態で透明 */
        transform: translateY(20px); /* 下から上に20px移動 */
    }
    to {
        opacity: 1; /* 最終状態で不透明 */
        transform: translateY(0); /* 上に移動しない（0） */
    }
}

.ourservice_list li {
    margin: 0 auto 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

.ourservice_list li{
    position: relative;
}

.ourservice_list li .txt{
    position: absolute;
    z-index: 2;
    width: 60%;
    height: 400px;
    margin: 2.5rem 0 2.5rem -20%;
    margin-left: 35%;
    background: rgba(255,255,255,0.95);
}

.ourservice_list li .txt a{
    padding: 2.5rem;
    display: block;
    text-decoration: none;
    color: rgba(0,0,0,0.87);
    margin-left: 0%;
}

.ourservice_list li .txt h2{
    margin: 0 0 2.5rem;
    font-size: 1.66667rem;
    font-weight: 700;
    line-height: 3.5rem;
    color: #2da690;
}

.ourservice_list li .txt .catch p {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
    margin: 1.5rem 0 1rem;
}

.ourservice_list li .txt .excerpt {
    margin: 1rem 0;
    color: rgba(0,0,0,0.54);
}

.ourservice_list li .txt i {
    margin: 2.5rem 0 0;
    line-height: 1;
    color: rgba(45,166,144,0.12);
    transition: .1s ease-in-out;
}

.ourservice_list li {
    margin: 0 auto 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}




.img-ex-show {
    display: flex; /* 親要素をflexコンテナに設定 */
}

.img-ex-show img {
    margin-left: 50%;
    z-index: 1;
    width: 70%; /* 50%の幅に変更 */
    height: auto; /* アスペクト比を保持するために高さを自動に設定 */
    opacity: 0; /* 初期状態で透明にする */
    animation: fadeInUp 1.5s ease-in-out forwards; /* アニメーションの設定 */
}


.txt.ex.show {
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    flex-direction: row; /* 左横に配置 */
    margin-left: auto;
    opacity: 0; /* 初期状態で透明にする */
    animation: fadeInUp 3s ease-in-out forwards; /* アニメーションの設定 */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 下から上に20px移動 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 上に移動せずに元の位置に */
    }
}

.txt.ex.show h2 {
    margin-right: 20px; /* 適切な間隔に調整 */
}

.txt.ex.show a {
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* 親要素と同じ色を継承 */
}

.catch {
    margin-bottom: 10px; /* 適切な間隔に調整 */
}

.txt.ex.show .excerpt {
    margin-bottom: 10px; /* 適切な間隔に調整 */
}

.txt.ex.show i {
    margin-left: 5px; /* 適切な間隔に調整 */
}

Are you sure you want to delete the question?

ページレイアウト　スクロール時要素をフェードインさせる方法を教えてください

解決したいこと

現状のコード

2Answer

Your answer might help someone💌

ページレイアウト スクロール時要素をフェードインさせる方法を教えてください

解決したいこと

現状のコード

2Answer

Your answer might help someone💌

ページレイアウト　スクロール時要素をフェードインさせる方法を教えてください