回答編集履歴
3
説明追記
answer
CHANGED
@@ -28,4 +28,22 @@
|
|
28
28
|
```
|
29
29
|
[CodePenサンプル](https://codepen.io/hatena19/pen/qBZKawr)
|
30
30
|
|
31
|
-
transformをうまく使えばもっと複雑な動きも可能です。
|
31
|
+
transformをうまく使えばもっと複雑な動きも可能です。
|
32
|
+
|
33
|
+
---
|
34
|
+
jQueryでふわふわするコードがあったのを見落としてました。
|
35
|
+
そのコードでうまくいかない原因は、`position: fixed;` の要素にはmarginが効かないからです。bottom を変化させればふわふわします。(でも、CSSアニメーションをお勧めしますが)
|
36
|
+
|
37
|
+
```js
|
38
|
+
$(function () {
|
39
|
+
setTimeout('rect()');
|
40
|
+
});
|
41
|
+
function rect() {
|
42
|
+
$('#pagetop').animate({
|
43
|
+
bottom: '-=10px'
|
44
|
+
}, 800).animate({
|
45
|
+
bottom: '+=10px'
|
46
|
+
}, 800);
|
47
|
+
setTimeout('rect()', 1600); //ア
|
48
|
+
}
|
49
|
+
```
|
2
修正
answer
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
CSSアニメーションを使えばできると思います
|
1
|
+
CSSアニメーションを使えばできると思います。jQueryを使うより軽いのでお勧めです。
|
2
2
|
|
3
3
|
「フワフワ」というのが具体的にどのようなものなのか不明なので、
|
4
4
|
適当に上下移動と回転を組み合わせてみました。
|
1
修正
answer
CHANGED
@@ -28,4 +28,4 @@
|
|
28
28
|
```
|
29
29
|
[CodePenサンプル](https://codepen.io/hatena19/pen/qBZKawr)
|
30
30
|
|
31
|
-
|
31
|
+
transformをうまく使えばもっと複雑な動きも可能です。
|