在滚动上滑动Div

Question

我正在使用此示例在滚动中滑动div。 我基本上复制并粘贴了代码，然后在开始修改代码之前切换了我要插入的类名。 但是，它根本不起作用。 控制台日志中没有任何内容，因此没有语法错误或缺少分号。 我完全陷入困境，如果有人能指出我所缺少的东西，那将是甜蜜的。

 (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) && (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> 

Answer 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;
}