インパクトのある表現。このサイトにはどのような技術が使われているのでしょうか？

ホームページの表現で今後できることを増やすためにいろいろ試して実装してみたりと繰り返しているのですが

https://supercrowds.co/

このURLの参考サイトの

１．オープニングで、中心から円が大きくなってコンテンツが表示される部分。

2.コンテンツが表示されたあと、斜めに画像が崩れて（落ちて）スライドする画像。

上記の2点については、どれだけ調べても実現できそうにありません。

この2点にはどのような技術が使われていると考えられますか？

1については、ローディングのレイヤー画面を画面一面に表示して、時間の経過とともに非表示にするなどはできますが、真ん中からコンテンツが見えるというのが試行錯誤しましたが、検討つきませんでした。

2については、似た動きをするjqueryのスライダーは見当たりませんので、何かの技術で開発されているのかと思いますが、検討もつきません。

ご存知の方がいらっしゃいましたらご教授お願い致します。

m.ts10806

2020/08/06 11:48

いきなり他人に聞くのではなく、まず自身で調べてみては。 https://ascii.jp/elem/000/000/999/999122/

mi_

2020/08/06 11:54

まだまだだと思いますが、6時間ほどいろいろなWebページを見て回ったり、コードで試したのですが近づけませんでした。ご教授頂いた方法でもう一度調べてみます。

m.ts10806

2020/08/06 11:58

時間が全てではないですよ。「○時間調べました」とか時間だけ書く人って大抵間違った方法のまま突っ走っていて浪費していることが多いです。ただ、何も手がつかない想像つかないのなら、それに手を付ける段階ではないということで、もっと基本的な、小さいアプリケーションを作るところからやってみてはどうでしょう。基本は「要件の細分化」「部品作り」です。参考：https://teratail.com/questions/122705

miyabi_pudding

2020/08/06 12:05

> 6時間ほどいろいろなWebページを見て回ったり少なくとも6時間程度で習得できるレベルのサイトではないとお見受けします。（フロントエンド慣れてない限り）

mi_

2020/08/07 08:54

ご教授いただいた開発者ツールで、CreateJSというのがありましたので、ひととおりチュートリアルを行って、CreateJSで独自にカルーセルを作ってほぼ同じものが完成しました。ありがとうございました。

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

回答3件

ベストアンサー

たとえばsvgでこんな感じがつくれます

codepen lagged move

投稿2020/08/06 12:15

総合スコア116724

2020/08/06 12:15

2020/08/07 08:58

codepenにも上げていただきありがとうございます。上記コードと、wordpress×SliderProなどの組み合わせで試行錯誤しましたが、端の処理が同じになりませんでした。最終的にcreateJSでカルーセルを作って、3層構造でタイミングをずらしてほぼ参考サイトと同じ動きが完成しました。マスクをかけて実現するというのが、思いもつかなかったので助かりました。ありがとうございました。

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

cssだけで再現できたのでアウトプットもかねて投稿します。

アップローダーから画像が削除されていたら動きません。
画像の切り方は少々特殊です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>マネ</title>
7    <style>
8        body {
9            height: 100vh;
10            position: relative;
11            margin: 0;
12        }
13
14        .windowWrap {
15            overflow: hidden;
16        }
17
18        .windowWrap,
19        .window01,
20        .window02,
21        .window03,
22        .window04,
23        .window05,
24        .window06,
25        .window07,
26        .window08,
27        .window09 {
28            width: 1000px;
29            height: 600px;
30            position: absolute;
31            margin: auto;
32            top: 0;
33            left: 0;
34            bottom: 0;
35            right: 0;
36        }
37
38        .window00 {
39            background-color: transparent;
40            width: 0;
41            height: 0;
42            z-index: 10;
43            border-radius: 100%;
44            box-shadow: 0 0 1000px 1000px white;
45            position: absolute;
46            margin: auto;
47            top: 0;
48            left: -500px;
49            bottom: 0;
50            right: -500px;
51            animation: circle 2s ease-in forwards;
52        }
53
54
55        .window01 {
56            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003711_4771676a367a4d683343.png);
57            animation: slide01 1s ease-in-out 5s forwards;
58            z-index: 7;
59        }
60
61
62        .window02 {
63            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003710_4e4f5847416d6c334d71.png);
64            animation: slide01 1.5s ease-in-out 5s forwards;
65            z-index: 8;
66        }
67
68
69        .window03 {
70            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003710_4233697a47567547316d.png);
71            animation: slide01 2s ease-in-out 5s forwards;
72            z-index: 9;
73        }
74
75        .window04 {
76            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003845_444b4e794a4e31304e6e.png);
77            transform: translateX(100%);
78            animation: slide02 1s ease-in-out 5s forwards, slide01 1s ease-in-out 8s forwards;
79            z-index: 4;
80        }
81
82
83        .window05 {
84            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003845_496559677a464276306c.png);
85            transform: translateX(100%);
86            animation: slide02 1.5s ease-in-out 5s forwards, slide01 1.5s ease-in-out 8s forwards;
87            z-index: 5;
88        }
89
90
91        .window06 {
92            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003845_585a55344d3745577543.png);
93            transform: translateX(100%);
94            animation: slide02 2s ease-in-out 5s forwards, slide01 2s ease-in-out 8s forwards;
95            z-index: 6;
96        }
97
98        .window07 {
99            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003711_4771676a367a4d683343.png);
100            transform: translateX(200%);
101            z-index: 1;
102            animation: slide03 1s ease-in-out 5s forwards, slide02 1s ease-in-out 8s forwards
103        }
104
105
106        .window08 {
107            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003710_4e4f5847416d6c334d71.png);
108            transform: translateX(200%);
109            z-index: 2;
110            animation: slide03 1.5s ease-in-out 5s forwards, slide02 1.5s ease-in-out 8s forwards
111        }
112
113
114        .window09 {
115            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200809003710_4233697a47567547316d.png);
116            transform: translateX(200%);
117            z-index: 3;
118            animation: slide03 2s ease-in-out 5s forwards, slide02 2s ease-in-out 8s forwards
119        }
120
121        @keyframes circle {
122            0% {
123                width: 0;
124                height: 0;
125            }
126
127            100% {
128                width: 1200px;
129                height: 1200px;
130            }
131        }
132
133
134        @keyframes slide01 {
135            0% {
136                transform: translateX(0);
137            }
138
139            100% {
140                transform: translateX(-100%)
141            }
142        }
143
144        @keyframes slide02 {
145            0% {
146                transform: translateX(100%);
147            }
148
149            100% {
150                transform: translateX(0);
151            }
152
153
154        }
155
156        @keyframes slide03 {
157            0% {
158                transform: translateX(200%);
159            }
160
161            100% {
162                transform: translateX(100%)
163            }
164        }
165    </style>
166</head>
167
168<body>
169    <div class="windowWrap">
170        <div class="window00"></div>
171        <div class="window01"></div>
172        <div class="window02"></div>
173        <div class="window03"></div>
174        <div class="window04"></div>
175        <div class="window05"></div>
176        <div class="window06"></div>
177        <div class="window07"></div>
178        <div class="window08"></div>
179        <div class="window09"></div>
180    </div>
181</body>
182
183</html>