読み込み完了時のレイアウトが崩れるのを解決したいです。

とあるWEBサイトをコーディングしてみたのですがサーバーにアップロードしてスマホで見てみたら森の木の下に空白ができていました。あと、スクロールしているとガクガクしてスムーズにスクロールできません。WEBサイトのURLは、https://yuriika4.com/keiji/です。スマホで見てみてください。スマホはsafariで見てもchromeで見ても同じでした。
下にコードを書いておきます。コードはめっちゃ見にくいと思いますが、どうか解決方法を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <meta name="format-detection" content="telephone=no"> 
7    <title>Protect Nature</title>
8    <link rel="stylesheet" href="css/normalize.css">
9    <link rel="stylesheet" href="css/prototype.css">
10</head>
11<body ontouchstart="">
12       <img class="forest" src="image/image_2.png">
13       <img class="mountain" src="image/image_4_1.png">
14       <div class="background"></div>
15       <div class="container">
16            <h1 class="title">Protect Nature</h1>
17            <div class="about">
18                <h2 class="about_title">INTRODUCTORY</h2>
19                <p class="about_text">
20                    As we all know, one of the most important issues that are currently attracting attention in the world is the natural environment and related problems.The natural environment, as the name implies, is the source of life and the source of securing the needs of humanity. However, this blessing from God is currently being treated very unfairly.
21                </p>
22            </div>
23            <div class="present">
24                <h2 class="present_title">PRESENT SITUATION</h2>
25                <p class="present_text">
26                    At present, the world's natural environment is being destroyed at an alarming rate, and this is why countries, national and international organizations are paying special attention to it.
27                </p>
28                <div class="present_image_area">
29                    <img class="present_image" src="image/image_5.jpg">
30                    <img class="present_image" src="image/image_6.jpg">
31                </div>
32            </div>
33            <div class="conclusion">
34                <h2 class="conclusion_title">CONCLUSION</h2>
35                <p class="conclusion_text">
36                    Our lives are supported by the blessings of nature, which are formed by the interaction of diverse species. In order to protect the complex balance of nature, it is important to protect each and every species from extinction.
37                </p>
38            </div>
39            <div class="card_area">
40                <a href="https://www.springer.com/journal/11356/?utm_source=yahoo_null&utm_medium=cpc&utm_campaign=JJPN_2_KI01_JP_ESPR_cfp_aboutpage&yclid=YSS.EAIaIQobChMIlYH-_4ns8wIVVENgCh0OHwE3EAAYASAAEgJ5i_D_BwE">
41                <div class="card">
42                    
43                    <div class="content">
44                        <h3>01</h3>
45                        <p>Environmental Science and Poluution Research</p>
46                    </div>
47                    
48                </div>
49                </a>
50                <a href="https://www.jstage.jst.go.jp/article/jsoee/20/2/20_2_2_26/_pdf">
51                <div class="card">
52                    <div class="content">
53                        <h3>02</h3>
54                        <p>A comparative study of attitudes and behaviors regarding environmental issues</p>
55                    </div>
56                </div>
57                </a>
58                <a href="https://www.env.go.jp/recycle/circul/venous_industry/ja/history.pdf">
59                <div class="card">
60                    <div class="content">
61                        <h3>03</h3>
62                        <p> Waste Management in Japan History and Current Status</p>
63                    </div>
64                </div>
65                </a>
66            </div>
67            <div class="footer">
68            </div>
69        </div>
70
71   <script src="js/jquery-3.6.0.min.js"></script>
72   <script src="js/prototype.js"></script>
73</body>

css
1html{
2    -webkit-overflow-scrolling: touch;
3}
4body{
5    margin: 0;
6    background: #000;
7}
8h1,h2,p{
9    margin: 0;
10}
11@media screen and (max-width: 700px){
12    img.forest{
13        position: fixed;
14        object-fit: cover;
15        width: 100vw;
16        height: 100vh;
17        z-index: -1;
18    }
19    img.mountain{
20        position: fixed;
21        object-fit: cover;
22        display: inline-block;
23        width: 100vw;
24        height: 100vh;
25        z-index: -3;
26    }
27    div.background{
28        background: black;
29        width: 100vw;
30        height: 200vw;
31        margin: 100vh 0 0 0;
32        position: fixed;
33        z-index: -2;   
34    }
35    div.container{
36        color: aliceblue;
37        z-index: 1;
38        height: 1000vh;
39    }
40    div.container h1{
41        color: aliceblue;
42        position: absolute;
43        z-index: -2;
44        top: 30vh;
45        text-align: center;
46        opacity: 1;
47    }
48    div.container div.about h2.about_title{
49        position: fixed;
50        
51        left: 50vw;
52        transform: translateX(-50%);
53        z-index: 3;
54        text-align: center;
55        opacity: 0;
56        margin-top: 20vw;
57    }
58    div.container div.about p.about_text{
59        position: fixed;
60        top: 50vh;
61        transform: translateY(-50%);
62        z-index: 3;
63        text-align: center;
64        margin: 5vw;
65        opacity: 0;
66    }
67    div.container div.present h2.present_title{
68        position: fixed;
69        
70        left: 50vw;
71        transform: translateX(-50%);
72        z-index: 3;
73        text-align: center;
74        opacity: 0;
75        margin-top: 20vw;
76    }
77    div.container div.present p.present_text{
78        position: fixed;
79        top: 50vh;
80        transform: translateY(-50%);
81        z-index: 3;
82        text-align: center;
83        margin: 5vw;
84        opacity: 0;
85    }
86    div.container div.present div.present_image_area{
87        display: flex;
88        flex-direction: column;
89        position: fixed;
90        top: 50vh;
91        left: 50vw;
92        transform: translate(-50%, -50%);
93    }
94    div.container div.present div.present_image_area img.present_image{
95        z-index: 3;
96        opacity: 0;
97        width: 80vw;
98        height: auto;
99    }
100    div.container div.present div.present_image_area img.present_image:nth-child(1){
101        margin-bottom: 5vw;
102    }
103    div.container div.conclusion h2.conclusion_title{
104        position: fixed;
105        
106        left: 50vw;
107        transform: translateX(-50%);
108        z-index: 3;
109        text-align: center;
110        opacity: 0;
111        margin-top: 20vw;
112    }
113    div.container div.conclusion p.conclusion_text{
114        position: fixed;
115        top: 50vh;
116        transform: translateY(-50%);
117        z-index: 3;
118        text-align: center;
119        margin: 5vw;
120        opacity: 0;
121    }
122    div.container div.card_area{
123        position: fixed ;
124        box-sizing: border-box;
125        display: flex;
126        justify-content: center;
127        flex-wrap: wrap;
128        z-index: 3;
129        opacity: 0;
130    }
131    div.container div.card_area a{
132        display: inline-block;
133        text-decoration: none;
134        backdrop-filter: blur(50px);
135    }
136    div.container div.card_area a div.card{
137        position: relative;
138        width: 70vw;
139        height: 30vh;
140        margin: 2vh 0 0 0;
141        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
142        border-radius: 15px;
143        background: rgba(255, 255, 255, 0.1);
144        overflow: hidden;
145        display: flex;
146        justify-content: center;
147        align-items: center;
148        border-top: 1px solid rgba(255, 255, 255, 0.5);
149        border-left: 1px solid rgba(255, 255, 255, 0.5);
150        
151    }
152    div.container div.card_area a div.card div.content{
153        
154        text-align: center;
155        transition: 0.5s;
156    }
157    div.container div.card_area a div.card div.content h3{
158        position: absolute;
159        top: 0vw;
160        right: 10vw;
161        color: rgba(255, 255, 255, 0.2);
162        pointer-events: none;
163        font-size: 10vh;
164    }
165    div.container div.card_area a div.card div.content p{
166        color: #fff;
167        font-weight: 300; 
168    }
169    div.container div.card_area::before{
170        content: '';
171        position: absolute;
172        top: 0;
173        left: 0;
174        width: 100%;
175        height: 100%;
176        background: linear-gradient(#7b7b7b);
177        clip-path: circle(30% at right 70%);
178        z-index: -1;
179    }
180    div.container div.card_area::after{
181        content: '';
182        position: absolute;
183        top: 0;
184        left: 0;
185        width: 100%;
186        height: 100%;
187        background: linear-gradient(rgb(255 255 255),rgb(255 161 0));
188        clip-path: circle(20% at 10% 10%);
189        z-index: -1;
190    }
191
192}

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

回答2件

scrollは高頻度で呼び出されるイベントなので、処理を最適化しないといけないです。

jQueryはよく重たいと言われるライブラリなので、jQueryを使わない実装を検討してもいいかもしれません。

投稿2021/10/28 10:01

KAOsaka

総合スコア531

Yuriika4

2021/10/29 08:29

jqueryを使わずにJavaScriptで反映させてみたのですが変わりませんでした。具体的にどうすればいいでしょう？

KAOsaka

2021/10/29 08:39

参考記事のリンクを２つ載せましたが、大きくは`requestAnimationFrame`を使用して不要な実行を間引くことと、DOM要素を変数に格納してDOM精査頻度を下げることです。

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

javascriptは？

投稿2021/10/28 09:42

grapefruite

総合スコア2

Yuriika4

2021/10/28 09:43

すみません。書いておきます。 jQuery(window).bind("scroll", function () { scrolled = jQuery(window).scrollTop(); jQuery(".mountain").css("top", - scrolled * 0.15 + "vw"); jQuery(".mountain").css("opacity", 1 - scrolled * 0.001); jQuery(".forest").css("top", - scrolled * 0.28 + "vw"); jQuery(".background").css("top", - scrolled * 0.28 + "vw"); jQuery(".container").css("top", - scrolled * 0.25 + "vw"); jQuery(".title").css("top", 30 - scrolled * (-0.08) + "vh"); jQuery(".title").css("opacity", 1 + (30 - scrolled) * 1 / 200); jQuery(".question_mobile").css("top", 150 - scrolled * 0.1 + "vw"); /*jQuery(".present_text").css("opacity", scrolled);*/ if(scrolled <= 500){ jQuery(".about_title").css("opacity", 1 - (500 - scrolled) * 1 / 200); }else{ jQuery(".about_title").css("opacity", 1 + (500 - scrolled) * 1 / 200); } if(scrolled <= 500){ jQuery(".about_text").css("opacity", 1 - (500 - scrolled) * 1 / 200); }else{ jQuery(".about_text").css("opacity", 1 + (500 - scrolled) * 1 / 200); } if(scrolled <= 1000){ jQuery(".present_title").css("opacity", 1 - (1000 - scrolled) * 1 / 200); }else{ jQuery(".present_title").css("opacity", 1 + (1000 - scrolled) * 1 / 200); } if(scrolled <= 1000){ jQuery(".present_text").css("opacity", 1 - (1000 - scrolled) * 1 / 200); }else{ jQuery(".present_text").css("opacity", 1 + (1000 - scrolled) * 1 / 200); } if(scrolled <= 1500){ jQuery(".present_image").css("opacity", 1 - (1500 - scrolled) * 1 / 200); }else{ jQuery(".present_image").css("opacity", 1 + (1500 - scrolled) * 1 / 200); } if(scrolled <= 2000){ jQuery(".conclusion_title").css("opacity", 1 - (2000 - scrolled) * 1 / 200); }else{ jQuery(".conclusion_title").css("opacity", 1 + (2000 - scrolled) * 1 / 200); } if(scrolled <= 2000){ jQuery(".conclusion_text").css("opacity", 1 - (2000 - scrolled) * 1 / 200); }else{ jQuery(".conclusion_text").css("opacity", 1 + (2000 - scrolled) * 1 / 200); } if(scrolled <= 2500){ jQuery(".card_area").css("opacity", 1 - (2500 - scrolled) * 1 / 200); }else{ jQuery(".card_area").css("opacity", 1 + (2500 - scrolled) * 1 / 200); }

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

あなたの回答