teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

説明追記

2020/09/14 02:06

投稿

hatena19
hatena19

スコア34367

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

修正

2020/09/14 02:05

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,4 +1,4 @@
1
- CSSアニメーションを使えばできると思います
1
+ CSSアニメーションを使えばできると思います。jQueryを使うより軽いのでお勧めです。
2
2
 
3
3
  「フワフワ」というのが具体的にどのようなものなのか不明なので、
4
4
  適当に上下移動と回転を組み合わせてみました。

1

修正

2020/09/14 01:58

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -28,4 +28,4 @@
28
28
  ```
29
29
  [CodePenサンプル](https://codepen.io/hatena19/pen/qBZKawr)
30
30
 
31
- transformaをうまく使えばもっと複雑な動きも可能です。
31
+ transformをうまく使えばもっと複雑な動きも可能です。