前端动效交互分享

一、平滑滚动

使页面在滚动时更缓和增加用户的视觉体验

1、CSS实现平滑滚动：scroll-behavior

scroll-behavior属性是CSS的一个属性，用于控制元素滚动到指定位置时的行为方式。这个属性可以接受两个值：auto和smooth。

auto：这是默认值，表示滚动将立即跳转到指定位置，没有任何过渡效果。

smooth：表示滚动将平滑地过渡到指定位置，提供一种更加自然和优雅的视觉体验。

使用方法：

/* 全局使用 */
:root {
     scroll-behavior: smooth;
}

/* 单独使用 */
.scroll-smooth {
    overflow: auto;
     scroll-behavior: smooth;
}

2、CSS滚动边距

scroll-margin 简写属性，属性定义了滚动吸附区域的外边距，用于设置锚点滚动时预留的外边距，它会找到元素的矩形边界（在滚动的容器的坐标空间轴上），并添加指定的起点。

scroll-padding 简写属性，属性定义了滚动吸附区域的内边距。scroll-margin是直接设置锚点目标元素上的，而scroll-padding不一样，它需要设置在滚动容器上，比如：

html {
  scroll-padding-top: 6rem;
}

参考资料：https://www.jb51.net/css/902805.html

一般情况下，两种方式都可以自行选择，如果很清楚滚动容器是哪个，可以直接选择用scroll-padding，否则就用scroll-margin

3、JS平滑滚动

smooth Scrollbar 是一个 JavaScript 插件，可让您自定义跨浏览器的高性能滚动条。它用于translate3d在现代浏览器上执行基于动量的滚动（又称惯性滚动）。借助灵活的插件系统，我们可以轻松地根据需要重新设计滚动条！

地址：https://idiotwu.github.io/smooth-scrollbar/

使用方法：

<script src="~/content/@(this.Context.GetCurrentSite().Identifier)/base/js/smooth-scrollbar.js" asp-append-version="true"></script>
<script>
    var Scrollbar = window.Scrollbar;
    Scrollbar.init(document.querySelector('#my-scrollbar'));
</script>

注意事项

使用 JavaScript 模拟滚动条始终是一个有争议的问题。一方面，它提供了对滚动条的完全控制。然而，另一方面，它降低了用户体验，因为原生行为是无法比拟的。

如：性能问题、兼容问题

二、滚动动画

使用Choreographer.js库实现滚动与鼠标交互动画。

Choreographer-js是一个轻量级的JavaScript库，专为创建复杂动画而设计。在Web开发中，动画效果是提升用户体验的重要元素，它们可以增加交互性，使网站或应用更具吸引力。

<script src="~/content/@(this.Context.GetCurrentSite().Identifier)/base/js/choreographer.min.js" asp-append-version="true"></script>
<script>
  let choreographer = new Choreographer({
        animations: [
          {
            range: [-1, window.innerWidth],
            selector: '#industry',
            type: 'scale',
            style: 'transform:translateX',
            from: -20,
            to: 20,
            unit: 'px'
          }
        ]
      })
      document.body.addEventListener('mousemove', (e) => {
        choreographer.runAnimationsAt(e.clientX)
      })
</script>

地址：https://github.com/christinecha/choreographer-js

三、图片裁剪

使用CSS3实现图片和视频裁剪

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

通常应用在Banner轮播、背景图切换等。

参考资料：https://www.runoob.com/cssref/pr-object-fit.html