teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問水滴の落ちるオープニングアニメーションを実装したい

編集履歴

質問編集履歴

3

誤字

2020/03/12 01:54

投稿

shotaroice
shotaroice

スコア20

test CHANGED
File without changes
test CHANGED
@@ -11,109 +11,3 @@
11
11
 
12
12
 
13
13
  教えてくだされば幸いです。
14
-
15
-
16
-
17
- ```ここに言語を入力
18
-
19
- <!doctype html>
20
-
21
- <html>
22
-
23
- <head>
24
-
25
- <meta charset="utf-8">
26
-
27
- <title>無題ドキュメント</title>
28
-
29
- <style>
30
-
31
- .loading {
32
-
33
- padding: 20px;
34
-
35
- height: 100%;
36
-
37
- width: 100%;
38
-
39
- position: fixed;
40
-
41
- }
42
-
43
- .loading_txt {
44
-
45
- width: 600px;
46
-
47
- height: 600px;
48
-
49
- background: url(lodingtxt.png) center center no-repeat;
50
-
51
- position: absolute;
52
-
53
- padding: 20px;
54
-
55
- top: 0;
56
-
57
- bottom: 0;
58
-
59
- left: 0;
60
-
61
- right: 0;
62
-
63
- margin: auto;
64
-
65
- }
66
-
67
- </style>
68
-
69
- </head>
70
-
71
-
72
-
73
- <body>
74
-
75
- <div class="loading">
76
-
77
- <div class="loading_txt ripple"></div>
78
-
79
- </div>
80
-
81
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
82
-
83
- <script src="js/jquery.ripples-min.js"></script>
84
-
85
- <script>
86
-
87
- // Automatic drops
88
-
89
- setInterval(function() {
90
-
91
- var $el = $('.ripple');
92
-
93
- var x = Math.random() * $el.outerWidth();
94
-
95
- var y = Math.random() * $el.outerHeight();
96
-
97
- var dropRadius = 10;
98
-
99
- var strength = 0.04 + Math.random() * 0.04;
100
-
101
-
102
-
103
- $el.ripples('drop', x, y, dropRadius, strength);
104
-
105
- }, 800);
106
-
107
- </script>
108
-
109
- </body>
110
-
111
- </html>
112
-
113
- ```
114
-
115
- 追記
116
-
117
- 下記回答者様の記事を参考に構築してみましたが、ランダムに雨が降るような実装はできませんでした
118
-
119
- どこを誤っているのかご教示いただけますと幸いです。

2

コード追記

2020/03/12 01:54

投稿

shotaroice
shotaroice

スコア20

test CHANGED
File without changes
test CHANGED
File without changes

1

コード追記

2020/03/11 08:58

投稿

shotaroice
shotaroice

スコア20

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,109 @@
11
11
 
12
12
 
13
13
  教えてくだされば幸いです。
14
+
15
+
16
+
17
+ ```ここに言語を入力
18
+
19
+ <!doctype html>
20
+
21
+ <html>
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8">
26
+
27
+ <title>無題ドキュメント</title>
28
+
29
+ <style>
30
+
31
+ .loading {
32
+
33
+ padding: 20px;
34
+
35
+ height: 100%;
36
+
37
+ width: 100%;
38
+
39
+ position: fixed;
40
+
41
+ }
42
+
43
+ .loading_txt {
44
+
45
+ width: 600px;
46
+
47
+ height: 600px;
48
+
49
+ background: url(lodingtxt.png) center center no-repeat;
50
+
51
+ position: absolute;
52
+
53
+ padding: 20px;
54
+
55
+ top: 0;
56
+
57
+ bottom: 0;
58
+
59
+ left: 0;
60
+
61
+ right: 0;
62
+
63
+ margin: auto;
64
+
65
+ }
66
+
67
+ </style>
68
+
69
+ </head>
70
+
71
+
72
+
73
+ <body>
74
+
75
+ <div class="loading">
76
+
77
+ <div class="loading_txt ripple"></div>
78
+
79
+ </div>
80
+
81
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
82
+
83
+ <script src="js/jquery.ripples-min.js"></script>
84
+
85
+ <script>
86
+
87
+ // Automatic drops
88
+
89
+ setInterval(function() {
90
+
91
+ var $el = $('.ripple');
92
+
93
+ var x = Math.random() * $el.outerWidth();
94
+
95
+ var y = Math.random() * $el.outerHeight();
96
+
97
+ var dropRadius = 10;
98
+
99
+ var strength = 0.04 + Math.random() * 0.04;
100
+
101
+
102
+
103
+ $el.ripples('drop', x, y, dropRadius, strength);
104
+
105
+ }, 800);
106
+
107
+ </script>
108
+
109
+ </body>
110
+
111
+ </html>
112
+
113
+ ```
114
+
115
+ 追記
116
+
117
+ 下記回答者様の記事を参考に構築してみましたが、ランダムに雨が降るような実装はできませんでした
118
+
119
+ どこを誤っているのかご教示いただけますと幸いです。