Появление и исчезновение на свитке jQuery - PullRequest
Новая
       1

Появление и исчезновение на свитке jQuery

0 голосов
/ 21 февраля 2020

Я пытаюсь добавить эффект параллакса на мою веб-страницу. Мне нужно, чтобы некоторые элементы всплывали, когда пользователь идет дальше и дальше вниз по странице. Я нашел этот исходный код в Интернете и немного его подправил. https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll.

Я могу заставить элементы появиться один раз, но после прокрутки назад на страницу, где элементы уже видны. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sample Portfolio</title>

    <!-- Bootstrap core CSS -->

    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <!-- <link href="css/animate.css" rel="stylesheet"> -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>

    <!-- Side Menu -->
    <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand"><a href="http://startbootstrap.com">Mark Bonilla</a>
            </li>
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#portfolio">Portfolio</a>
            </li>
            <li><a href="#contact">Contact Me</a>
            </li>
        </ul>
    </div>
    <!-- /Side Menu -->

    <!-- Full Page Image Header Area -->
    <div id="top" class="header">
        <div class="vert-text">
            <h1 class="tago">Profile Name</h1>
            <h3>
                <em>If</em> you can think it,
                <em>We</em> can develop it.</h3>
            <!-- <a href="#about" class="btn btn-default btn-lg">Find Out More</a> -->
        </div>
    </div>
    <!-- /Full Page Image Header Area -->

    <!-- Intro -->
    <div id="about" class="intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="tago">About Me</h2>
                    <hr>
                    <p class="lead tago">Lorem Ipsum bla bla bala.</p>
                </div>
            </div>
            <div class="row intro closing">
                <div class="col-md-12 text-center">
                    <h2 class="tago">Experience with</h2>
                    <hr>
                    <ul class="list-inline tago slideUp">
                      <li><img src="img/html.png" alt="HTML" title="HTML" style></li>
                      <li><img src="img/css.png" alt="CSS" title="CSS" style></li>
                      <li><img src="img/js.png" alt="JavaScript" title="JavaScript"></li>
                      <!-- <li><img src="img/wp.png" alt="Wordpress" title="Wordpress"></li> -->
                      <li><img src="img/git.png" alt="Git" title="Git"></li>
                      <li><img src="img/ill.png" alt="Adobe XD" title="Adobe Illustrator"></li>
                      <li><img src="img/ps.png" alt="Adobe Photoshop" title="Adobe Photoshop"></li>
                      <li><img src="img/pr.png" alt="Adobe Premier Pro" title="Adobe Premier Pro"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /Intro -->

    <!-- Portfolio -->
    <div id="portfolio" class="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4 text-center">
                    <h2 class="tago">Portfolio/Practice works</h2>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-2 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
                        </a>
                        <h4>Cityscape</h4>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
                        </a>
                        <h4>Is That On Fire?</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-2 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
                        </a>
                        <h4>Stop Sign</h4>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
                        </a>
                        <h4>Narrow Focus</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-2 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
                        </a>
                        <h4>Stop Sign</h4>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="portfolio-item">
                        <a href="#">
                            <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
                        </a>
                        <h4>Narrow Focus</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Portfolio -->

    <!-- Contact Me -->
    <div id="contact" class="intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="tago">Contact Me</h2>
                    <hr>
                    <p class="lead tago">If you're interested in collaborating or getting my services. You can contact me throught the following:</p>
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <ul class="list-inline intro">
                            <li><a href="https://www.facebook.com/markbrian.bonilla" class="fa fa-facebook fa-5x icons-social" style="text-decoration: none" target="_blank"></a>
                            </li>
                            <li><a href="https://www.linkedin.com/in/mark-brian-bonilla-266387167/" class="fa fa-linkedin fa-5x icons-social" style="text-decoration: none" target="_blank"></a>
                            </li>
                            <li><a href="https://dribbble.com/bonykid16" class="fa fa-dribbble fa-5x icons-social"  style="text-decoration: none" target="_blank" ></a>
                            </li>
                        </ul>
                        <div>
                            <a class="resume-link" href="file/markresume.pdf" target="_blank"><img src="img\resume.png"></a>
                        </div>
                        <p class="lead tago"><strong>Phone:</strong> +(63)92775529580</p>
                        <p class="lead tago"><strong>Email:</strong>  iammarkbonilla@gmail.com
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Contact Me -->
    <!-- Footer -->

        <div class="footer group">
            <div class="row text-center">
                <p class="lead">2020 All Rights Reserved.</p>
            </div>
        </div>

    <!-- /Footer -->

    <!-- JavaScript -->
    <!-- <script src="js/jquery-1.10.2.js"></script> -->
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>

    <script>

    $(document).on("scroll", function () {
    var pageTop = $(document).scrollTop()
    var pageBottom = pageTop + $(window).height()
    var tago = $(".tago")

    for (var i = 0; i < tago.length; i++) {
    var tag = tago[i]

    if ($(tag).position().top < pageBottom) {
    $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
    }
    })

    </script>
    
</body>

</html>

 $(document).on("scroll", function () {
    var pageTop = $(document).scrollTop()
    var pageBottom = pageTop + $(window).height()
    var tago = $(".tago")

    for (var i = 0; i < tago.length; i++) {
    var tag = tago[i]

    if ($(tag).position().top < pageBottom) {
    $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
    }
    })
.tago {
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1s;
}

.slideUp {
    transform: translate(0, 100px);
}

.tago.visible {
    opacity: 1;
    transform: translate(0, 0);
}
<!-- Intro -->
    <div id="about" class="intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="tago">About Me</h2>
                    <hr>
                    <p class="lead tago">I graduated from Bulacan State University. I worked in the BPO industry for about 6 years after graduating, but wasn't too fond of it. I started spending every second of my free time learning to code and after I quit my work and from there I've learned how to develop web pages from scratch. Turn ideas into good projects.</p>
                </div>
            </div>
            <div class="row intro closing">
                <div class="col-md-12 text-center">
                    <h2 class="tago">Experience with</h2>
                    <hr>
                    <ul class="list-inline tago slideUp">
                      <li><img src="img/html.png" alt="HTML" title="HTML" style></li>
                      <li><img src="img/css.png" alt="CSS" title="CSS" style></li>
                      <li><img src="img/js.png" alt="JavaScript" title="JavaScript"></li>
                      <!-- <li><img src="img/wp.png" alt="Wordpress" title="Wordpress"></li> -->
                      <li><img src="img/git.png" alt="Git" title="Git"></li>
                      <li><img src="img/ill.png" alt="Adobe XD" title="Adobe Illustrator"></li>
                      <li><img src="img/ps.png" alt="Adobe Photoshop" title="Adobe Photoshop"></li>
                      <li><img src="img/pr.png" alt="Adobe Premier Pro" title="Adobe Premier Pro"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /Intro -->

Любая помощь очень ценится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...