0
ウェブページに静的な背景があるので、ページの内容がスクロールしている間もアニメーションを静的にしておきたい。これはできますか？現在のところ、ページがスクロールしてアニメーションを行うときアニメーション背景を維持し、ページをスクロールする方法は？
ここに私が書いた原型の例があります。これは初めてのCSSアニメーションです。私は答えを探していますが、実際にはスクロールイベントを持つアニメーションしか見つかりませんでした。
html {
background: url(http://img15.deviantart.net/1294/i/2010/260/9/8/sample_background_001_by_professormegaman-d2yxb7g.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:-2;
}
img{
width:100px;
}
.car-right {
position: absolute;
top: 86%;
left: 0px;
z-index: -1;
background-color: red;
animation-duration: 15s;
animation-name: goRight;
animation-iteration-count: infinite;
-moz-animation-duration: 15s;
-moz-animation-name: goRight;
-moz-animation-iteration-count: infinite;
}
.car-left {
position: absolute;
top: 15%;
left: 0px;
z-index: -1;
background-color: blue;
animation-duration: 10s;
animation-name: goLeft;
animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-name: goLeft;
-moz-animation-iteration-count: infinite;
}
@keyframes goRight {
from {
-webkit-transform: translate(0,0);
}
to {
-webkit-transform: translate(700px,0);
}
}
@-moz-keyframes goRight {
from {
-moz-transform: translate(0,0);
}
to {
-moz-transform: translate(700px,0);
}
}
@keyframes goLeft{
from {
-webkit-transform: translate(700px,0);
}
to {
-webkit-transform: translate(0,0);
}
}
@-moz-keyframes goLeft{
from {
-moz-transform: translate(700px,0);
}
to {
-moz-transform: translate(0,0);
}
}<html>
<head>
</head>
<body>
<div class="animation-container">
<div class="car-right">
<img class="car-right-image"src="http://www.freeiconspng.com/uploads/car-png-10.png" alt="car">
</div>
<div class="car-left">
<img class="car-left-image"src="http://www.freeiconspng.com/uploads/car-png-10.png" alt="car">
</div>
</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
<div>Content here</div>
</body>
</html>
を追加してみてください回答に基づいて問題のスニペット/コードブロックを変更しないでください。それは、最初の問題が何だったのかについて、将来の読者を混乱させるでしょう。編集をロールバックしてください。 – Harry