30天打造品牌特色电商网站 Day.27 实作滚动视差

制作滚动视差的动画,使用 javascript 来制作是最为方便的!同时也可以找一些有人写好的套件,就可以轻松制作不用学太多语法。


今天介绍一个可以快速使用的套件

AOS.js Animate On Scroll Library

在需要增加效果的 div 里加入规定的效果名称,在 javascript 里呼叫 AOS 且能视情况设定参数,这边简单介绍一下:

效果名称要放在 data-aos 里

效果名称可以包涵效果、方向

效果

  • fade 淡入淡出
  • flip 折叠式
  • zoom-in 放大进场
  • zoom-out 缩小进场

方向

  • up、down、right、left
    上下左右
  • up-right、up-left
    往右上、往左上
  • down-right、down-left
    往右下、往左下

范例

<div data-aos="fade-down"></div>
<div data-aos="fade-up-right"></div>

fade-down 表示滑动进入这个区块时会往下淡入,
fade-up-right 表示滑动进入这个区块时会往右上方淡入。


动画持续时间放在 data-aos-duration

1000为一秒,不需要加上单位

范例

<div data-aos="fade-left" data-aos-duration="3000">
</div>

这个区块会往左进入,从开始进入到完成会花 3 秒时间。


过某区块,指定物件的动态使用 data-aos-anchor

在滑入的物件加上 id,当此物件滑过离开画面时,会使data-aos-anchor 跟其 id 名称一样的物件实行物件的动画效果。
另外可以使用 data-aos-anchor-placement 来决定滑到哪触发及消失

范例

<div class=""
     data-aos="fade-right"
     data-aos-anchor="#triggerAnchor"
     data-aos-anchor-placement="top-bottom">
  Anchor
</div>
<div class="" id="triggerAnchor">Go</div>

当滑到 Go 的时候,会触发 data-aos-anchor 等於 Go 的 id 的物件,也就是 Anchor那一块。
top-bottom 会在滑到上方时触发,滑到底部再收回,也就是 Go 滑到了上方,Anchor 会从右边淡入,然後 Go 再滑到底部时,Anchor 会再反方向收回,也就是往左边淡出。


以上是简单让物件随着滚轮跟动的方法,事实上滚动视差可以有更深入更不一样的设计。综合AOS的功能并熟悉更多参数设定,也能让网站活泼起来,产生不一样的视觉效果!
以下附上 AOS 贴心的范例

AOS Demo:https://michalsnik.github.io/aos/

AOS github:https://github.com/michalsnik/aos

不只一个套件可以制作滚动视差效果,还有其他各式各样能做出不同效果的好套件,大家可以多多尝试!


<<:  JS Library 学习笔记:Three.js 初见面,在2D画面创造三维世界 (二)

>>:  [Day 28] - 『转职工作的Lessons learned』 - Cube.js(IV)

[Day12] TS:什麽!型别还有递回(recursion)的概念?用组合技实作 SnakeToCamelCase

这是我们今天要聊的内容,老样的,如果你已经可以轻松看懂,欢迎直接左转去看我同事 Andy 精彩的文...

Day 0x9 - 插播 - 建立 Sinopac Controller

0x1 前言 是的,要继续写 Webhook 时却发现,Day 0x4 ~ 0x6 写的函数的都没有...

强型闯入DenoLand[31] - MongoDB 安装教学

强型闯入DenoLand[31] - MongoDB 安装教学 本章会分为两个部分: MongoD...

Re: 新手让网页 act 起来: Day09 - 简单却不是很容易懂的 key(2)

昨天我们介绍了 key 的基本使用方式,今天我们就一起来了解为什麽需要 key 吧! 为什麽需要 k...

【Day26】反馈元件 - Progress bar

元件介绍 Progress bar 是能够展示当前进度的进度条元件。当一个操作需要显示目前百分比,或...