Q&A
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
インターネットでいろいろと検索してみたのですが、答えが見つからなかったため、質問させてください。
HTMLとCSSを使用し、下図の文字列とその背景色を左から右にワイプ表示させたいです。
①.背景色（グレー部分(#AAA)）を左から右にワイプ表示
②.①表示後、文字列を左から右にワイプ表示
③.②表示後、3秒経過した後背景色と文字列を同時にフェードアウトさせる
までを一連の流れとしたいです。
疑似要素等も使用してみたのですが、浅学のため、背景色が文字の上に重なってしまい、実装できませんでした。
ページ表示の遅延を防ぐため、できればJSは使用したくないです。。。
申し訳ないのですが、ご教授よろしくお願いします。
ソース追記します。opacity:1で現時点でまず文字が表示されないため、フェードアウトまで実装できておりません…。
HTML
1<div class="p-home-mainvisual__text-area"> 2 <div> 3 <span class="f-bg">abcde</span> 4 <ul class="f-text"> 5 <li>a</li> 6 <li>b</li> 7 <li>c</li> 8 <li>d</li> 9 <li>e</li> 10 </ul> 11 </div> 12</div>
css
1 .p-home-mainvisual__text-area{ 2 position: relative; 3 width: 100%!important; 4 text-align: center; 5 color: #FFF; 6 } 7 .f-bg{ 8 content: ""; 9 position: absolute; 10 top: 200px; 11 left: 50%; 12 font-size: 3.5em; 13 color: transparent; 14 width:50%; 15 -webkit-transform: translateX(-50%); 16 transform: translateX(-50%); 17 padding: 0 20px; 18 19 } 20 .f-bg::before{ 21 display: block; 22 content: ""; 23 height: 100%; 24 background: #AAA; 25 position: absolute; 26 top: 0; 27 opacity:0.7; 28 animation: wipe .7s ease-in-out both; 29 animation-delay: 1s; 30 } 31 @keyframes wipe { 32 0% { 33 left:0; 34 right: 100%; 35 } 36 100% { 37 left:0; 38 right:0; 39 } 40 } 41 .f-text{ 42 margin-left:30%; 43 margin-top:16%; 44 } 45 .f-text li{ 46 float: left; 47 animation: wipe-text; 48 opacity:0; 49 font-size:4em; 50 } 51 .f-text > li:nth-child(1){ 52 animation-delay: 2s; 53 } 54 .f-text > li:nth-child(2){ 55 animation-delay: 2.5s; 56 } 57 .f-text > li:nth-child(3){ 58 animation-delay: 3s; 59 } 60 .f-text > li:nth-child(4){ 61 animation-delay: 3.5s; 62 } 63 .f-text > li:nth-child(5){ 64 animation-delay: 4.0s; 65 } 66 67 @keyframes wipe-text{ 68 0% { 69 opacity:0; 70 } 71 100%{ 72 opacity:1; 73 } 74
3つの動きを連動させるという、cssをお考えのようですが。。。
複数の動きを制御するのは最初は大変ですから
まず、1つづつの動きを調べ実装される事から始められてはいかがでしょう?
カッコいいのを作りたい! 頑張る!!
というのはとても良い事ですし色々調べれは可能だと思いますが、、、
他の方も言っておられるように
能力以上の事を求めるのであれば
まずご自身が出来るところまで努力され
出来ない部分を明確に示した上で、
救助を求めるべきだと思います。
アドバイスいただきありがとうございます。
質問時点では頭の中がこんがらがっており、何から手をつけてよいか、そもそも自分がどこからわかっていないかもわからず、実現したいことのみを質問にあげてしまいました。
過去の質問では自分の中でも惜しいところまで来ていると感じコードを載せてきたのですが、今回の質問に至るまでの経緯でコードを試行錯誤してしまい最終的に自分の書きたいコードもわからなくなってしまったため載せませんでした。
この後現時点でのコードを掲載します。ありがとうございます。
回答2件
0
ベストアンサー
ヒントとしては、CSSアニメーションを使います。
左から右にワイプ表示は、transform: translate() を使って -100% から 0％ に移動させるといいでしょう。
transform - CSS: カスケーディングスタイルシート | MDN
フェイドアウトは opacity を 1 から 0 までアニメーションさせればいいですね。
（これは、Lhankor_Mhyさんのリンク先も同様の手法を使ってますね。）
Lhankor_Mhyさんや kei344さんも言われてるように、調べたことと、未完成でもいいのでコードを提示したほうがいいでしょう。
とりあえずシンプルなHTMLに適用するサンプルを置いておきます。
html
1<div class="box1"> 2 <p> 3 abcde 4 </p> 5</div>
css
1body { 2 margin: 0; 3} 4.box1 { 5 font-size: 30px; 6 height: 40px; 7 display: inline-block; 8 background-color: #aaa; 9 animation: wipein 2s, fadeout 2s 7s; 10 animation-fill-mode: both; 11 12} 13.box1 p { 14 margin: 0; 15 color: white; 16 animation: wipein 2s 2s; 17 animation-fill-mode: both; 18} 19 20@keyframes wipein { 21 0% {transform: translate(-100%);} 22 100% {transform: translate(0);} 23} 24 25@keyframes fadeout { 26 0% {opacity: 1;} 27 100% {opacity: 0;} 28}
投稿2020/07/22 08:29
編集2020/07/22 08:31
総合スコア33715
コードの載せていない中、ご教授いただきありがとうございます。
同サイトを参考にしていたはずなのに、自分の理解力、また応用力のなさを痛感いたしました。
いただいたリンクで中途半端に持っていたCSSアニメーションの知識を一から見直していきたいと思います。
いただいたコードを参考にしつつ自力でなんとか頑張りたいと思います。
参考コードとわかりやすいリンクをいただけたので、ベストアンサーにさせていただきます。
0
インターネットでいろいろと検索してみたのですが、答えが見つからなかった
「CSS 背景 ワイプ」でググった2番目
「CSS フェードアウト」でググった1番目
以下を撤回し削除します。
# 本当に検索をしたのですか？
「インターネットでいろいろと検索してみたのですが、答えが見つからなかった」とのことですが、どのようなキーワードで検索をかけたのでしょうか。前述の検索キーワードはあなたのご質問の文章の中から抜き出したものです。
失礼ながら、そもそも本当に検索をしてから質問をしているのか疑っています。
**「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」あるいは「ググってみたけど実装が面倒だからteratailに質問を投げて寝とこ」**みたいな質問だと、受け取りました。
質問するときのヒントにもありますように、最低限の検索をしてから質問をされることをお勧めします。
# ググってから質問をするべき理由
なぜ質問する前に最低限の検索をした方がいいかというと、ググればすぐわかるような質問をすると、回答者に「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな丸投げ質問だと思われてしまうからです。
teratailの回答者は無償で回答していますので、「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」のような質問をされると、「俺はお前の部下じゃねーよ」などと不快になる人が多いかと思います。
不快になるような質問からは、よいコミュニケーションが生まれず、問題解決につながらず、ただ荒れたやり取りがあるだけになってしまいます。
これは避けるべきです。
# 本当にググってもわからなかった場合
ですから、本当にググってもわからなかった場合、「XXXXXというキーワードで調べて、XXXという記事を見ましたが、それらしき内容ではありませんでした」などと書いてください。
そうであれば、「ああ、この人は丸投げをしているのではなくて、ググるのが下手なんだな」と伝わるはずです。
質問者も回答者も、お互いに配慮して、気持ちの良いやり取りをしていきたいと思っていますので、なにとぞご協力をお願いいたします。
投稿2020/07/22 06:01
編集2020/07/25 01:10
総合スコア36117
質問内容が雑になってしまい申し訳ございません。
回答いただいた内容への回答で申し訳ないのですが、私からの質問を見て同じように思われている方がいらっしゃると思いますので、こちらで一点一点説明させてください。
＞「CSS 背景 ワイプ」でググった2番目
こちらのページについて、質問前に確認し、背景のワイプ方法について確認しておりました。ただ
・文字列のワイプ方法が求めているものと違ったこと
・文字が背景色より前に出なかったため、この方法は違うと感じてしまったこと
・上の二点から背景のワイプ方法も同じ方法は使えないのではないかと考えてしまったこと
の三点からこのページの方法は私が求めるものと異なると判断してしまいました…。
もしかすると、この判断がおかしいと思われるかもしれませんが、今現在なんとかネットでCSSの知識を拾いながら付け焼刃でページを実装している状態のCSS初級者の精一杯がこれでした…。
（思い返せば、このサイトを確認していると先述した上で、背景のワイプ方法はこれでいいですか？と質問を投げたり、背景より文字を前に出す方法と文字列をワイプする方法のみに焦点を絞って質問を投げたりするべきでしたね…。）
質問内容にあげた「疑似要素等も使用してみたのですが、浅学のため、背景色が文字の上に重なってしまい、実装できませんでした。」の部分につきましては、特にこのサイト等を参考にし実装を練っておりました。
＞「CSS フェードアウト」でググった1番目
すいませんフェードアウトについては方法は知っていたのですが、ワイプで表示をしてからのフェードアウトの方法がわからなかったのです…
確かに質問内容を見るとフェードアウト自体を丸投げしているように見えるため気をつけます。
＞本当に検索をしたのですか？
言い訳するようで不快に思われるかもしれませんが、本当に検索を重ね、5、6時間程試行錯誤は繰り返しておりました…。
結果として自分が検索した結果が自分の求めるものに繋がらず、その証跡を質問内容に載せなかったため、今回のご指摘に繋がってしまったことを反省しております。
ググるのが下手に加えて、理解力に乏しいことも加わっており、さらに説明力も不足しているため、今回の質問内容大変不快に感じられたかと思います。
アドバイスいただいたことを踏まえて、次回より自分の思いとそれに向けて行動したことを質問内容にあげつつ、回答者の皆様に不快にならないように努めます。ありがとうございます！
コメントありがとうございます。
真摯に問題に取り組み、ご質問をされたことがわかりました。
後段の部分を撤回し、無礼なことを申し上げたことをお詫びします。
あなたの回答
tips
プレビュー
