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

最终效果图：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 () {// initvar 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 tonew 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>

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

运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页我所做的和它相差不多不 ...
基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
timeAxis.js--一个简单的时间轴JS框架--仿苹果官网
代码已经上传到Github,希望各位大佬指教. ReadMe还是以GitHub为准 GitHub地址:https://github.com/royalknight56/timeAxis.js 基本实现 ...
使用html简单仿写一个静态的绝地求生官网首页
这是我以前写的一个静态网页,算一个html入门的简单的教程.刚刚开始学习前端可以用这个练手 1.首先在vscode新建一个文件夹,点击如图所示,点击蓝笔圈起的图标(左边的是新建文件) 起名为绝地求生. ...
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
【Web开发】纯前端实现科技企业官网首页
前言本篇博文简单实现一个科技类产品官网的主页,图片素材来自于苹果官网. 相关教程参考自https://www.bilibili.com/video/BV117411n7R1 源代码下载:https: ...

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

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

最新文章

热门文章