图像显示向下滚动javascript

时间：2017-09-20 00:08:55

标签： javascript scroll image-gallery

我在尝试让图片库向下滚动时出现问题。当用户向下滚动到页面的投资组合部分时，我希望它显示出来。

我正在尝试将效果与我已经拥有的一些javascript结合起来，按顺序加载图像。该示例位于我的codepen上。 

$(document).ready(function(){
  window.onload = function() {$('#title').hide().fadeIn(1000);};
});

document.addEventListener('DOMContentLoaded', function(){
  let wrapper = document.getElementById('wrapper');
  let topLayer = wrapper.querySelector('.top');
  let handle = wrapper.querySelector('.handle');
  let skew = 0;
  let delta = 0;
  
  if(wrapper.className.indexOf('skewed') != -1){
   skew = 1000;
   }

wrapper.addEventListener('mousemove', function(e){
  delta = (e.clientX - window.innerWidth / 2) * 0.5;
  
  handle.style.left = e.clientX + delta + 'px';
  
  topLayer.style.width= e.clientX + skew + delta + 'px';
  });
});

// $(document).ready(function() {
    
//     /* Every time the window is scrolled ... */
//     $(window).scroll( function(){
    
//         /* Check the location of each desired element */
//         $('.column').each( function(i){
            
//             var bottom_of_object = $(this).offset().top + $(this).outerHeight();
//             var bottom_of_window = $(window).scrollTop() + $(window).height();
            
//             /* If the object is completely visible in the window, fade it it */
//             if( bottom_of_window > bottom_of_object ){
                
//                 $(this).animate({'opacity':'1'},500);
                    
//             }
            
//         }); 
    
//     });
    
// });

$(".column").each(function(i) {
  $(this).delay(i * 1000).fadeIn(1000);
});
* {
  margin: 0;
  padding: 0;
}

body{
  margin: 0;
  padding:0;
  font-size: 100%;
/*   line-height: 1.6; */
/*   font-family: Arial, Helvetica, sans-serif; */
}

.header{
  margin: 0 auto;
  width: 100%;
  background-color: #333;
  padding: 30px 0 0 0; 
}

.header h1{
  margin: 0;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
/*   padding: 0; */
  overflow: hidden;
  padding: 20px 0px 30px 0;
  text-align: center;
}

li {
  display: block;
  display: inline-block;
/*   border-right: 1px solid #bbb; */
  border-right: 1px solid #bbb;
  height: 25px;
}

li:last-child{
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 0px 40px;
  font-size: 1em;
}

li a:hover{
  color: #7bbe9a;
/*   color: #80b198; */
}

#wrapper{
  position: relative;
  width: 100%;
  min-height:55vw;
  overflow: hidden;
}

.layer{
  position:absolute;
  width:100vw;
  min-height: 55vw;
  overflow: hidden;
}

.layer .content-wrap{
  position: absolute;
  width:100vw;
  min-height: 55vw;
}

.layer .content-body{
  width: 25%;
  position:absolute;
/*   top:50%; */
  top: 25%;
  text-align: center;
  transform:translateY(-50%);
  color:#fff;
}

.layer img{
  position:absolute;
  width:65%;
/*width: 35%    */
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.layer h1 {
  font-size:2em;
}

.bottom{
  background:#686965;
  z-index:1;
}

.bottom .content-body{
  right:5%;
}

.bottom h1{
  color:#7bbe9a;
}

.top{
  background:#eff0ec;
  color:#222;
  z-index:2;
  width:50vw;
}

.top .content-body{
  left:5%;
  color:#333;
}

.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color: #7bbe9a;
  width: 5px;
  top:0;
  left: 50%;
  z-index:3;
}

.skewed .handle{
  top:50%;
  transform:rotate(30deg) translateY(-50%);
  height:200%;
  transform-origin:top;
}

.skewed .top{
  transform: skew(-30deg);
  margin-left:-1000px;
  width: calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(30deg);
  margin-left:1000px;
}

@media(max-width:768px){
  body{
    font-size:75%;
  }
}

.gallery{
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
/*   padding-top: 15%; */
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
}

.column {
  width: 33.33%;
  float: left;
  display: block;
  background: #7bbe9a;
  display:none;
}

.column img{
  display: block;
  width: 100%;
/*   position: relative;
  overflow: hidden; */
  height: auto;
  opacity: 1;
  border: none;
}

.column img:hover {
/*   background-color: rgb(123, 190, 154); */
  opacity: 0.2;
  transition: .5s ease;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
  </head>
  <body>
    <div class="header">
      <div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
      <nav id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
    <section id="wrapper" class="skewed">
      <div class="layer bottom">
        <div class="content-wrap">
          <div class="content-body">
            <h1>Designer</h1>
<!--             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
          </div>
          
          <img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
        </div>
      </div>
      
      <div class="layer top">
        <div class="content-wrap">
          <div class="content-body">
            <h1>Developer</h1>
<!--             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
          </div>
          
          <img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
        </div>
      </div>
      
      <div class="handle"></div>
    </section>
    
    <a class="anchor" name="portfolio">
    <div class="gallery">
      <h2>Portfolio</h2>
      </a>
      <div class="column box">
      <a href="">
        <img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
        <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
        <img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
      <img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
      <img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
      <img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
        <img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
        <img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a>
      </div>
      <div class="column box">
      <a href="">
        <img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a>
      </div>
    </div>
    
    <script src=""></script>
  </body>
</html>

2 个答案:

答案 0 :(得分：0)

当您在display: none上使用.column时，整个元素消失，当滚动开始时，它会突然出现在DOM中，计算会变成香蕉。我基本上只是更改了列类的css，所以请尝试运行下面的代码，看看它是否可以正常工作。我还删除了列类的延迟。

$(document).ready(function() {
  window.onload = function() {
    $('#title').hide().fadeIn(1000);
  };
});

document.addEventListener('DOMContentLoaded', function() {
  let wrapper = document.getElementById('wrapper');
  let topLayer = wrapper.querySelector('.top');
  let handle = wrapper.querySelector('.handle');
  let skew = 0;
  let delta = 0;

  if (wrapper.className.indexOf('skewed') != -1) {
    skew = 1000;
  }

  wrapper.addEventListener('mousemove', function(e) {
    delta = (e.clientX - window.innerWidth / 2) * 0.5;

    handle.style.left = e.clientX + delta + 'px';

    topLayer.style.width = e.clientX + skew + delta + 'px';
  });
});

$(document).ready(function() {

  /* Every time the window is scrolled ... */
  $(window).scroll(function() {

    /* Check the location of each desired element */
    $('.column').each(function(i) {
      var bottom_of_object = $(this).offset().top + $(this).innerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* If the object is completely visible in the window, fade it it */
      if (bottom_of_window > bottom_of_object) {

        $(this).animate({
          "opacity": "1"
        }, 500);
      }

    });

  });

});
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  /*   line-height: 1.6; */
  /*   font-family: Arial, Helvetica, sans-serif; */
}

.header {
  margin: 0 auto;
  width: 100%;
  background-color: #333;
  padding: 30px 0 0 0;
}

.header h1 {
  margin: 0;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  /*   padding: 0; */
  overflow: hidden;
  padding: 20px 0px 30px 0;
  text-align: center;
}

li {
  display: block;
  display: inline-block;
  /*   border-right: 1px solid #bbb; */
  border-right: 1px solid #bbb;
  height: 25px;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 0px 40px;
  font-size: 1em;
}

li a:hover {
  color: #7bbe9a;
  /*   color: #80b198; */
}

#wrapper {
  position: relative;
  width: 100%;
  min-height: 55vw;
  overflow: hidden;
}

.layer {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
  overflow: hidden;
}

.layer .content-wrap {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
}

.layer .content-body {
  width: 25%;
  position: absolute;
  /*   top:50%; */
  top: 25%;
  text-align: center;
  transform: translateY(-50%);
  color: #fff;
}

.layer img {
  position: absolute;
  width: 65%;
  /*width: 35%    */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layer h1 {
  font-size: 2em;
}

.bottom {
  background: #686965;
  z-index: 0;
}

.bottom .content-body {
  right: 5%;
}

.bottom h1 {
  color: #7bbe9a;
}

.top {
  background: #eff0ec;
  color: #222;
  z-index: 2;
  width: 50vw;
}

.top .content-body {
  left: 5%;
  color: #333;
}

.handle {
  position: absolute;
  height: 100%;
  display: block;
  background-color: #7bbe9a;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
}

.skewed .handle {
  top: 50%;
  transform: rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin: top;
}

.skewed .top {
  transform: skew(-30deg);
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}

.skewed .top .content-wrap {
  transform: skew(30deg);
  margin-left: 1000px;
}

@media(max-width:768px) {
  body {
    font-size: 75%;
  }
}

.gallery {
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
  /*   padding-top: 15%; */
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
}

.column {
  width: 33.33%;
  float: left;
  display: block;
  background: #7bbe9a;
  opacity: 0;
}

.column img {
  display: block;
  width: 100%;
  /*   position: relative;
  overflow: hidden; */
  height: auto;
  opacity: 1;
  border: none;
}

.column img:hover {
  /*   background-color: rgb(123, 190, 154); */
  opacity: 0.2;
  transition: .5s ease;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="">
</head>

<body>
  <div class="header">
    <div id="title">
      <h1>Lorem Ipsum 3D Online Portfolio</h1>
    </div>
    <nav id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
  <section id="wrapper" class="skewed">
    <div class="layer bottom">
      <div class="content-wrap">
        <div class="content-body">
          <h1>Designer</h1>
          <!--             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
        </div>

        <img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
      </div>
    </div>

    <div class="layer top">
      <div class="content-wrap">
        <div class="content-body">
          <h1>Developer</h1>
          <!--             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
        </div>

        <img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
      </div>
    </div>

    <div class="handle"></div>
  </section>

  <a class="anchor" name="portfolio">
    <div class="gallery">
      <h2>Portfolio</h2>
  </a>
  <div class="column box">
    <a href="">
      <img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a>
  </div>
  <div class="column box">
    <a href="">
      <img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a>
  </div>
  </div>

  <script src=""></script>
</body>

</html>

答案 1 :(得分：0)

你不需要fadeIn（）;因为你在codepen中包含了scrollreveal，所以我更新了你的JS：

window.sr = ScrollReveal({ duration: 2000 });
sr.reveal('.column', 500);


document.addEventListener('DOMContentLoaded', function(){
  let wrapper = document.getElementById('wrapper');
  let topLayer = wrapper.querySelector('.top');
  let handle = wrapper.querySelector('.handle');
  let skew = 0;
  let delta = 0;

  if(wrapper.className.indexOf('skewed') != -1){
   skew = 1000;
   }

wrapper.addEventListener('mousemove', function(e){
  delta = (e.clientX - window.innerWidth / 2) * 0.5;

  handle.style.left = e.clientX + delta + 'px';

  topLayer.style.width= e.clientX + skew + delta + 'px';
  });
});

// $(document).ready(function() {

//     /* Every time the window is scrolled ... */
//     $(window).scroll( function(){

//         /* Check the location of each desired element */
//         $('.column').each( function(i){

//             var bottom_of_object = $(this).offset().top + $(this).outerHeight();
//             var bottom_of_window = $(window).scrollTop() + $(window).height();

//             /* If the object is completely visible in the window, fade it it */
//             if( bottom_of_window > bottom_of_object ){

//                 $(this).animate({'opacity':'1'},500);

//             }

//         }); 

//     });

// });

添加了这个片段，很简单：

window.sr = ScrollReveal({ duration: 2000 });
sr.reveal('.column', 500);

请务必在css中的此类.column中删除属性display：none。

我分叉你的codepen，也许是你想要的解决方案。

https://codepen.io/joannesalfa/pen/JrXrRX

如果您想修改此动画效果，请查看此文档：

https://github.com/jlmakes/scrollreveal

相关问题
最新问题