如何创建在过渡期间飞过页面的滑块效果？答案

【问题标题】：How to create slider effect looking which flies across the page during transition?如何创建在过渡期间飞过页面的滑块效果？
【发布时间】：2015-12-16 09:01:43
【问题描述】：

我一直在研究寻找不同类型的滑块，但我仍然无法在这个网站上找到类似的东西：

http://www.addiction.com.tw/

在这个网站的第二页有一个滑块，在转换过程中，它看起来像是飞过页面。

我想创建一个类似的滑块，有人可以帮忙吗？

【问题讨论】：

您是说这个小部件吗？ bxslider.com
只提供一些图片而不是链接

标签： slider helper

【解决方案1】：

以下是所有advice.com.tw插件：

jquery.min.js
jquery.scroll.events.js
jquery.touchSwipe.js
detectmobilebrowser.c.js
jquery.scrollTo-min.js
jquery.localscroll-min.js
easySlider1.7.c.js
jquery.shadowbox.js
jquery.bxSlider.min.js
jquery.fancybox.js

每个脚本都在这里启动：

http://www.addiction.com.tw/js/site.js

异常位于<head>:

<script>
Shadowbox.init();

$(document).ready(function() {
    $("a#inline").fancybox({ 
        'hideOnContentClick': false,
        'overlayOpacity': 0.85}).click();
});
</script>

注意：虽然 bxSlider 已加载，但我没有看到它实际被使用。该网站的主要导航形式是一种称为视差的特殊滚动。我认为 easySlider 插件对此负责。

这个网站不依赖像 Word-Press 这样的千篇一律的工具，也没有像 Bootstrap 这样的主要框架。它非常干净（除了未使用 bxSlider）。视差滚动可以从头开始编写，而不是使用插件。看到这个：http://andyshora.com/parallax.html

如果您熟悉 HTML、CSS、JS/jQuery，这是一个值得学习的好网站。

【讨论】：

但是如果没有称为视差的特殊滚动类型，就无法创建滑块？
当然可以，但不会有你可能想要的那种背景滑动效果。尝试使用easySlider，还有其他内置视差的插件。我认为这个网站的创建者使用了插件的组合加上前面提到的网站（andyshora.com）中详述的视差滚动过程