使用ScrollMagic 简单模仿苹果官网首页滑动视觉效果

最新推荐文章于 2024-03-19 09:49:31 发布
最新推荐文章于 2024-03-19 09:49:31 发布
阅读量2.2k 收藏 2
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20758853/article/details/111290945
版权

最终效果图：http://www.zhangyingdong.com/#/home/detail?bid=34

 

主要代码

<body>
    <div class="container" id="controller">
        <div class="section1" id="sectionController">
            <div class="ipadbg" id="ipadbg">
                <div style="width: 100%;height: 100%;overflow: hidden;position: relative">
                    <div id="ipad_cover" class="ipad_cover">
                    </div>
                </div>

            </div>
            <div id="centerTextA" class="centerText">张莹东的博客</div>
            <div class="fast_title" id="fast_title">快速，简单，安全的触控</div>
        </div>
        <script>
            $(function () {
                // init
                var controller = new ScrollMagic.Controller();
                var wipeAnimation = new TimelineMax()
                    .fromTo("#ipad_cover", 3, {marginTop: "0"}, {marginTop: "-100%", ease: Linear.easing}) // cover to Top
                    .fromTo("#fast_title",1, {opacity: "0"}, {opacity: "1", ease: Linear.easing}) // text show
                    .fromTo("#fast_title",2, {top: "650px"}, {marginTop: "500px", ease: Linear.easing}) // text to bottom
                    .fromTo("#ipadbg",10, {scale: "1"}, {scale: "5", ease: Linear.easing}) // bg to scale
                    .fromTo("#centerTextA", 2, {fontSize: "16"}, {fontSize: "56", ease: Linear.easing}); // center to
                new ScrollMagic.Scene({
                    triggerElement: "#sectionController",
                    triggerHook: "onLeave",
                    duration: "300%"
                })
                    .setPin("#sectionController")
                    .setTween(wipeAnimation)
                    .addIndicators()
                    .addTo(controller);
            });
        </script>
        <div id="pinContainer" style="overflow: hidden">
            <section class="panel blue">
               <img src="./image/pan1.png" />
            </section>
            <section class="panel turqoise">
                <img src="./image/pan2.png" />
            </section>
            <section class="panel green">
                <img src="./image/pan3.png" />
            </section>
            <section class="panel bordeaux">
                <img src="./image/pan4.png" />
            </section>
        </div>
        <div class="foot">
        </div>
        <script>
            $(function () {
                var controller = new ScrollMagic.Controller();
                var wipeAnimation = new TimelineMax()
                    .fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
                    .fromTo("section.panel.green",    1, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})
                    .fromTo("section.panel.bordeaux", 1, {y: "-110%"}, {y: "0%", ease: Linear.easeNone})
                    .fromTo("section.panel.bordeaux", 1, {width: "100%"}, {width: "100%", ease: Linear.easeNone})
                    .fromTo("#centertext", 2, {fontSize: "16"}, {fontSize: "166", ease: Linear.easing});
                new ScrollMagic.Scene({
                    triggerElement: "#pinContainer",
                    triggerHook: "onLeave",
                    duration: "300%"
                })
                    .setPin("#pinContainer")
                    .setTween(wipeAnimation)
                    .addIndicators()
                    .addTo(controller);
            });
        </script>
    </div>
</body>

 

张莹东的博客
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模仿iOS版微信的滑动View效果
08-25
比如我们常用的微信，对于Android版本，长按某个聊天好友，会弹出 标为未读，置顶聊天，删除聊天 选项；对于iOS的版本，右滑，会显示出 标为未读，删除 选项。这篇文章主要介绍了模仿iOS版微信的滑动View,需要的朋友可以参考下
仿Apple官网产品展示的滑动效果
03-25
仿照Apple官网的产品展示做的一个滑动展示效果。 除了原来的效果（包括点击缓动滑移、拖动滑移），我还加入了本程序特有的滚轮和键盘控制，滑动条两端鼠标放上去会自动滑动，滑动到两边还会自动换一个表示停止的图案。
探索创新交互：ScrollMagic —— 动画滚动魔法
最新发布
gitblog_00091的博客
03-19 419
探索创新交互：ScrollMagic —— 动画滚动魔法 项目地址:https://gitcode.com/janpaepke/ScrollMagic ScrollMagic 是一个强大的JavaScript库，它赋予网页开发者对页面滚动事件的绝对控制力。通过这款工具，你可以创建出与用户滚动行为紧密互动的动态效果和动画，为网站带来前所未有的用户体验。 技术分析 ScrollMagic基于JavaS...
ios-仿《今日头条》视频详情页关注按钮加载动画.zip
07-11
仿《今日头条》视频详情页关注按钮加载动画
iphone手机桌面滑动效果使用css3实现
09-05
iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器,此效果比较不错，有兴趣的朋友可以多测试几个浏览器
Android应用源码模仿zaker风景页面滑动效果修改版源码.zip
10-29
Android应用源码模仿zaker风景页面滑动效果修改版源码,android安卓实例应用源代码，仅供学习及设计参考。
仿苹果官网页面垂直滚动效果OnePageScroll
09-25
带缓冲的仿苹果官网页面垂直滚动效果OnePageScroll,效果预览:http://www.juheweb.com/js/bj/116.html
ScrollMagic的常用事件
lihui61357457的博客
12-01 395
// 1.创建一个控制器对象controller let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象scene let scene = new ScrollMagic.Scene({ offset: 100, duration: 200, }); // 告诉ScrollMagic哪一个元素需要固定 scene.setPin(".section1");
ScrollMagic-jQuery元素滚动动画库
souhugirl的专栏
03-02 1512
ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。正如其名字一样，该jquery元素滚动动画库出插件可以制作出各种神奇的滚动动画效果。它甚至可以制作网页视觉差效果和瀑布流效果。 ScrollMagic动画库的强大之处在于： 基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动。可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数。基于滚动位
scrollmagic_推出ScrollMagic 2.0
Web design 教程小屋
07-06 994
如果您迫切希望在下一个项目中生成漂亮的滚动动画，则别无所求。 ScrollMagic是一个JavaScript库，可帮助您创建“神奇的”滚动交互，从而轻松响应用户的当前滚动位置并触发动画或同步事件。 ScrollMagic最近进行了一些重大更改，因此这里快速浏览了自诞生以来的更改和改进。 什么是新的？ 曾经是ScrollMagic核心组件的依赖项（例如GreenSock（GSAP）和j...
ScrollMagic：神奇的滚动交互的javascript库
02-16
ScrollMagic 神奇的滚动交互的javascript库。 快速链接：| | | | | | | ScrollMagic可帮助您轻松响应用户的当前滚动位置。 如果您想...它是您的理想图书馆。 根据滚动位置设置动画–触发动画或将其同步到滚动条移动（如播放擦洗控件）。 从特定的滚动位置开始固定元素-无限期或有限的滚动进度（粘性元素）。 根据滚动位置打开和关闭元素CSS类。 轻松地将视差效果添加到您的网站。 创建一个无限滚动的页面（附加内容的ajax加载）。 通过进度参数在特定滚动位置或滚动经过特定部分时添加回调。 查看，浏览或阅读以开始使用。 如果您想做出贡献，请，让我知道您的专业和经验。 关于图书馆 ScrollMagic是滚动交互库。 这是对其前身的完全重写。 基于插件的体系结构可轻松实现自定义和扩展。 要实现动画，ScrollMagic可以与多个框架一起使用
ios-（优化版）简单模仿淘宝商品详情页.zip
07-11
上一个版本图文详情那里共用一个webview，切换的时候网页加载比较慢，mj也是用的旧版本，所以就在原来的基础上进行优化，图文详情改用三个webview，互不影响，也尽量封装了代码，让vc更精简
jquery模仿flash动画导航左右滑动效果
06-06
背景图片左右滑动效果，类似flash特效
高仿淘宝首页菜单滑动效果
06-26
高仿淘宝首页菜单滑动效果，不分页。 重要逻辑：通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度， 同理scrollView的偏移量为scrollView的内容宽度减去...
Android模仿appstore动画,Android共享元素动画效果（非官方实现）
weixin_29879697的博客
05-26 296
仿照Appstore 效果写的 主要涉及到圆角到直角的变化。1532329987813_video.gif实现步骤1.将详情页设为透明的这个相信大家都知道 在主题里设置 android:windowIsTranslucent下面是我的设置还需要将动画关闭@color/transparent@nulltrue2.使用CSLayout首先是itemxmlns:app="http://schemas....
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
听风者i的博客
11-05 919
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
ScrollMagic的基本使用
lihui61357457的博客
11-29 3128
详情可见 1.什么是ScrollMagic? ScrollMagic是一个神奇的滚动效果的插件. 如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作， 或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。 使用 ScrollMagic，你可以很容易地让动画和滚动条的动作同步。 　　使用 ScrollMagic，你可以很容易地把视差效果添加到您的网站中。 2.ScrollMagic特点: 优化性能 **轻量级（压缩后只有6KB
使用scrollMagic配合gsap做页面滚动效果
m0_69576888的博客
02-08 478
使用scrollMagic配合gsap做页面滚动效果
苹果官网Ipad mini滚动动画实现原理探究
热门推荐
前端开发博客
04-05 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群背景最近因工作需要，要开发两个比较炫酷的动画效果，早期我个人在这方面积累太少，导致实际开发过程走了不少弯路，本文特此总结一下，希望各位同行能吸取经(jia)验(ban)教训少走弯路早日下班。废话不多说，我们先来看几个苹果官网比较炫酷的几个动画效果，你在此也可以思考一下，该如何实现这些动画效果。走过的弯路当我拿...
vue模仿boss直聘 滑动效果
08-29
您可以使用flutter_boss这个项目作为参考，它是一个基于Flutter的模仿Boss直聘的应用程序。 如果您想实现在Vue项目的移动端页面上加上左右滑动效果，您可以使用vue-touch库来实现。vue-touch是一个用于Vue.js的手势库，它可以方便地实现各种手势操作，包括左右滑动效果。您可以在您的Vue项目中引入vue-touch库，并按照它的文档说明来使用。 请注意，根据您引用的内容，滑动效果是通过模仿实现的，即使用虚假函数来模拟函数的调用，而不是真正执行相关操作。 希望这些信息对您有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [用大前端技术实现的一款仿Boss直聘app（已开源）](https://blog.csdn.net/hejjunlin/article/details/90310767)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [工作中使用到的单词（软件开发）](https://blog.csdn.net/sxzlc/article/details/104872052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue实现移动端左右滑动效果的方法](https://download.csdn.net/download/weixin_38720402/12949404)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值