画像を下から表示させたい

前提・実現したいこと

下記サイトの該当箇所と同じ動作をさせたい

サイト：https://shop.hugkumiplus.net/Landing/pururi/LandingCartInput.aspx?
該当箇所：https://gyazo.com/0ccc05f9352ed5ff9a801a6c43a30e5a

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5</head>
6<body>
7 <section>
8 	<p class="abs anime03 ma04"><img src="anime_03.png"></p>
9 </section>
10
11<style>
12.anime03 {
13    left: 53%;
14}
15
16.anime03 {
17    width: 22.4%;
18    bottom: 6.4%;
19    max-height: 253px;
20    height: 0;
21    overflow: hidden;
22}
23
24.ma04 {
25    transition: .7s;
26    overflow: hidden;
27}
28
29.ma04 {
30    transition-delay: .5s;
31    height: 31.4%;
32}
33
34
35
36</style>
37</body>
38</html>

試したこと

他のデザインで応用したくデヴェロッパーツールで使われてるソースを見てコピペしてみたのですが
動作が起きません。
これはほかのCSSが影響しているということでしょうか？

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

回答2件

ベストアンサー

深夜の謎テンションで再現してみました。
ペーストしたら動きます。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title></title>
6    <style>
7        body {
8            margin: 0;
9            background-color: black;
10            overflow-x: hidden;
11        }
12
13        .bg01 {
14            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200724035853_3944635a625279653238.png);
15            background-size: contain;
16            background-repeat: no-repeat;
17            background-position: center;
18            width: 100%;
19            height: 100vh;
20            text-align: center;
21            font-size: 0;
22        }
23
24        p {
25            color: white;
26            font-size: 40px;
27            font-style: italic;
28            display: inline-block;
29            vertical-align: top;
30            width: calc(100% / 3);
31            box-sizing: border-box;
32            padding: 0;
33            margin-top: 2%;
34            transform: rotate(-3deg);
35        }
36
37        .bg02 {
38            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200724035853_3068366f4b4d4d5a7964.png);
39            background-size: cover;
40            background-repeat: no-repeat;
41            width: 704px;
42            height: 605px;
43            margin: 5vh auto;
44            position: relative;
45            z-index: 2;
46        }
47
48        .anime01 {
49            width: 33%;
50            height: 0;
51            background-color: silver;
52            position: absolute;
53            bottom: 9.5%;
54            left: 20%;
55            opacity: 0;
56        }
57
58        .anime02 {
59            width: 33%;
60            height: 0%;
61            background-color: gold;
62            position: absolute;
63            bottom: 9.5%;
64            right: 8%;
65            opacity: 0;
66        }
67
68        .anime03 {
69            width: 30%;
70            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200724035853_693579784c43526d4939.png);
71            background-repeat: no-repeat;
72            position: absolute;
73            bottom: 40%;
74            left: 20%;
75            opacity: 0;
76        }
77
78        .start01 {
79            animation: anime01 0.6s forwards;
80        }
81
82        .start02 {
83            animation: anime02 0.9s forwards;
84        }
85
86        .start03 {
87            animation: anime03 0.5s forwards;
88
89        }
90
91        @keyframes anime01 {
92            0% {
93                height: 0%;
94                opacity: 0.2;
95            }
96
97            25% {
98                height: 2%;
99            }
100
101            50% {
102                height: 3%;
103            }
104
105            75% {
106                height: 4%;
107            }
108
109            100% {
110                height: 5%;
111                opacity: 1;
112            }
113
114        }
115
116        @keyframes anime02 {
117            0% {
118                height: 0%;
119                opacity: 0.2;
120            }
121
122            12.5% {
123                height: 1%;
124            }
125
126            25% {
127                height: 1%;
128            }
129
130            37.5% {
131                height: 22.5%;
132            }
133
134            50% {
135                height: 30%;
136            }
137
138            75% {
139                height: 44%;
140            }
141
142            100% {
143                height: 56%;
144                opacity: 1;
145            }
146
147
148        }
149
150        @keyframes anime03 {
151            0% {
152                height: 0%;
153                opacity: 0.2;
154            }
155
156            25% {
157                height: 8%;
158            }
159
160            50% {
161                height: 16%;
162            }
163
164            75% {
165                height: 24%;
166            }
167
168            100% {
169                height: 30%;
170                opacity: 1;
171            }
172        }
173    </style>
174</head>
175
176<body>
177    <div id="_01" class="bg01">
178        <p>
179            全米が泣いた！！<br>
180            衝撃の問題作！！
181        </p>
182        <p>
183            10年連続売上げNo1！！<br>
184            衝撃のコンソメスープ！！<br>
185
186        </p>
187        <p>
188            震えが止まらない！！<br>
189            驚異の依存性！！
190        </p>
191    </div>
192    <div id="_02" class="bg02">
193        <div class="anime01"></div>
194        <div class="anime02"></div>
195        <div class="anime03"></div>
196    </div>
197    <script>
198        const windowHeight = window.innerHeight;
199        window.addEventListener("scroll", () => {
200            const distanceY = document.getElementById("_02").getBoundingClientRect().top;
201            console.log(distanceY);
202            if (windowHeight - distanceY > 0) {
203                setTimeout(() => {
204                    document.querySelector(".anime01").classList.add("start01");
205                    document.querySelector(".anime02").classList.add("start02");
206                    document.querySelector(".anime03").classList.add("start03");
207                }, 800);
208            }
209        });
210    </script>
211</body>
212
213</html>

投稿2020/07/23 19:02

Jon_do

総合スコア1373

kana0701

2020/07/24 03:36

はじめまして、ご教授いただきましてありがとうございます！！！！！とってもすごいです、、、本当にありがとうございます。 html/cssの知識も初心者レベル、jsは知識がほぼないのでいただきましたソースを時間がかかると思うのですがまずは自分で読解して参ります！もしまた疑問点が出ましたら質問させていただくかもしれません、、、その際お時間ありまして気が向きましたらお答えいただけますととても嬉しいです、、！ちなみになのですが、該当箇所を見てぱっとこういう記述にしようと頭に思い浮かぶのでしょうか、、、？わたしは正直引き出しがなく何も思いつかずでして、、、コーディングするのにどれくらいお時間かかったか教えていただくことは可能でしょうか？