ホームページの表現で今後できることを増やすためにいろいろ試して実装してみたりと繰り返しているのですが
このURLの参考サイトの
1.オープニングで、中心から円が大きくなってコンテンツが表示される部分。
2.コンテンツが表示されたあと、斜めに画像が崩れて(落ちて)スライドする画像。
上記の2点については、どれだけ調べても実現できそうにありません。
この2点にはどのような技術が使われていると考えられますか?
1については、ローディングのレイヤー画面を画面一面に表示して、時間の経過とともに非表示にするなどはできますが、真ん中からコンテンツが見えるというのが試行錯誤しましたが、検討つきませんでした。
2については、似た動きをするjqueryのスライダーは見当たりませんので、何かの技術で開発されているのかと思いますが、検討もつきません。
ご存知の方がいらっしゃいましたらご教授お願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/06 11:54
2020/08/06 11:58
2020/08/06 12:05
2020/08/07 08:54
回答3件
0
ベストアンサー
たとえばsvgでこんな感じがつくれます
投稿2020/08/06 12:15
編集2020/08/06 12:28総合スコア116726
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/06 12:15
2020/08/07 08:58
0
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>
投稿2020/08/08 15:52
総合スコア1373
0
html、Javascript、cssで再現可能です。
1.オープニングで、中心から円が大きくなってコンテンツが表示される部分。
ここはcssアニメーション + アニメーションの始動タイミングはJavascriptで制御するなどの
方法で再現可能です。
2. コンテンツが表示されたあと、斜めに画像が切れてスライド
あらかじめ裁断した画像A,B,Cを用意
画像A,B,Cを重ね合わせて表示、Javascriptで横に移動するアニメーションの始動タイミングをずらし
A、B、Cの順番でアニメーションを始動するなどの方法で再現可能です。
投稿2020/08/06 11:49
編集2020/08/06 12:10総合スコア1373
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。