定位JS动画DIV
Positioning JS animated DIVs
我正在尝试制作3个DIV
与JS
一起移动,并将它们放置在页面的右侧,我已经完成了动画脚本,但位置不对。在手机上,它位于#header
部分中我的其他div之上,而且它位于左侧。在PC:s
上,它离左边很远。有没有什么方法可以让我的动画保持这种方式,但把它放在包装器里面?这样它就不会改变它在手机和电脑上的位置:s?
HTML:
<div class="wrapper">
<div id="intro-right">
<div id="clouds-1"></div>
<div id="clouds-2"></div>
<div id="clouds-3"></div>
</div>
</div>
CSS:
div.wrapper {
margin: 0 auto;
padding: 0 20px;
min-width: 1024px;
width: 1024px;
}
div#intro-right {
float: right;
}
div#clouds-1 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 100px;
right: 150px;
background: url("img/clouds_bg_1.png") no-repeat;
opacity: 0;
}
div#clouds-2 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 110px;
right: 150px;
background: url("img/clouds_bg_2.png") no-repeat;
opacity: 0;
}
div#clouds-3 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 130px;
right: 150px;
background: url("img/clouds_bg_3.png") no-repeat;
opacity: 0;
}
JS:
$(document).ready(function() {
$("div#clouds-1").animate({
opacity:'0.4'
}, 1450);
$("div#clouds-2").animate({
opacity:'0.6'
}, 1450);
$("div#clouds-3").animate({
opacity:'0.8'
}, 1450);
});
$(document).ready(function() {
function moveRight1() {
$("div#clouds-1").animate({
top:'-=24px',
right: '+=50px',
opacity: '0.9'
}, 8000, moveLeft1);
}
function moveLeft1() {
$("div#clouds-1").animate({
top:'+=24px',
right: '-=50px',
opacity: '0.4'
}, 8000, moveRight1);
}
moveRight1();
function moveRight2() {
$("div#clouds-2").animate({
top:'-=24px',
right:'-=50px',
opacity: '0.9'
}, 8000, moveLeft2);
}
function moveLeft2() {
$("div#clouds-2").animate({
top:'+=24px',
right:'+=50px',
opacity: '0.6'
}, 8000, moveRight2);
}
moveRight2();
function moveRight3() {
$("div#clouds-3").animate({
top:'+=24px',
right:'+=100px',
opacity: '0.4'
}, 8000, moveLeft3);
}
function moveLeft3() {
$("div#clouds-3").animate({
top:'-=24px',
right:'-=100px',
opacity: '0.8'
}, 8000, moveRight3);
}
moveRight3();
});
正如pixelcdv所说,CSS3动画非常适合这样的简单运动。
这是我用你的代码(全部以百分比计)制作的一个快速动画
基于html:的CSS
div#clouds-1 {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudOne 16s infinite;
-moz-transition: cloudOne 16s infinite;
-o-transition: cloudOne 16s infinite;
transition: cloudOne 16s infinite;
animation: cloudOne 16s infinite;
}
@keyframes cloudOne {
0% {
top:15%;
left: 35%;
}
50% {
top:7%;
left: 20%;
}
100% {
top:15%;
left: 35%;
}
}
div#clouds-2 {
position: absolute;
width: 30%;
height: 20%;
top:20%;
left: 45%;
background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudTwo 16s infinite;
-moz-transition: cloudTwo 16s infinite;
-o-transition: cloudTwo 16s infinite;
transition: cloudTwo 16s infinite;
animation: cloudTwo 16s infinite;
}
@keyframes cloudTwo {
0% {
top:20%;
left: 45%;
}
50% {
top:35%;
left: 15%;
}
100% {
top:20%;
left: 45%;
}
}
div#clouds-3 {
position: absolute;
width: 30%;
height: 20%;
top:30%;
left: 50%;
background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudThree 16s infinite;
-moz-transition: cloudThree 16s infinite;
-o-transition: cloudThree 16s infinite;
transition: cloudThree 16s infinite;
animation: cloudThree 16s infinite;
}
@keyframes cloudThree {
0% {
top:30%;
left: 50%;
}
50% {
top:5%;
left: 65%;
}
100% {
top:30%;
left: 50%;
}
}
我认为在您的情况下,最好使用CSS3动画。这样,您只需要调用$('div#clouds-1').addClass(<new class that sets the position on the right>)
而不是.animate(),并调整css以在移动和桌面上工作
相关文章:
- 在用户用动画滚动175像素后缩小固定的Div
- 交叉淡入淡出 DIV + 悬停时停止动画
- Div 动画会消失,而不是调整大小
- 如何在原型js中将DIV从显示无到阻止进行动画处理
- 一个接一个的 Div 动画使用延迟对象
- Div 会滑入动画,但从不滑回
- 淡入淡出并淡入下一个Div,并在其中设置子元素的动画
- 设置动画后无法获得Div的位置
- Div高度动画会导致Div在jQuery中更改对齐方式
- 定位JS动画DIV
- 随着内容大小的变化,为左浮动DIV的重新定位制作动画
- 在DIV的基础上添加动画's的数据信息
- Jquery.html之后的DIV动画
- 我需要文本动画的例子动态添加到一个Div
- Div与对角线边视差动画
- Div样式随动画变化
- 我正在尝试在JQuery滑块中创建DIV动画
- Div动画与Javascript后点击一个链接-如何
- Div动画不重复点击在jquery
- JQuery动画:从左到右以不同于从上到下的速度制作DIV动画