这篇文章介绍了一个使用JavaScript和CSS3动画技术，通过鼠标移动控制前端元素（书籍、恐龙和阴影）旋转的交互设计。通过`onmousemove`事件，用户可以实时调整页面、恐龙和元素的视觉旋转，体验动态翻页效果。
var prefixes = ['Webkit','Moz','ms','O',''],book = document.querySelectorAll('.book')[0],page = document.querySelectorAll('.front-cover')[0],dino = document.querySelectorAll('.dino')[0],shadow = document.querySelectorAll('.shadow')[0],hold = false,centerPoint = window.innerWidth / 2,pageSize = 300,clamp = function (val,min,max) {
return Math.max(min,Math.min(val,max));
};
page.onmousedown = function () {
hold = true;
};
window.onmouseup = function () {
if (hold) {
hold = false;
}
};
window.onresize = function () {
centerPoint = window.innerWidth / 2;
};
window.onmousemove = function (evt) {
if (!hold) {
return;
}
var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90,-180,0),i,j;
for (i = 0,j = prefixes.length; i < j; i++) {
book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)';
page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)';
dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)';
shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)';
}
};
})(window,document);
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
