像k2.pl一样平滑的水平滚动

smooth horizontal scroll like k2.pl

本文关键字：平滑 一样 水平 滚动 k2 pl      更新时间：2023-09-26

我正在尝试建立一个像这个网站k2.pl 这样的水平滚动网站

描述

到目前为止，我已经将jquery的代码制作成动画并滚动到

// i am getting y and x axis and moving the whole page agains it
$('.scroll').animate( { scrollLeft: '+='+newScroll }

但我所做的是，我的脚本得到了网站的X轴页面，并向它移动，但我想要的是，当我悬停在网站上的一个元素上时，它应该像在这个网站k2.pl 上一样滚动到中心

你们能给我推荐一些jquery插件吗？或者告诉我如何改进它

如果你查看网站并移动鼠标，你会发现悬停在上面的元素并没有真正移动到中心，滚动的移动与鼠标的水平移动相关，与悬停在不同列表元素上无关。

想法很简单：

  • 有一个容器，它占据了窗口的整个宽度，并且有一个overflow:hidden
  • 在该容器内有一个与元素列表宽度相同的第二个容器
  • 在该容器中有一个元素列表（或一系列内联元素），这些元素占据的宽度超过了窗口的宽度
  • 当鼠标在容器上移动时，计算鼠标在窗口中的位置，并相应地水平滚动容器

它的一个基本版本是这样的：

$(document).ready(function() {
  
  $(".scroll").on("mousemove", function(e) {
    
    var ww = $(window).width();       // window width
    var uw = $(".scroll ul").width(); // ul width
    var mp = e.clientX;               // mouse position
    var ms = uw - ww;                 // max scroll
    var sc = - ms * mp / ww;          // amount to be scrolled
    $(".scroll > div").stop().animate({ left: sc +"px" }, 600, "easeOutCirc");
    
  });
  
});
html, body { 
  margin:0;
  padding:0;
  border:0;
}
div.scroll {
  width:100%;
  height:400px;
  overflow:hidden;
  background:#f0f0f0;
  position:relative;
}
div.scroll > div {
  width:1400px;
  position:absolute;
  top:0;
  left:0;
}
div.scroll > div > ul {
  width:1400px;
  margin:0;
  padding:0;
}
div.scroll > div > ul > li {
  display:inline-block;
  float:left;
  width:200px;
  height:400px;
  opacity:0.7;
  transition:all 0.5s;
}
div.scroll > div > ul > li:hover {
  opacity:1;
  background:#6699cc;
}
div.scroll > div > ul > li:hover > span {
  color:white;
  background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="scroll">
  <div>
    <ul>
      <li><span>AAA</span></li>
      <li><span>BBB</span></li>
      <li><span>CCC</span></li>
      <li><span>DDD</span></li>
      <li><span>EEE</span></li>
      <li><span>FFF</span></li>
      <li><span>GGG</span></li>
    </ul>
  </div>
</div>

（注意：如果窗口宽度大于1400px，上面的代码可能不起作用）

如果你检查k2.pl的源代码，你会发现它们使用的是jQuery、jQueryUI和Ariel Flesler的scrollTo插件。您可以在script.min.js文件（搜索mousemove.sapp）中看到控制滚动的代码（与我上面解释的方式不同）。

正如承诺的那样，这是我的工作解决方案。Alvaro的很好，但它使用了jQuery animate函数，这是一个很大的禁忌（例如，它比CSS转换/GSAP JavaScript动画库慢大约10倍），所以我认为您可能会从另一个实现中受益。

我个人喜欢GSAP，它非常容易上手；这就是我在这里使用它的原因。剩下的都是原生JS，所以你不需要所有的库膨胀：

var wrapper = document.getElementById("wrapper");
var tiles = document.getElementsByClassName("tile");
var tileWidth = tiles[0].getBoundingClientRect().width;
var containingWidth = tileWidth * tiles.length;
wrapper.addEventListener("mousemove", function(e){
  var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
  TweenLite.to(wrapper, 1, { scrollLeft: pos, ease: Circ.easeOut })
});
html, body {
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}
#wrapper {
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}
.tile {
  display: inline-block;
  height: 100%;
  width: 400px;
  transition: background 0.2s ease-in-out;
}
.tile:hover {
  background: transparent !important;
}
<div id="wrapper">
  <div style="background: #6d8745" class="tile"></div>
  <div style="background: #aa715a" class="tile"></div>
  <div style="background: #a25fe3" class="tile"></div>
  <div style="background: #8e84f5" class="tile"></div>
  <div style="background: #259a5c" class="tile"></div>
  <div style="background: #d5b67a" class="tile"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

这些原则与阿尔瓦罗的基本相同。你必须理解的是，视口的宽度将是包含所有"瓷砖"的div/元素宽度的一定百分比，因此，考虑到这一点，你必须计算如何使它们以1:1的比例映射。该计算由这行代码表示（末尾的减法是一个偏移）：

var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);

希望这能有所帮助！

原始代码笔

相关文章：