我想制作一个可滚动的项目列表,以便在视口中的每个滚动事件上平滑缩放。
它的外观必须是这样的:link to demo(包含项目的第二部分)。
在此演示中,它是通过translateY
在mousedown和mouseup事件上完成的。我们可以通过滚动事件来做到这一点吗?
$(document).on('scroll', function(e) {
var scrollTop = $(document).scrollTop();
var section = $('.clients-list').position().top;
if (section <= scrollTop && section + $('.clients-list').height() > scrollTop) {
$('.clients-list').css('transform', 'scale(' + scrollTop * 0.0065 + ', ' + scrollTop * 0.0065 + ')');
}
});
body {
overflow-x: hidden;
}
.clients-list {
left: 4%;
top: 25%;
z-index: -1;
-webkit-transform-origin: top left;
transform-origin: top left;
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1140px;
text-align: left;
will-change: transform;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
}
.clients-list li {
font-weight: 700;
-webkit-font-smoothing: auto;
font-size: 8rem;
margin: 0;
line-height: 8rem;
letter-spacing: -.04em;
white-space: nowrap;
color: #f7f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clients-list">
<li>Asics</li>
<li>Nike</li>
<li>Heineken</li>
<li>Tomtom</li>
<li>Real Madrid Resort Island</li>
<li>De Bijenkorf</li>
<li>Nicolas Feuillatte</li>
<li>Yves Saint Laurent</li>
<li>Lancome</li>
<li>L'Oréal</li>
<li>Strongbow cider</li>
<li>Stassen cider</li>
<li>Dove</li>
<li>Jumbo</li>
<li>GVB</li>
</ul>
我想添加平滑的滚动,因为现在所有项目在滚动时都在跳跃。