自己模拟实现一下Google的赛马Doodle
2024-07-26 15:01:53 222人阅读
今天的Google Doodle是个动态的,是一个骑马的动态Doodle,是谷歌纪念英国实验摄影师埃德沃德·迈布里奇182周年诞辰,埃德沃德·迈布里奇是运动摄影的开创者,所以谷歌涂鸦以一个运动的摄影作为背景创作的。
埃德沃德·迈布里奇(Eadweard J. Muybridge,1830年4月9日-1904年5月8日),英国摄影师,他因使用多个相机拍摄运动的物体而著名,他发明的“动物实验镜”(Zoopraxiscope)是一种可以播放运动图像的投影机,将连续图像绘制在一块玻璃圆盘的边缘,随着玻璃的旋转,将影像投射出去,这样就使这些影象显得像在运动。
我对这个doodle的实现比较感兴趣,下面做个实现小程序。只用一幅图的时候效果是这样的(稍等下,运动缓冲):安达市阚强古玩
<style></style>
当两幅图同时使用的使用,就可以达到连贯的赛马效果了。
测试代码如下
01
var
scrollBox = document.getElementById(
"classicScrollBox"
);
04
var
num_motionTime = 5;
05
window.onload =
function
(){
07
scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +
‘px‘
;
09
if
(num_record == 804){
10
scrollBox.style.left = 0 +
‘px‘
;
13
num_motionTime = Math.ceil(num_motion/100);
14
if
(num_motionTime == 0) {
17
if
(num_motion != 40) {
18
num_motion -= 10*num_motionTime;
20
setTimeout(scrolls,num_motion);
22
setTimeout(scrolls,num_motion);
这次的代码不是很复杂,主要是使用css的背景属性,使用JavaScript计时器来改变时间,调整图片背景的位置达到动画效果。
自己模拟实现一下Google的赛马Doodle
style http io os 使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。
×
https://www.u72.net/daima/8135.html