另类切图法？当CSS不按套路出牌

JIEJOE_轻敲代码

合集 · 前端教程 (23)

  1. 10:23
    【前端 | 教程】如何做一个扑克牌轮播图
  2. 7:22
    【前端 | 教程】实现酷酷的文字故障效果
  3. 8:13
    【前端 | 教程】纯干货！三步实现滑动阻尼效果
  4. 10:25
    【前端 | Lottie】如何将AE动画渲染到网页上？
  5. 8:25
    前端还能这样玩？做一只顶级走位的小蜘蛛
  6. 9:06
    你的网站或许离高级，，还差一个跳转动画？
  7. 9:30
    何止竖向滑动？让你的网页横着走！
  8. 12:32
    干到开裂！上下左右⚡网页无限滑动⚡
  9. 11:56
    做一个网页信息表单：不仅可以打勾，还可以擦掉？
  10. 7:57
    硬到牙疼！如何将SVG图形嵌入网页、优雅地做动画？
  11. 7:26
    网页SVG描边效果？一段动画给你整明白
  12. 6:16
    你最该学会的网页交互？SVG描边动画 + 按钮
  13. 7:57
    最具科技感的一集？用SVG打造网页矩阵动画
  14. 8:33
    全站首发！别再问哪找网页灵感了，AW保姆级教程
  15. 7:15
    不用物理引擎？让网页小球附加🧲磁力效果🧲
  16. 7:48
    一个让人猜不到原理的，，网页小蛇加载效果？
  17. 6:34
    终！极！网页横向滑动效果📕教程📕
  18. 6:24
    再花里胡哨一点？在网页里使用ASCII动画
  19. 8:09
    手搓物理效果？详解大神写的前端代码
  20. 6:33
    音频可视化第一步？无库实现网页音波环
  21. 5:40
    “自瞄锁敌”？做一个带有磁力的网页光标
  22. 6:10
    网页也能一刀两断？这个开屏动画有点小帅
  23. 6:14
    另类切图法？当CSS不按套路出牌
Description 
源代码链接：https://github.com/JIEJOE-WEB-Tutorial/020-window-blinds
视频中的原效果网页演示：BV1RvDrBTEUj
GSAP ScrollTrigger官方文档：https://gsap.com/docs/v3/Plugins/ScrollTrigger
喜欢这个视频的话，就点个赞吧❤

Comments

Xuas_key 16d ago

6:03 结尾的这个鼠标拖动动画是不是有点问题

♥ 5 ↩ 3

半导体果冻 12d ago

事实上我觉得蒙版实现应该会简单一点 不依赖DOM结构 具体的参数和动画我就不实现了 做了个核心Demo

♥ 3 ↩ 1

达布柊 15d ago

学到了[星星眼] 那要是换种思路，把间距作为div覆盖在图片上，然后移动加压缩是不是能做出同样的效果呢？

♥ 1 ↩ 1

猪建森 15d ago

好久没更新了.[滑稽] 📖一下[蹲蹲]

♥ 1 ↩ 1

米_撒_奇 16d ago

学习[打call]

♥ 1 ↩ 1