Javascript DOM加载时的轻微背景缩放?
如何在本网站上重现效果:Javascript DOM加载时的轻微背景缩放?,javascript,background,zooming,Javascript,Background,Zooming,如何在本网站上重现效果: 我的意思是在显示任何内容之前等待DOM完全加载,然后让背景图像缩小1s。非常酷。它是使用不同的转换和变换一起完成的。演示: 关键是在文档中添加/删除类。就绪 HTML: CSS: 您还可以使用纯javascript轻松完成此操作: css: html: 谢谢,它工作得很好!还有一个问题:为什么要将绝对位置的所有4个属性都指定为0?top:0和left:0还不够吗?另外,为什么需要删除1s后可设置动画的类?这些不是必需的。您可以删除它们。即使您也可以保留可设置动画的类。
我的意思是在显示任何内容之前等待DOM完全加载,然后让背景图像缩小1s。非常酷。它是使用不同的转换和变换一起完成的。演示: 关键是在
文档中添加/删除类。就绪
HTML:
CSS:
您还可以使用纯javascript轻松完成此操作:
css:
html:
谢谢,它工作得很好!还有一个问题:为什么要将绝对位置的所有4个属性都指定为0?top:0和left:0还不够吗?另外,为什么需要删除1s后可设置动画的类?这些不是必需的。您可以删除它们。即使您也可以保留可设置动画的类。删除它的原因是它可能会覆盖其他css。就1而言,这取决于您的选择。如果希望动画长度为2秒,则也可以使用2秒而不是1秒
<div id="DIV_1" class="scaled"></div>
$(document).ready(function () {
$('#DIV_1').attr('class', 'animatable');
setTimeout(function () {
$('#DIV_1').removeClass('animatable');
}, 1000)
});
#DIV_1 {
background-position: 50% 50%;
bottom: 0px;
height: 472px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 600px;
z-index: 1;
background: rgba(0, 0, 0, 0) url(https://shop.stripe.com/assets/images/showcase/thairu-kat.jpg) no-repeat scroll 50% 50% / cover padding-box border-box;
font: normal normal normal 16px/normal Helvetica, Arial, sans-serif;
zoom:1.1;
background-size:cover;
}
/*#DIV_1*/
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.02);
transform:scale(1.02);
}
#blackdiv { background: black; color: white; position: fixed; width: 100%; height: 100%; }
<div id="blackdiv"></div>
<div>page content</div>
window.onload = function(){
var blackdiv = document.getElementById('blackdiv');
blackdiv.style.opacity = 1;
doIt();
};
var doIt = function(){
if( blackdiv.style.opacity > 0 ){
console.log(blackdiv.style.opacity);
blackdiv.style.opacity -= .1;
setTimeout("doIt()", 100);
}
}