cssのアニメーションが実装できない

ホームページの背景にアニメーションを追加しようと思い、このサイトを参考に実装しました。しかし、以下のようにスクロールのあるページに実装したら、スクロールしたときに背景が見切れてしまいました。どこを直せばよいのか教えていただけるとありがたいです。よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>テスト</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet.css">
8</head>
9<body>
10<div class="context">
11        <h1>Pure Css Animated Background</h1>
12        <h1>Pure Css Animated Background</h1>
13        <h1>Pure Css Animated Background</h1>
14        <h1>Pure Css Animated Background</h1>
15        <h1>Pure Css Animated Background</h1>
16        <h1>Pure Css Animated Background</h1>
17        <h1>Pure Css Animated Background</h1>
18        <h1>Pure Css Animated Background</h1>
19        <h1>Pure Css Animated Background</h1>
20        <h1>Pure Css Animated Background</h1>
21        <h1>Pure Css Animated Background</h1>
22        <h1>Pure Css Animated Background</h1>
23        <h1>Pure Css Animated Background</h1>
24        <h1>Pure Css Animated Background</h1>
25        <h1>Pure Css Animated Background</h1>
26        <h1>Pure Css Animated Background</h1>
27    </div>
28
29
30<div class="area" >
31            <ul class="circles">
32                    <li></li>
33                    <li></li>
34                    <li></li>
35                    <li></li>
36                    <li></li>
37                    <li></li>
38                    <li></li>
39                    <li></li>
40                    <li></li>
41                    <li></li>
42            </ul>
43    </div >
44</body>
45</html>

CSS
1@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
2
3*{
4    margin: 0px;
5    padding: 0px;
6}
7
8body{
9    font-family: 'Exo', sans-serif;
10}
11
12
13.context {
14    width: 100%;
15    position: absolute;
16    top:50vh;
17    
18}
19
20.context h1{
21    text-align: center;
22    color: #fff;
23    font-size: 50px;
24}
25
26
27.area{
28    background: #4e54c8;  
29    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
30    width: 100%;
31    height:100vh;
32    
33   
34}
35
36.circles{
37    position: absolute;
38    top: 0;
39    left: 0;
40    width: 100%;
41    height: 100%;
42    overflow: hidden;
43}
44
45.circles li{
46    position: absolute;
47    display: block;
48    list-style: none;
49    width: 20px;
50    height: 20px;
51    background: rgba(255, 255, 255, 0.2);
52    animation: animate 25s linear infinite;
53    bottom: -150px;
54    
55}
56
57.circles li:nth-child(1){
58    left: 25%;
59    width: 80px;
60    height: 80px;
61    animation-delay: 0s;
62}
63
64
65.circles li:nth-child(2){
66    left: 10%;
67    width: 20px;
68    height: 20px;
69    animation-delay: 2s;
70    animation-duration: 12s;
71}
72
73.circles li:nth-child(3){
74    left: 70%;
75    width: 20px;
76    height: 20px;
77    animation-delay: 4s;
78}
79
80.circles li:nth-child(4){
81    left: 40%;
82    width: 60px;
83    height: 60px;
84    animation-delay: 0s;
85    animation-duration: 18s;
86}
87
88.circles li:nth-child(5){
89    left: 65%;
90    width: 20px;
91    height: 20px;
92    animation-delay: 0s;
93}
94
95.circles li:nth-child(6){
96    left: 75%;
97    width: 110px;
98    height: 110px;
99    animation-delay: 3s;
100}
101
102.circles li:nth-child(7){
103    left: 35%;
104    width: 150px;
105    height: 150px;
106    animation-delay: 7s;
107}
108
109.circles li:nth-child(8){
110    left: 50%;
111    width: 25px;
112    height: 25px;
113    animation-delay: 15s;
114    animation-duration: 45s;
115}
116
117.circles li:nth-child(9){
118    left: 20%;
119    width: 15px;
120    height: 15px;
121    animation-delay: 2s;
122    animation-duration: 35s;
123}
124
125.circles li:nth-child(10){
126    left: 85%;
127    width: 150px;
128    height: 150px;
129    animation-delay: 0s;
130    animation-duration: 11s;
131}
132
133
134
135@keyframes animate {
136
137    0%{
138        transform: translateY(0) rotate(0deg);
139        opacity: 1;
140        border-radius: 0;
141    }
142
143    100%{
144        transform: translateY(-1000px) rotate(720deg);
145        opacity: 0;
146        border-radius: 50%;
147    }
148
149}

Lhankor_Mhy

2019/05/30 04:38

.context { position: absolute; } ↑これは必須条件なんですよね？そうであれば、CSSだけだと対処が難しいかもしれないですね。

退会済みユーザー

2019/05/30 04:47

そうですね、その条件は外したくないです。難しいのでしたら、ほかのものも使っていただいて大丈夫です！(jqueryあたりでしたら気持ち的に楽なんですけど...それ以外でも頑張って理解します)

行動規範の内容に同意します

回答1件

ベストアンサー

サンプル
JavaScriptは、bodyの最後かDOMContentLoadedイベントに入れてください。

js
1let a = Array.from(document.querySelectorAll('*')).map(e=>e.getBoundingClientRect().bottom);
2document.body.style.height = Math.max(...a)+"px";

css
1@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
2
3*{
4    margin: 0px;
5    padding: 0px;
6}
7
8body{
9    font-family: 'Exo', sans-serif;
10}
11
12
13.context {
14    width: 100%;
15    position: absolute;
16    top:50vh;
17
18}
19
20.context h1{
21    text-align: center;
22    color: #fff;
23    font-size: 50px;
24}
25
26
27.area{
28    background: #4e54c8;  
29    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
30    width: 100%;
31    height:100%; /* 変更 */
32    position: relative; /* 追加 */
33
34
35}
36
37.circles{
38    position: absolute;
39    top: 0;
40    left: 0;
41    width: 100%;
42    height: 100%;
43    overflow: hidden;
44}
45
46.circles li{
47    position: absolute;
48    display: block;
49    list-style: none;
50    width: 20px;
51    height: 20px;
52    background: rgba(255, 255, 255, 0.2);
53    animation: animate 25s linear infinite;
54    bottom: -150px;
55
56}
57
58.circles li:nth-child(1){
59    left: 25%;
60    width: 80px;
61    height: 80px;
62    animation-delay: 0s;
63}
64
65
66.circles li:nth-child(2){
67    left: 10%;
68    width: 20px;
69    height: 20px;
70    animation-delay: 2s;
71    animation-duration: 12s;
72}
73
74.circles li:nth-child(3){
75    left: 70%;
76    width: 20px;
77    height: 20px;
78    animation-delay: 4s;
79}
80
81.circles li:nth-child(4){
82    left: 40%;
83    width: 60px;
84    height: 60px;
85    animation-delay: 0s;
86    animation-duration: 18s;
87}
88
89.circles li:nth-child(5){
90    left: 65%;
91    width: 20px;
92    height: 20px;
93    animation-delay: 0s;
94}
95
96.circles li:nth-child(6){
97    left: 75%;
98    width: 110px;
99    height: 110px;
100    animation-delay: 3s;
101}
102
103.circles li:nth-child(7){
104    left: 35%;
105    width: 150px;
106    height: 150px;
107    animation-delay: 7s;
108}
109
110.circles li:nth-child(8){
111    left: 50%;
112    width: 25px;
113    height: 25px;
114    animation-delay: 15s;
115    animation-duration: 45s;
116}
117
118.circles li:nth-child(9){
119    left: 20%;
120    width: 15px;
121    height: 15px;
122    animation-delay: 2s;
123    animation-duration: 35s;
124}
125
126.circles li:nth-child(10){
127    left: 85%;
128    width: 150px;
129    height: 150px;
130    animation-delay: 0s;
131    animation-duration: 11s;
132}
133
134
135
136@keyframes animate {
137
138    0%{
139        transform: translateY(0) rotate(0deg);
140        opacity: 1;
141        border-radius: 0;
142    }
143
144    100%{
145        transform: translateY(-1000px) rotate(720deg);
146        opacity: 0;
147        border-radius: 50%;
148    }
149
150}