Как заставить текст медленно появляться при скролле

Question

котаны!

начала верстать простой-сайт визитку. Хочу добавить эффект, чтобы при скролле вниз текст медленно появлялся. Как можно это сделать? Вот мой код

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- adaptation to different devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Example site</title>
        <!-- stylesheets -->
        <link rel="stylesheet" href="css/style.css">
        <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
        <!-- bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <!-- font -->
        <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=Oswald:wght@200;400;700&display=swap" rel="stylesheet">
        <!-- font awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">  
        <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
    </head>
    <body>
        <!-- home -->
        <header id="home">
            <!-- nav -->
            <div class="header-nav">
                <div class="container">
                    <div class="header__body">
                        <div class="header__burger">
                            <span></span>
                        </div>
                        <nav class="header__menu">
                            <ul class="header__list">
                                <li>
                                    <a href="#home" class="header__link">Home</a>
                                </li>
                                <li>
                                    <a href="#" class="header__link">About me</a>
                                </li>
                                <li>
                                    <a href="#" class="header__link">Skills</a>
                                </li>
                                <li>
                                    <a href="indexru.html" class="header__link">Portfolio</a>
                                </li>
                                <li>
                                    <a href="indexru.html" class="header__link">Contacts</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- header -->
            <div class="header-content header-container">
                <h1>My name</h1>
                <h3 class="header-desc">
                    Frontend developer <br> 28 years old, Moscow
                </h3>
                <ul>
                    <li><a href="#">EN</a></li>
                    <li>|</li>
                    <li><a href="">RU</a></li>
                </ul>
            </div>
            <div class="header-img_block">
                <div class="header-img header-container"></div>
            </div>
        </header>
        <!-- main -->
        <main id="about-me">
            <div class="main-content">
                <h2 class="title">About me</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quae recusandae laboriosam illo maiores est, possimus deserunt consectetur dolorem eius nobis suscipit voluptatum doloremque facilis repellat cupiditate qui nostrum atque.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quae recusandae laboriosam illo maiores est, possimus deserunt consectetur dolorem eius nobis suscipit voluptatum doloremque facilis repellat cupiditate qui nostrum atque.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quae recusandae laboriosam illo maiores est, possimus deserunt consectetur dolorem eius nobis suscipit voluptatum doloremque facilis repellat cupiditate qui nostrum atque.</p>
                <h3>From Russia with love</h3>
                <div class="contact-form">
                    <button class="btn-contact">More about me</button>
                </div>
            </div>
        </main>
        <!-- skills -->
        <section id="skills">
            <div class="main-content">
                <h2 class="title">Skills</h2>
                <p>Here is what I know</p>
                <div class="skills-wrapper">
                    <div class="skills-item">
                        <p>HTML</p>
                        <div class="container-skills">
                        <div class="skills html">90%</div>
                        </div>
                        <p>CSS</p>
                        <div class="container-skills">
                        <div class="skills css">80%</div>
                        </div>
                        <p>JavaScript</p>
                        <div class="container-skills">
                        <div class="skills js">1%</div>
                        </div>
                        <p>Figma</p>
                        <div class="container-skills">
                        <div class="skills figma">60%</div>
                        </div>
                        <p>Photoshop</p>
                        <div class="container-skills">
                        <div class="skills photoshop">75%</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- portfolio -->
        <section id="portfolio">
            <div class="main-content">
                <h2 class="title">Portfolio</h2>
                <p style="text-align: center;">Behold some of my work</p>
            </div>
            <div class="project-body">
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
                <article class="project-item">
                    <img src="img/preview-800.png" alt="soon" class="project-img">
                    <h4><a href="#">Project name</a></h4>
                </article>
            </div>
        </section>
        <!-- contact -->
        <footer id="contact">
            <div class="main-content">
                <h2 class="title">Contacts</h2>
                <p style="text-align: center;">Want to know more or just chat? Feel free to get in touch with me!</p>
                <div class="contact-form">
                    <button class="btn-contact">Send a message</button>
                </div>
                <div class="social">
                    <i class="fab fa-telegram"></i>
                    <i class="fab fa-instagram-square"></i>
                    <i class="fab fa-vk"></i>
                    <i class="fab fa-facebook"></i>
                </div>
                <p style="text-align: center; padding-bottom: 120px; padding-top: 45px;">Follow me on social media</p>
            </div>
        </footer>
            <script src="script.js"></script>
    </body>
</html>

CSS
/* reset */
* {
   padding: 0;
   margin: 0;
   border: 0; 
   }
/* *, *:before, *:after {
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box; 
   } */
:focus.active {
   outline:none;
   }
a:focus,a:active {
   outline:none;
   }
input,button,textarea {
   font-family:inherit;
   }
button {
   cursor:pointer;
   }
a {
   text-decoration: none;
   }
ul li {
   list-style: none;
   }
/* nav */
.header-nav {
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 2;
   background-color: white;
   padding: 0 20px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.header-nav:before {
   content: '';
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 3;
}
.header__body {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
}
.header__burger {
   display: none;
}
.header__list {
   display: flex;
   position: relative;
   z-index: 7;
}
.header__list li {
   list-style: none;
   margin-left: 155px;
}
.header__list a:hover {
   opacity: 0.6;
   transition: opacity 0.5s ease-out 100ms;
}
.header__link {
   text-transform: uppercase;
   font-size: 18px;
   line-height: 22px;
   color: #828282;
   text-decoration: none;
}
.header__burger.active:before {
   transform: rotate(45deg);
   top: 9px;
}
.header__burger.active:after {
   transform: rotate(-45deg);
   bottom: 9px;
}
.header__burger.active span {
   transform: scale(0);
}
@media (max-width:767px) {
   body.lock {
       overflow: hidden;
   }
   .header__body {
       height: 40px;
       float: right;
   }
   .header__burger {
       display: block;
       position: relative;
       width: 30px;
       height: 20px;
       position: relative;
       z-index: 3;
   }
   .header__burger span{
       position: absolute;
       background-color: black;
       float: right;
       width: 100%;
       height: 2px;
       top: 9px;
       transition: all 0.3s ease 0s;
   }
   .header__burger:before,
   .header__burger:after {
       content: '';
       background-color: black;
       position: absolute;
       width: 100%;
       height: 2px;
       transition: all 0.3s ease 0s;
   }
   .header__burger:before {
       top: 0;
   }
   .header__burger:after {
       bottom: 0;
   }
   .header__menu {
       position: fixed;
       top: -100%;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: white;
       overflow: auto;
       padding: 70px 10px 20px 10px;
       transition: all 0.3s ease 0s;
   }
   .header__menu.active {
       top: 0;
   }
   .header__list {
       display: block;
   }
   .header__list li {
       margin-bottom: 20px;
   }
   .header__link {
       font-size: 24px;
   }
}
/* header */
header {
   font-family: 'oswald';
   color: #000;
   margin-top: 100px;
}
.header-content {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 50px;
   -webkit-box-pack: justify;
}
.header-content ul {
   transform: rotate(-90deg);
   display: block;
   transform-origin: 82% 0;
}
.header-content ul li {
   display: inline-block;
   font-size: 20px;
   line-height: 20px;
}
.header-content li a:nth-child(odd) {
   text-decoration: none;
   color: #504e4e;

}
.header-content li a:hover {
   color: black;
}
.header-container {
   width: 940px;
   margin: 0 auto;
}
h1 {
   color: black;
   font-weight: bold;
   line-height: 60px;
   width: 124px;
   font-size: 50px;
}
.header-desc {
   color: #070707;
   font-size: 18px;
   line-height: 20px;
}
.header-img_block {
   justify-content: center;
   margin: 100px 0;
}
.header-img {
   background-image: url(../img/89c2eb183c77b3f1bf51785f46dcab3f.jpg);
   height: 387px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
   background-attachment: fixed;
}
/* main */
#about-me, #portfolio {
   background: #F6F6F6;
   width: 100%;
   font-family: 'oswald';
   padding-bottom: 100px;
}
.main-content {
   margin: 0 480px;
}
.title {
   color: #070707;
   font-size: 34px;
   text-align: center;
   padding-top: 120px;
   font-weight: bold;
}
.main-content p {
   font-size: 18px;
   line-height: 22px;
   text-align: justify;
   color: #070707;
   margin: 35px auto 10px auto;
   font-weight: 200;
   letter-spacing: 1.5px;
}
.main-content h3 {
   font-size: 25px;
   line-height: 22px;
   font-weight: 400;
   letter-spacing: 1.5px;
   margin-top: 50px;
   text-align: center;
}
.btn {
   margin-top: 20px;
   margin-left: 35%;
}
.btn-about {
   padding: 5px 20px;
   border: 2px solid black;
   border-radius: 5px;
   background-color: black;
   color: white;
   text-decoration: none;
}
.btn-about:hover {
   background-color: darkgray;
   color: black;
   border: 2px solid darkgray;
}
/* skills */
#skills {
   width: 100%;
   font-family: 'oswald';
   padding-bottom: 100px;
}
#skills p {
   text-align: center;
}
.container-skills {
   width: 100%; 
   background-color: #ddd; 
 }
.skills {
   text-align: right; 
   padding-top: 10px;
   padding-bottom: 10px; 
   color: white; 
 }
.html {width: 90%; background-color: #04AA6D;} 
.css {width: 80%; background-color: #2196F3;} 
.js {width: 1%; background-color: #f44336;} 
.figma {width: 60%; background-color: #808080;} 
.photoshop {width: 75%; background-color: #7a057e;} 
/* portfolio */
.project-body {
   margin: 50px 0 0 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.project-body .btn {
   margin-left: 42%;
}
.project-item {
   padding: 20px 30px;
   text-align: center;
}
.project-item img {
   width: 340px;
}
.project-item h4 a {
   text-decoration: none;
   color: grey;
}
.project-item h4 a:hover {
   color: black;
}
/* contact */
.btn-contact {
   margin-top: 50px;
   background-color: black;
   color: white;
   padding: 10px 30px;
   border-radius: 20px;
   font-weight: bold;
   font-size: 18px;
}
.contact-form {
   text-align: center;
}
.btn-contact:hover {
   background-color: grey;
}
.social {
   display: flex;
   justify-content: space-between;
   margin-top: 80px;
}
.fab {
   font-size: 40px;
   padding: 0 30px;
}
.fab:first-child {
   padding-left: 0;
}
.fab:last-child {
   padding-right: 0;
}

JS
$(document).ready(function() {
   $('.header__burger').click(function(event) {
    $('.header__burger,.header__menu').toggleClass('active');
    $('body').toggleClass('lock')
   }); 
});

БЛОГ НА HUSL

Как заставить текст медленно появляться при скролле

Ответы (0 шт):