24.使用ScrollTrigger的简单视差滚动

最新推荐文章于 2024-03-30 12:53:15 发布
最新推荐文章于 2024-03-30 12:53:15 发布
阅读量1.3k 收藏
点赞数
分类专栏： CSS创意特效(第四季) 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq449245884/article/details/127042088
版权

效果 (源码网盘地址在最后)

在这里插入图片描述
关注公众号《大迁世界》，查看更多视频教程！

源码

index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Scrolling Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <a href="#" class="logo">Logo</a>
      <ul class="navigation">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Ab
了解本专栏 订阅专栏 解锁全文 超级会员免费看
@大迁世界
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
scroll-trigger:简单的滚动触发功能
05-21
滚动触发 用法 var scrollTrigger = require('scroll-trigger'); /** * 1000 milliseconds wait for execute next scroll action * 200 tolerance for execute function */ scrollTrigger(1000, 200, function() { console.log('user scroll'); }); 更多信息
scrolltrigger页面滚动文字渐显
qq_40019058的博客
11-15 452
GSAP这个动画库非常强大，用户与页面的互动性更强，访问过程也就变得更有趣。
【GSAP】ScrollTrigger插件的注意事项 | 用的好，非常流畅。用的不好，卡到爆炸的前端动画库
最新发布
此人太懒，没有任何简介
03-30 483
batch。
gsap和ScrollTrigger搭配完成背景视觉滚动差效果
qq_45743174的博客
01-25 636
【代码】gsap和ScrollTrigger搭配完成背景视觉滚动差效果。
jquery实现的视差滚动教程(视差大背景效果)
weixin_34192816的博客
08-09 253
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。现在越来越多的网站采用视差水平滚动来创建绚丽的效果，其实这样的效果使用jquery实现的，上一次我发布了一篇使用这个效果做的网站，《40个视差滚动效果网站的新技术应用》，今天就给大家分享一下这样的效果实现原理，下一次在...
ScrollTrigger为你的网站添加基于滚动的动画
08-07
基于滚动位置触发HTML元素上的类。 所有的动画是由类引发的，所以你可以采取CSS3动画的功能。
前端项目-ScrollTrigger.zip
09-04
前端项目-ScrollTrigger,基于滚动位置在HTML元素上触发类。它使用了requestanimationframe，这样就不会让用户滚动，这样用户/浏览器就可以保持原来的滚动行为。当浏览器准备就绪时，动画就会运行。
JS特效之Scroll家族的四个网页界面实用案例（固定导航栏、两侧广告跟随、返回头部、楼层跳跃）
cindy647的博客
07-12 1431
关于scroll的介绍和封装可以在另一篇博客里找到，这里介绍四个常用的基于scroll的小案例 首先再说明其中用到的封装好的两个函数（scroll封装，缓动动画封装） function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 //...
滚动视差插件skrollr.js
花铛
09-24 492
使用： 引入源码文件skrollr.min.js或skrollr.js； <script src="skrollr.js"></script> 页面加载完成后，初始化skrollr； <script> window.onload=function(){ var s=skrollr.init(); } </script> 在HTML代码中，给标签元素添加类似data-500="background:rgb(255,2
Parallax.js网页背景视差滚动代码.zip
07-11
Parallax.js网页背景视差滚动代码
jQuery+swiper.js幻灯片图片视差滚动轮播特效
06-09
jQuery+swiper.js幻灯片图片视差滚动轮播特效，非常棒的一款带标签的jQuery图片视差切换代码。
视差滚动视图(iPhone源代码)
03-17
来源：Licence：Unspecified平台：iOS设备：iPhone / iPad作者：墨半成霜     利用UIScrollView实现视差滚动效果。在demo中，滑动ScrollView，背景图和文字的滚动速度不一样。直接用ScrollView 的协议，对其子视图的坐标进行随机系数比例的位置移动修正，从而实现视差滚动效果。没有用其他的框架，代码简单。    作者说：原创Demo 转载请注明出处。    小编注：感谢作者@墨半成霜 分享代码于code4app。    [优才 · Code4App]编译测试，适用环境：Xcode 4.5, iOS 5.0 以上。
ScrollTrigger：让您的页面对滚动更改做出React
02-03
滚动触发 让您的页面对滚动更改做出React。 ScrollTrigger的最基本用法是根据当前滚动位置触发类。 例如，当元素进入视口时，将其淡入。您可以为每个元素添加自定义偏移量，或在视口上设置偏移量（例如，始终在元素达到视口的20％之后触发） 使用回调时，ScrollTrigger变得非常强大。 当元素进入/可见时，您可以运行自定义代码，如果回调失败，甚至可以返回Promises来停止触发器。 这使得延迟加载图像非常容易。 安装 npm install @terwanerik/scrolltrigger或仅将dist/ScrollTrigger.min.js文件添加到您的项目中并导入。 如何使用？ 最简单的启动方法是创建一个新实例，并向其添加一些触发器以及所有默认值。 当元素进入视口时，这将切换“可见”类，当元素滚动出视口时，将切换“不可见”类。 // when using ES6 import / npm import ScrollTrigger from '@terwanerik/scrolltrigger' // Create a new ScrollTrigger
parallax-scroll:使用GreenSock的ScrollTrigger插件创建的Marvel的Iron Man视差滚动效果
05-16
第17天：2021年2月24日 我按照有关的钢铁人视差效果的进行了学习。 本教程向我介绍了GreenSock动画平台（GSAP）及其强大的ScrollTrigger插件。 视差滚动效果中的文字来自Marvel Studios电影《 Avengers：Endgame》中Tony Stark的独白。 托尼·斯塔克（Tony Stark）由演员罗伯特·唐尼（Robert Downey Jr）饰演。 Git克隆并cd进入repo文件夹： git clone [email protected]:emjose/parallax-scroll.git && cd parallax-scroll 运行命令： open index.html 钢铁侠视差教程，第1部分，技术博客4u 钢铁侠视差教程，第2部分，技术博客4u GSAP：GreenSock动画平台 GreenSock的Sc
高性能页面滚动触发HTML元素动画JS插件
12-10
ScrollTrigger是一款高性能页面滚动触发HTML元素动画JS插件。该插件根据页面滚动的位置来对页面中的元素执行动画，插件中使用requestAnimationFrame，对用户的滚动不会产生额外的影响
Parallax.js网页背景视差滚动代码
06-11
Parallax.js网页背景视差滚动代码，一款不错的视差滚动插件，点击网页背景弹出背景图片列表选择更换。
Parallax.Demo：登陆页面，该页面使用Rellax.js库的视差滚动效果
02-22
这是一个简单的登录页面，该页面使用Rellax.js库的视差滚动效果。 遵循Traversy Media的“视差着陆页-Rellax.js”构建而成： : aAxt0Z7IXIo 使用的技术 HTML CSS 雷拉克斯 安装与安装 启动您的终端。 cd desktop...
html活动页视觉差效果,js带视觉差的页面平滑滚动特效
weixin_36123285的博客
06-03 507
这是js带视觉差的页面平滑滚动特效。该特效中，在页面向下滚动的时候，页面中的图片相对于视口带有一些视觉差特效。使用方法在页面中引入下面的文件。HTML结构Smooth scrolling and inner image animationCentral viewGreat turbulent clouds emerged into consciousness citizens.Lost in ti...
js刷新div_使用Stellar.js为网站添加滚动视差效果
weixin_39561673的博客
12-03 99
近些年讨论得很热烈的设计趋势是视觉差滚动效果。不管你喜不喜欢，很多网站都在用它。发现Stellar.js 是一个偶然的机会，查看一个国外非常酷的网站源码的时候，发现它。然后再搜索一下得知Stellar.js是一个非常优秀的滚动视差插件。视差滚动(Parallax Scrolling)是什么？视差滚动是当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补...
请推荐一组视差滚动前端组件
07-10
5. ScrollReveal：这是一个简单易用的库，用于在滚动时显示和隐藏元素，并可以通过一些配置选项来实现视差效果。 这些组件都有广泛的文档和示例供参考，您可以根据您的具体需求选择最合适的组件。请注意，在使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值