专栏首页西城知道【转】动效案例:纯手工写一个滚动视差效果

【转】动效案例:纯手工写一个滚动视差效果

以下文章来源于前端达人 ,作者前端达人

大家好,今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师,不擅长PS、AE,但是我们完全可以通过前端技术设计一幅漂亮的画面,今天我们要设计一幅月下山间小道开车的画面。在介绍之前,我们首先了解下什么是滚动视差,有助于我们实现这个案例。

一、什么是滚动视差?

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为网页设计的热点趋势,越来越多的网站应用了这项技术。

视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。

本内容来自百度百科

二、案例的效果展示

你可能迫不及待的想知道我们要做个什么样的效果,如下视频所示,我们滚动往下滑动浏览器的滚动条,月亮往左边移动,高山往上移动,文字往下移动,最终随着滚动条的滚动,淡出我们的视野

纯手工写一个滚动视差效果
纯手工写一个滚动视差效果

三、涉及到知识点

1、mix-blend-mode

你可能注意到了我们界面上的图片色调基本一致,其实原图片是有色彩的,那么问题来了,是如何实现这个效果呢,我们在所有的图片上层盖了一个背景色,这里用到 mix-blend-mode:color 的属性进行与图片的颜色进行混合。这是 CSS3 新增的属性,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

为了更好理解这个属性,我们可以借鉴PS混合图层

2、window属性:scrollY

在这里我们使用JS脚本动态更新相关图片在界面的位置,这是我们制作滚动视差的关键。我们通过window的scrollY属性来充当因子变量,控制各图片在平面移动的距离,来回滚动又能恢复原先各自的位置。

Window接口的只读scrollY属性返回文档当前垂直滚动的像素数。这个值在现代浏览器中是亚像素精确的,这意味着它不一定是整数。您可以从scrollX属性中获取文档水平滚动的像素数。实际上,返回值是一个双精度浮点值,表示文档当前从原点垂直滚动的像素数,其中正值表示内容向上滚动。

四、准备图片素材

首先我们先准备下四张素材图片,分别对应星空、月亮、高山、奔驰在山间小路的小车,请注意这四张图片的大小一定要保持一致,尽量png图片,方便图片叠加成一张大图,图片资源可以在文末源码下载链接里进行获取。

五、创建HTML结构

HTML结构非常简单,我们依次排列图片,放在 section 标签区域即可,示例代码如下:

   <section>
      <img src="./images/bg.jpg" id="bg" />
      <img src="./images/moon.png" id="moon" style="z-index: 3;" />
      <img src="./images/mountain.png" id="mountain" />
      <img src="./images/road.png" id="road" />
      <h2 id="text">Moon Light</h2>
    </section>

六、编写CSS部分

1、首先我们来定义全局属性,引用字体Poppins,设定背景色为墨兰色,视口高度为150Vh, 让浏览器出现滚动条,示例代码如下:

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #0a2a43;
    min-height: 150vh;
}

2、接下来我们来定义 section 区域为弹性盒子容器,并定义position: relative; 让内部的图片参照其进行位置浮动,改变其正常流的布局方式。

section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

3、接下来我们使用伪元素 ::before 和 ::after 来在section区域在所有的图片上覆盖一层墨蓝色的背景,使用mix-blend-mode: color 属性让图片的颜色保持一致性,给人一种月色已晚高冷的感觉,并在图片下方绘制一种线性渐变的背景色,让其自然过渡到非图片区域。示例代码如下:

section::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #0a2a43, transparent);
    z-index: 10000;
}

section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a2a43;
    z-index: 10000;
    mix-blend-mode: color;
}

4、最后为了让文字有一种夹在高山和山间小路之间的感觉,让文字往下移动时,被山间小路图片盖住,这里我们需要更改 z-index属性,示例代码如下:

#text {
    position: relative;
    color: #fff;
    font-size: 10em;
    z-index: 1;
}

#road {
    z-index: 2;
}

到这里我们的CSS部分就结束了,是不是很简单呢,最后我们来编写JS脚本。

七、编写脚本

JS脚本为本示例的核心部分,这里通过定义变量获取window.scrollY的属性,作为变量因子,更改各图片的移动位置,并能进行恢复各自初始的位置,脚本代码如下:

let bg = document.getElementById("bg");
let moon = document.getElementById("moon");
let mountain = document.getElementById("mountain");
let road = document.getElementById("road");
let text = document.getElementById("text");

window.addEventListener('scroll', function () {
    var value = window.scrollY;
    bg.style.top = value * 0.5 + 'px';
    moon.style.left = -value * 0.5 + 'px';
    mountain.style.top = -value * 0.15 + 'px';
    road.style.top = value * 0.15 + 'px';
    text.style.top = value * 1 + 'px';
});

八、源码及效果展示

最终的效果体验,点击进行体验(高清宽屏大图,请耐心等待下载,手机横屏体验),由于文章篇幅有限,完整的源码大家可以点击以下链接下载:

链接:点击下载 密码:et62

本文转载自: https://mp.weixin.qq.com/s/ThotL58T3c2KTjS5KCxvrA复制
如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 动效案例:纯手工写一个滚动视差效果

    大家好,今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师,不擅长PS、AE,但是我们完全可以通过前端技术设计一幅漂亮的画面,今天我们要设计一幅月下山...

    前端达人
  • 动效案例:纯手工写一个滚动视差效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为网页设计的热点趋势,越来越多的网...

    前端达人
  • 收藏夹吃灰了:GitHub 上值得收藏的100个精选前端项目

    codrops 一系列具有相当具有创意且有趣的前端效果的集合,是非常棒的学习资料,可以欣赏和下载使用。并且有些项目,也托管到了github仓库中

    王小婷
  • GitHub 上100个优质前端项目整理,非常全面!

    作 者:小明小明长大了 来 源:https://www.jianshu.com/p/72ca8192f7b8

    开发者技术前线
  • Flutter Web在美团外卖的实践

    在多形态业务场景下,如何保障多端体验的一致性,是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端(App\PC\H5...

    美团技术团队
  • iOS开发常用之网络

    GuangdongQi
  • 100个弹框设计小结

    腾讯ISUX
  • 干货 | 2019年6个重要的网站设计趋势

    虽然每个人都在谈论大趋势,比如语音和虚拟现实的设计,但是对于一个更流行的网站,您可以看到更多新颖潮流的设计元素。从没有图片的网站,到图文并茂的企业网站,再到H5...

    微梦科技
  • 编写难于测试的代码的5种方式

    什么是弹框? 弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不...

    用户1667431
  • 滚动穿透的6种解决方案【已自测】

    在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出后铺满了整个屏幕,其下方的dom结构依然...

    xing.org1^
  • 全平台小程序开发框架Uni-app重点概览

    uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

    魏晓蕾
  • 5个小技巧,用动效提升界面的用户体验就这么简单

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过...

    前朝楚水
  • 交互工具哪个好用?来看看静电的具体分析~

    最近一段时间。很多小伙伴问静电这样一个问题,交互工具要用什么好呢?emmm,这个问题还真的不好回答。因为交互这个词,本身就是一个面儿及其广的词。因此,咱们得分清...

    用户5009027
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    桃翁
  • Amazing!巧用 CSS 视差实现酷炫交互动效

    本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效。

    Sb_Coco
  • 网站自适应布局为什么我要抛弃rem,改用vw?

    你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。

    李洋个人博客
  • 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

    前端之所以有趣,就是每年有比较多新奇的插件和工具值得我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这...

    前端达人

扫码关注云+社区

领取腾讯云代金券