视觉差效果浅析

标签: 视觉差效果  视觉差效果shxiian  效果

前言

视觉差效果是一种比较炫酷的网站效果,最近在GitHub上闲逛的时候,看到视觉差效果相关的插件,就想看看是怎样的实现原理,本文仅仅是实现两种类似视觉差效果,对其实现原理介绍下。

具体实现

首先看看视觉差效果是什么效果,效果如下:
这里写图片描述

都设置了256fps,上图中的效果好像不明显,你可以点击这个链接,实际去体验下。

实际上视觉差效果有两种体现:

  • 动与静的对比
  • 都动,但速率不同有速度差

第一种动与静的体现,常见的是形式是背景图动,文本内容不同。
第二种是两个相邻元素存在速度差,可以明显体现出速度差,从而实现展开或覆盖效果。

本次demo就是实现上面两种,具体的效果如下:
这里写图片描述

序章一部分是体现动与静
序章二与三体验速度差的效果

下面就具体说说实现的原理,实际上核心的处理就是:

  • scroll事件
  • background属性
  • transform: translateY

动与静的效果

在scroll事件下,结合scrollTop值设置background-position值来实现的

scroll: function(val, isTop) {
      // 设置background-position的值
      this.rellaxes.forEach(item => {
        item.style.cssText = `background: url(../images/parallax.jpg) center ${val}px no-repeat`;
      });
    },
    onEvents: function() {
      const that = this;
      const pos = this.currentPosition;
      window.addEventListener('scroll', function(e) {
       // 获取scrollTop
        const scrollTop = doc.documentElement.scrollTop || 
                          window.pageYOffset || 
                          doc.body.scrollTop;
        // 处理滑动到底部抖动问题
        if (htmlEle.scrollHeight - 5 <= htmlEle.clientHeight + scrollTop) return;
        // 判断向上滑动和向下滑动,计算backgound中的值
        const isToTop = scrollTop < pos;
        const currPos = isToTop ? scrollTop - pos : pos + scrollTop;
        that.currentPosition = currPos;
        that.scroll(currPos, isToTop);
      });

速度差效果

scroll事件 + transform translateY值得设置

通过不同的速度来设置每块区域的translateY值,从而体现速度差。

总结

这是一个小demo,体验效果没有专门的视觉差插件处理的效果好,如果你想要深入研究视觉差效果,这边有几个插件推荐:

原文链接:加载失败,请重新获取