実現したいこと
こちらのサイトを参考にスクロールしたときに文字を浮かび上がらせたいです。
「1.【サンプル】フェードイン(ふわっと)」をまねしたいです。
現状は表示させたい文字が現れません。
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
解説をいただきたい部分
①なぜ最初に$(なのか
②eventはここでのスクロール操作なのか
③isInviewの役割
④stop()の意味
よろしくお願いいたします。
$(function() {
$('.inview').on('inview', function (event, isInview) {
if(isInview) {
$(this).stop().addClass('is-show');
}
});
});
* {
background-attachment: fixed;
}
/* aboutmeの余白をうまいことしたい */
.navbar {}
header {
padding: 300px 0;
background-image: url(images/top.jpg);
height: 100px;
}
.fadeIn {
color: #fff;
opacity: 0;
transition: 2s;
}
.fadeIn.is-show {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iori's Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<!-- slick 👩🎓headとbody終わりの直前-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> -->
</head>
<body class="text-center">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="">yoriss67</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<header id="header">
<div>
<h1 class="fadeIn">Thank you for visiting.</h1>
</div>
<div class="">
<p class="fadeIn" data-test-daa="This is a test">I'm Iori.</p>
</div>
</style>
</header>
<hr>
<div class="aboutme">
<h2>About Me</h2>
<div class="row">
<div class="col-md-6">
<img class="imgprofile" src="images/8fdb71d0-e360-4b74-9761-7795784871bd-0-modified.png" alt="my-profile"
width="200px" height="200px">
</div>
<div class="col-md-6">
<p>I'm a sophomore student at a university in Japan. My major is English and Social Science.
<br><br>I have started studying programming out of mainly curiosity and a bit of hope to make use of it for my
future career.</p>
</div>
</div>
<!-- <a href="https://www.notion.so/396eca31a8f44b5c989ac4b8efa302f0?v=c3d6906ee5654da9a5534cfa7b0b79bc&p=d67a03c53bd949b0902f76774734cf57&pm=s" target="_blank">Here's my Notion.</a> -->
</div>
<hr>
<div class="mywebdevelopmentpath">
<h2>My Web Development Path</h2>
<!-- Web Dev Blog-->
<button data-modal-id="modal-1">Open Modal 1</button>
<button data-modal-id="modal-2">Open Modal 2</button>
<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>
</div>
<hr>
<div class="whatilike">
<h2>What I like</h2>
<div class="slider">
<div><img src="images/surfers.jpg" alt="surfers" /></div>
<div><img src="images/circle.jpg" alt="circle" /></div>
<div><img src="images/kelia.jpg" alt="kelia" /></div>
<div><img src="images/sunset.jpg" alt="sunset" /></div>
<div><img src="images/surfboy.jpg" alt="surfboy" /></div>
<div><img src="images/yogurt.jpg" alt="yogurt" /></div>
<div><img src="images/palmtree.jpg" alt="palmtree" /></div>
<div><img src="images/yoga.jpg" alt="yoga" /></div>
</div>
</div>
<hr>
<h2>Works</h2>
<div class="works">
<ul>
<li id="Travel Blog">
<div>
<a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
<img src="./images/images06.jpg" alt="images06">
<h5>Travel Blog</h5>
</a>
</div>
<div>
<small> Sep 2022 </small>
<p>初めての模写です。</p>
</div>
</li>
<li id="Travel Blog">
<a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
<img src="./images/images06.jpg" alt="images06">
<h5>Travel Blog</h5>
</a>
<span> Sep 2022 </span>
</li>
<li id="Travel Blog">
<a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
<img src="./images/images06.jpg" alt="images06">
<h5>Travel Blog</h5>
</a>
<span> Sep 2022 </span>
</li>
</ul>
</div>
<h2>Contact</h2>
<div class="contact">
<div class="github">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/yoriss67">yoriss67</a>
</div>
<div class="twitter">
<i class="fa-brands fa-twitter"></i>
<a href="https://twitter.com/iori73wsy">Iori67</a>
</div>
<div class="instagram">
<i class="fa-brands fa-instagram"> </i>
<a href="https://www.instagram.com/ioriiii_13/">ioriii_13</a>
</div>
</div>
<!-- inview CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<!-- inview download -->
<script src="./jquery.inview.min.js"></script>
<!-- slick -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js">
</script>
<script src="index.js"></script>
</body>
</html>