HTML+CSS滚动视差特效源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        .hero {
          position: fixed;
          z-index: 1;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;

          background: url("http://lorempixel.com/g/1500/1000/nature/10/");
          background-size: cover;
          height: 170vh;
          width: 100vw;

          &:before {
            content: "";
            height: 100%;
            width: 100%;
            height: 170vh;
            width: 100vw;
            background: rgba(44, 123, 183, 0.5);
            position: absolute;
          }

          h1 {
            position: relative;
            z-index: 1;

            font-family: "Pacifico", cursive;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            font-size: 4rem;
            line-height: 4rem;

            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
            max-width: 25rem;
            margin: 30vh auto 0;

            /*-webkit-transition: 1s opacity ease-in-out;*/
          }
        }

        .content {
          position: absolute;
          z-index: 1000;
          top: 80vh;

          background: rgb(44, 123, 153);
          height: 100vh;
          width: 100vw;

          box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15);
          border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
</style>
  </head>
  <body>
    <section class="hero">
      <h1>Parallax Hero</h1>
    </section>

    <section class="content"></section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(window).scroll(function (e) {
        parallax();
      });

      function parallax() {
        var scrolled = $(window).scrollTop();
        $(".hero").css("top", -(scrolled * 0.0315) + "rem");
        $(".hero > h1").css("top", -(scrolled * -0.005) + "rem");
        $(".hero > h1").css("opacity", 1 - scrolled * 0.00175);
      }

      /*$(window).scroll(function(){
    if($(this).scrollTop() > 400){
      $('.hero > h1').css('opacity',0);
    } else {
      $('.hero > h1').css('opacity',1);
    }
  });*/
</script>
  </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END