回答編集履歴
1
余計な部分を削除して、文法を修正しました。
answer
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
インスペクタでスタイルを確認すると、冒頭で挙げられたサイトの背景画像は、`background-position` ではなく、`transform` の値を JavaScript で操作して動かしていることがわかります。
|
|
2
2
|
|
|
3
|
-
例えば、`background-image`のある要素
|
|
3
|
+
例えば、`background-image`のある要素を左から右にアニメーションさせたいのであれば、以下のようなHTMLを用意します。
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<section class="topImg">
|
|
7
|
-
|
|
7
|
+
<div class="image"></div>
|
|
8
8
|
</section>
|
|
9
9
|
```
|
|
10
10
|
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
}
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
`.image`の幅を`110%`に
|
|
40
|
+
`.image`の幅を`110%`にして、移動しても後ろ側が見えないようにします。`translateX(9%)`のところを`translateX(10%)`としてしまうと、translateが`.image`の大きさを基準に計算されるため、110%にした幅の10%、つまり11%の移動になり、はみ出してしまうので注意が必要です。
|
|
41
41
|
|
|
42
|
-
これをクロスフェード
|
|
42
|
+
これをクロスフェードと組み合わせれば、期待している動きになるでしょう。
|
|
43
43
|
|
|
44
44
|
---
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
やりたいことと合っているかわかりませんが、`keyframes`が使えて、ユーザーの操作が関係ないのであれば、CSSだけで画像をアニメーションさせつつ、クロスフェードできます。
|
|
47
|
-
|
|
47
|
+
こちらにサンプルを用意しました。
|
|
48
48
|
[https://codepen.io/anon/pen/PQZXqp](https://codepen.io/anon/pen/PQZXqp)
|