Блог

Главная - Вопросы по программированию - Слайд Divs при прокрутке

Слайд Divs при прокрутке

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я использую этот пример для вставки divs при прокрутке. По сути, я скопировал и вставил код, затем изменил имя класса, в которое я хочу вставить, прежде чем начать переделывать код. Но это вообще не работает. В журнале консоли ничего не отображается, поэтому нет синтаксических ошибок или пропущенных точек с запятой. Я полностью застрял, если кто-нибудь может указать на то, чего мне не хватает, это было бы мило.

 (function($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop   $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top   $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) amp;amp; (compareTop >= viewTop));

  };
    
})(jQuery);

var win = $(window);

var gallery = $("#gallery");

gallery.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
        el.addClass("already-visible"); 
    } 
});

win.scroll(function(event) {  
  gallery.each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in"); 
        } 
    });  
});  
 .panel {
  padding: 8% 0;
}

#gallery {
  height: 1385px;
  height: 211vh;
  position: relative;
  width: 80%;
  margin-left: 10%;
}

#images-gallery {
  display: grid;
  height: 1385px;
  height: 211vh;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  width: 100%;
}

.gallery-item {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.gallery-item:hover {
  cursor: pointer;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, .5);
  text-align: center;
  z-index: 2;
  display: none;
}

#lightbox img {
  box-shadow: 0 0 25px #111;
  -webkit-box-shadow: 0 0 25px #111;
  -moz-box-shadow: 0 0 25px #111;
  max-width: 500px;
  max-height: 500px;
}

#image-one {
  background-image: url("https://i.ibb.co/HXfG735/tattoo.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-two {
  background-image: url("https://i.ibb.co/kBJrryt/7ab34470-9318-4fc1-a6da-656ca31399c5.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-three {
  background-image: url("https://i.ibb.co/SKCnT4d/b19aaf2a-84cf-42b4-9ccd-6205ca1be395.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-four {
  background-image: url("https://i.ibb.co/xF4Qv50/b5d6695b-2142-42cc-8eef-2963311edfd6.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-five {
  background-image: url("https://i.ibb.co/wS1N4M8/41fa959a-3c96-45d7-9e2c-8cbf78866b1a.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-six {
  background-image: url("https://i.ibb.co/0rHYr7K/2828c725-d0d8-48b5-8f75-57bccd6830af.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-seven {
  background-image: url("https://i.ibb.co/2M2fw9h/a430dbb8-6006-499f-8583-814da647838a.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-eight {
  background-image: url("https://i.ibb.co/0nY3VDG/d1ecf205-6b1b-4a1a-b94b-7d75aa177464.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-nine {
  background-image: url("https://i.ibb.co/QYf6vDY/48a63fe2-066b-42d1-9211-040c6977ceff.jpg");
  background-size: cover;
  background-position: 0% 40%;
}

#image-ten {
  background-image: url("https://i.ibb.co/7RdJqgP/ce30fff2-1679-403f-8431-c6be4f8b1466.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-eleven {
  background-image: url("https://i.ibb.co/FnHSXFk/d1469435-7683-4fc0-975b-571b8d6f3bda.jpg");
  background-size: cover;
  background-position: 0% 40%;
}

#image-twelve {
  background-image: url("https://i.ibb.co/BtJxDc7/24b54530-710f-4173-a32a-36bd24a496e0.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s;
  /* So they look staggered */
}

.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery" class="panel">
  <div id="images-gallery">
    <div id="image-one" class="gallery-item">
      <a href="https://i.ibb.co/HXfG735/tattoo.jpg"></a>
    </div>
    <div id="image-two" class="gallery-item">
      <a href="https://i.ibb.co/kBJrryt/7ab34470-9318-4fc1-a6da-656ca31399c5.jpg"></a>
    </div>
    <div id="image-three" class="gallery-item">
      <a href="https://i.ibb.co/SKCnT4d/b19aaf2a-84cf-42b4-9ccd-6205ca1be395.jpg"></a>
    </div>
    <div id="image-four" class="gallery-item">
      <a href="https://i.ibb.co/xF4Qv50/b5d6695b-2142-42cc-8eef-2963311edfd6.jpg"></a>
    </div>
    <div id="image-five" class="gallery-item">
      <a href="https://i.ibb.co/wS1N4M8/41fa959a-3c96-45d7-9e2c-8cbf78866b1a.jpg"></a>
    </div>
    <div id="image-six" class="gallery-item">
      <a href="https://i.ibb.co/0rHYr7K/2828c725-d0d8-48b5-8f75-57bccd6830af.jpg"></a>
    </div>
    <div id="image-seven" class="gallery-item">
      <a href="https://i.ibb.co/2M2fw9h/a430dbb8-6006-499f-8583-814da647838a.jpg"></a>
    </div>
    <div id="image-eight" class="gallery-item">
      <a href="https://i.ibb.co/0nY3VDG/d1ecf205-6b1b-4a1a-b94b-7d75aa177464.jpg"></a>
    </div>
    <div id="image-nine" class="gallery-item">
      <a href="https://i.ibb.co/QYf6vDY/48a63fe2-066b-42d1-9211-040c6977ceff.jpg"></a>
    </div>
    <div id="image-ten" class="gallery-item">
      <a href="https://i.ibb.co/7RdJqgP/ce30fff2-1679-403f-8431-c6be4f8b1466.jpg"></a>
    </div>
    <div id="image-eleven" class="gallery-item">
      <a href="https://i.ibb.co/FnHSXFk/d1469435-7683-4fc0-975b-571b8d6f3bda.jpg"></a>
    </div>
    <div id="image-twelve" class="gallery-item">
      <a href="https://i.ibb.co/BtJxDc7/24b54530-710f-4173-a32a-36bd24a496e0.jpg"></a>
    </div>
  </div>
</div>

Комментарии:

1. Это выдает мне ошибки на консоли, пожалуйста, взгляните на свою консоль еще раз.

2. Исправлено. Ошибок нет, просто пусто — точно так же, как на моей веб-странице (с кодом Jquery)

Ответ №1:

Это довольно просто. Все работает так, как должно. Вам просто не хватает, чтобы установить .come-in и .already-visible в opacity: 1; . Они установлены на opacity: 0; по умолчанию, поэтому вам нужно перевести их на opacity: 1 , когда они уже видны или «поступают». 

 .come-in {
    transform: translateY(150px);
    animation: come-in 0.8s ease forwards;
    opacity: 1;
}

.already-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}