如何在视口中滑动div，然后在不再在视口中时滑出;

时间：2017-09-11 20:59:06

标签： javascript jquery html css

我正在尝试在滚动视图中进行div滑动。当它在视口中时会滑入视图，当它在视口外时会滑出视图。当它滑出时，它将被另一个div（代码中的下一个div）滑入。

我遇到的问题是每个div我想显示/隐藏与下一个div共享一个类。所以，我的代码一次显示/隐藏所有3个div，而不是根据视口中的位置显示/隐藏。

感谢您的帮助！

HTML：

    <body>
    <header id="legendary__intro">
      <div class="section__title">
        <h1 class="header__title">Lorem Ipsum</h1>
        <p class="header__description"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>

        <div class="header__subtitle uppercase">
          <p>Lorem Ipsum</p>
        </div>
        <div class="line"></div>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
    </header>
      <main class="main">
        <section class="century">
          <div class="decade">
            <div class="year">
            <div class="year__copy slide__left">
                <div class="year__data">
                  <h2 class="date">2018</h2>
                  <h3 class="subtitle">Lorem Ipsum</h3>
                  <p class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>
              </div>
              <div class="year__images slide__right">
                <div class="images is-hidden">
                  <img class="images__image" src="https://placebear.com/600/600">
                  <img class="images__image" src="https://placebear.com/600/600">
                  <img class="images__image" src="https://placebear.com/600/600">
                </div>
                <div class="fs__icon" title="Expand/Close"></div>
              </div>
            </div>
          </div>
          <div class="year">
            <div class="year__images slide__left">
              <div class="images">
                <img class="images__image" src="https://placebear.com/600/600">
                <img class="images__image" src="https://placebear.com/600/600">
                <img class="images__image" src="https://placebear.com/600/600">
              </div>
              <div class="fs__icon" title="Expand/Close"></div>
            </div>
            <div class="year__copy slide__right">
              <div class="year__data">
                <h2 class="date">Lorem Ipsum</h2>
                <h3 class="subtitle">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</h3>
                <p class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
              </div>
            </div>
          </div>
          <div class="year">
            <div class="year__copy slide__left">
              <div class="year__data">
                <h2 class="date">2016</h2>
                <h3 class="subtitle">Lorem Ipsum</h3>
                <p class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
              </div>
            </div>
            <div class="year__images slide__right">
              <div class="images">
                <img class="images__image" src="https://placebear.com/600/600">
                <img class="images__image" src="https://placebear.com/600/600">
                <img class="images__image" src="https://placebear.com/600/600">
              </div>
              <div class="fs__icon" title="Expand/Close"></div>
            </div>
          </div>
        </div>
    </main>

    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="../bower_components/slick-carousel/slick/slick.min.js"></script>
<script type="text/javascript" src="slick-lightbox.js"></script>
    </body>
    </html>

JavaScript的：

$(document).ready(function() {
    triggerAnimation();

    function triggerAnimation(){
      $(window).on('scroll', function(){  
        window.requestAnimationFrame(animateSlide);
      });
    } 

    function animateSlide(){
      var divTop = $(window).scrollTop(),
      divBottom = $('.year').offset().top + $('.year').outerHeight();

      $('.year').each(function(){
        if (divBottom > divTop) {
          $('.slide__left').css({
            '-moz-transform': 'translate3d(0px, 0, 0)',
            '-webkit-transform': 'translate3d(0px, 0, 0)',
            '-ms-transform': 'translate3d(0px, 0, 0)',
            '-o-transform': 'translate3d(0px, 0, 0)',
            'transform': 'translate3d(0px, 0, 0)',
            'opacity': 1,
            'left': 0
          });

          $('.slide__right').css({
            '-moz-transform': 'translate3d(0px, 0, 0)',
            '-webkit-transform': 'translate3d(0px, 0, 0)',
            '-ms-transform': 'translate3d(0px, 0, 0)',
            '-o-transform': 'translate3d(0px, 0, 0)',
            'transform': 'translate3d(0px, 0, 0)',
            'opacity': 1,
            'right': 0
          });
        } else {
          $('.slide__left').css({
            '-moz-transform': 'translate3d(0px, 0, 0)',
            '-webkit-transform': 'translate3d(0px, 0, 0)',
            '-ms-transform': 'translate3d(0px, 0, 0)',
            '-o-transform': 'translate3d(0px, 0, 0)',
            'transform': 'translate3d(0px, 0, 0)',
            'opacity': 0,
            'left': '-150px'
          });

          $('.slide__right').css({
            '-moz-transform': 'translate3d(0px, 0, 0)',
            '-webkit-transform': 'translate3d(0px, 0, 0)',
            '-ms-transform': 'translate3d(0px, 0, 0)',
            '-o-transform': 'translate3d(0px, 0, 0)',
            'transform': 'translate3d(0px, 0, 0)',
            'opacity': 0,
            'right': '-150px'
          });
        }
      });
    }

    $('.images').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
      console.log(event);

      var i = (currentSlide ? currentSlide : 0) + 1;
      slick.$nextArrow.text(i + '/' + slick.slideCount + ' next');
    });

    $(".images").slick();
    $('.images').slickLightbox({
      src: 'src',
      itemSelector: 'img',
      prevArrow: false,
      nextArrow: false
    });
  });

SCSS：

//
// App
// ----------------------------------------
html, body{
  background-color: #efefef;
  padding: 0;
  overflow-x: hidden;
}
.uppercase{
  text-transform: uppercase
}
header{
  color: #fff;

  .section__title{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 50%;
    margin: auto;
    text-align: center;

    h1{
      font-size: 48px;
    }

    p {
      font-size: 20px;
    }

    .header__subtitle{
      margin-top: 100px;
      padding: 10px;
    }

    .line{
      width: 50px;
      height: 1px;
      background-color: #fff;
      border-radius: 1px;
    }
    i{
      padding: 20px;
    }
  }

}

#legendary__intro{
  background: url(../images/fpo-spotlight.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}
main{padding: 15px;}
.year {
  display: flex;
  flex-flow: row wrap;
  padding: 40px 0;

  &__copy {
    flex: 0 0 50%;
    display: flex;
    justify-content: flex-end;
    margin: auto;
    opacity: 0;
    transition: all .2s ease-in-out;
    transform: translate3d(0px, 30px, 0);
    opacity: 0;

    &__.active{
      transform: translate3d(0px, 0, 0);
      opacity: 1;
    }

    .year__data{
      width: 75%;
      line-height: 1.5;
      letter-spacing: 1px;

      .date, .description{
        font-size: 26px;
      }
      .subtitle{
        font-size: 48px;
        margin: 0;
      }
    }
  }

  &__images {
    align-items: flex-end;
    display: flex;
    flex: 0 0 50%;
    justify-content: flex-end;
    max-height: 600px;

  }

  .slide__left{
    opacity: 0;
    transition: all .8s ease-in-out;
    transform: translate3d(0px, 30px, 0);
    opacity: 0;
    left: -150px;
    position: relative;
  }
  .slide__right{
    opacity: 0;
    transition: all .8s ease-in-out;
    transform: translate3d(0px, 30px, 0);
    opacity: 0;
    right: -150px;
    position: relative;
  }
}

.images {
  width: 600px;

  &__image {
    display: block;
    float: left;
    width: 100%;
  }
}

.fs__icon {
    bottom :0px;
    right: 0px;
    margin-left: -45px;
    width:45px;
    height:45px;
    background: url(../fullscreen.png) no-repeat 0 0;
    z-index:2;
    opacity:1;
  }

.slick-slider {
  position: relative;

  .slick-list {
    overflow: hidden;
  }

  .slick-prev {
    display: none !important;
  }

  .slick-next {
    left: -32px;
    position: absolute;
    top: 50%;
    background-color: #cc0000;
    border: none;
  }
}

.slick-lightbox-slick{
  .slick-next{
    display: none !important;
  }
}

0 个答案:

没有答案
相关问题
最新问题