我喜欢MacBook 在 WhitePage ( http://whitepagehq.com ) 主页上打开的方式。我想创造一个类似的效果。
这是使用 CSS Animation、JQuery 还是两者都创建的?我似乎无法从督察那里弄清楚。你在其他地方看过类似的动画吗?
我怎样才能为我的网站制作这样的东西?
我喜欢MacBook 在 WhitePage ( http://whitepagehq.com ) 主页上打开的方式。我想创造一个类似的效果。
这是使用 CSS Animation、JQuery 还是两者都创建的?我似乎无法从督察那里弄清楚。你在其他地方看过类似的动画吗?
我怎样才能为我的网站制作这样的东西?
有两个图像:
<img src="lib/img/laptop-closed.png" class="lid-closed"/>
<img src="lib/img/laptop-open.png?1" class="lid-open"/>
laptop-open.png
动画只涉及在文档就绪时更改图像的高度。
这是使用 jQuery 完成的(在第 126 行的主页中):
setTimeout(function () {
$('.lid-closed').animate({
top:10,
height:9,
width:840
}, {
easing:'linear',
duration:500
});
$('.lid-open').animate({
height:207
}, {
easing:'easeOutQuad',
duration:1000
});
}, 1000);
他们正在使用 jquery 为打开的笔记本电脑图像的高度设置动画:
setTimeout(function(){
$('.lid-closed').animate({
top: 10,
height: 9,
width: 840
},
{
easing: 'linear',
duration: 500
});$('.lid-open').animate({
height: 207
},
{
easing: 'easeOutQuad',
duration: 1000
});
},
1000);
这段代码是由 jQuery.animate() 方法完成的,你可以在他们的内联 js 脚本中找到它。(查看源代码-> 第 126 行)。基本上,它们会在“关闭”图像的同时改变“打开”图像的高度。打开的图像扩大,盖子的闭合部分向上移动。