質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

背景と文字を時間差でワイプ表示させてフェードアウトさせたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 183

gumin

score 4

インターネットでいろいろと検索してみたのですが、答えが見つからなかったため、質問させてください。

HTMLとCSSを使用し、下図の文字列とその背景色を左から右にワイプ表示させたいです。

イメージ説明

①.背景色(グレー部分(#AAA))を左から右にワイプ表示
②.①表示後、文字列を左から右にワイプ表示
③.②表示後、3秒経過した後背景色と文字列を同時にフェードアウトさせる

までを一連の流れとしたいです。
疑似要素等も使用してみたのですが、浅学のため、背景色が文字の上に重なってしまい、実装できませんでした。

ページ表示の遅延を防ぐため、できればJSは使用したくないです。。。

申し訳ないのですが、ご教授よろしくお願いします。

ソース追記します。opacity:1で現時点でまず文字が表示されないため、フェードアウトまで実装できておりません…。

<div class="p-home-mainvisual__text-area">
    <div>
        <span class="f-bg">abcde</span>
        <ul class="f-text">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
</div>
    .p-home-mainvisual__text-area{
        position: relative;
        width: 100%!important;
        text-align: center;
        color: #FFF;
    }
    .f-bg{
        content: "";
        position: absolute;
        top: 200px;
        left: 50%;
        font-size: 3.5em;
        color: transparent;
        width:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        padding: 0 20px;

    }
    .f-bg::before{
        display: block;
        content: "";
        height: 100%;
        background: #AAA;
        position: absolute;
        top: 0;
        opacity:0.7;
        animation: wipe .7s ease-in-out both;
        animation-delay: 1s;
    }    
    @keyframes wipe {
        0% {
            left:0;
            right: 100%;
           }
        100% {
            left:0;
            right:0;
        }
    }
    .f-text{
        margin-left:30%;
        margin-top:16%;
    }
    .f-text li{
        float: left;
        animation: wipe-text;
        opacity:0;
        font-size:4em;
    }
    .f-text > li:nth-child(1){
        animation-delay: 2s;
    }
    .f-text > li:nth-child(2){
        animation-delay: 2.5s;
    }
    .f-text > li:nth-child(3){
        animation-delay: 3s;
    }
    .f-text > li:nth-child(4){
        animation-delay: 3.5s;
    }
    .f-text > li:nth-child(5){
        animation-delay: 4.0s;
    }

    @keyframes wipe-text{
        0% {
            opacity:0;
        }
        100%{
            opacity:1;
        }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/07/22 13:15

    ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • -millmill-

    2020/07/22 17:32

    3つの動きを連動させるという、cssをお考えのようですが。。。
    複数の動きを制御するのは最初は大変ですから
    まず、1つづつの動きを調べ実装される事から始められてはいかがでしょう?

    カッコいいのを作りたい! 頑張る!!
    というのはとても良い事ですし色々調べれは可能だと思いますが、、、
    他の方も言っておられるように
    能力以上の事を求めるのであれば
    まずご自身が出来るところまで努力され
    出来ない部分を明確に示した上で、
    救助を求めるべきだと思います。

    キャンセル

  • gumin

    2020/07/22 18:32 編集

    アドバイスいただきありがとうございます。
    質問時点では頭の中がこんがらがっており、何から手をつけてよいか、そもそも自分がどこからわかっていないかもわからず、実現したいことのみを質問にあげてしまいました。
    過去の質問では自分の中でも惜しいところまで来ていると感じコードを載せてきたのですが、今回の質問に至るまでの経緯でコードを試行錯誤してしまい最終的に自分の書きたいコードもわからなくなってしまったため載せませんでした。
    この後現時点でのコードを掲載します。ありがとうございます。

    キャンセル

回答 2

checkベストアンサー

+2

ヒントとしては、CSSアニメーションを使います。

CSSアニメーション 入門 - Qiita

左から右にワイプ表示は、transform: translate() を使って -100% から 0% に移動させるといいでしょう。

transform - CSS: カスケーディングスタイルシート | MDN

フェイドアウトは opacity を 1 から 0 までアニメーションさせればいいですね。
(これは、Lhankor_Mhyさんのリンク先も同様の手法を使ってますね。)

Lhankor_Mhyさんや kei344さんも言われてるように、調べたことと、未完成でもいいのでコードを提示したほうがいいでしょう。

とりあえずシンプルなHTMLに適用するサンプルを置いておきます。

<div class="box1">
  <p>
    abcde
  </p>
</div>
body {
  margin: 0;
}
.box1 {
  font-size: 30px;
  height: 40px;
  display: inline-block;
  background-color: #aaa;
  animation: wipein 2s, fadeout 2s 7s;
  animation-fill-mode: both;

}
.box1 p {
  margin: 0;
  color: white;
  animation: wipein 2s 2s;
  animation-fill-mode: both;
}

@keyframes wipein {
  0% {transform: translate(-100%);}
  100% {transform: translate(0);}
}

@keyframes fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;} 
}

Codepenサンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/22 19:09

    コードの載せていない中、ご教授いただきありがとうございます。
    同サイトを参考にしていたはずなのに、自分の理解力、また応用力のなさを痛感いたしました。
    いただいたリンクで中途半端に持っていたCSSアニメーションの知識を一から見直していきたいと思います。
    いただいたコードを参考にしつつ自力でなんとか頑張りたいと思います。
    参考コードとわかりやすいリンクをいただけたので、ベストアンサーにさせていただきます。

    キャンセル

+2

>インターネットでいろいろと検索してみたのですが、答えが見つからなかった

「CSS 背景 ワイプ」でググった2番目

CSS3 : 文字列のワイプ表示 | ハックノート

「CSS フェードアウト」でググった1番目

要素をフェードアウトする - CSS Tips

以下を撤回し削除します。

# 本当に検索をしたのですか?

「インターネットでいろいろと検索してみたのですが、答えが見つからなかった」とのことですが、どのようなキーワードで検索をかけたのでしょうか。前述の検索キーワードはあなたのご質問の文章の中から抜き出したものです。

失礼ながら、そもそも本当に検索をしてから質問をしているのか疑っています。 「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」あるいは「ググってみたけど実装が面倒だからteratailに質問を投げて寝とこ」みたいな質問だと、受け取りました。 質問するときのヒントにもありますように、最低限の検索をしてから質問をされることをお勧めします。

# ググってから質問をするべき理由

なぜ質問する前に最低限の検索をした方がいいかというと、ググればすぐわかるような質問をすると、回答者に「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな丸投げ質問だと思われてしまうからです。 teratailの回答者は無償で回答していますので、「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」のような質問をされると、「俺はお前の部下じゃねーよ」などと不快になる人が多いかと思います。 不快になるような質問からは、よいコミュニケーションが生まれず、問題解決につながらず、ただ荒れたやり取りがあるだけになってしまいます。 これは避けるべきです。

# 本当にググってもわからなかった場合

ですから、本当にググってもわからなかった場合、「XXXXXというキーワードで調べて、XXXという記事を見ましたが、それらしき内容ではありませんでした」などと書いてください。 そうであれば、「ああ、この人は丸投げをしているのではなくて、ググるのが下手なんだな」と伝わるはずです。

質問者も回答者も、お互いに配慮して、気持ちの良いやり取りをしていきたいと思っていますので、なにとぞご協力をお願いいたします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/22 18:23 編集

    質問内容が雑になってしまい申し訳ございません。
    回答いただいた内容への回答で申し訳ないのですが、私からの質問を見て同じように思われている方がいらっしゃると思いますので、こちらで一点一点説明させてください。

    >「CSS 背景 ワイプ」でググった2番目
    こちらのページについて、質問前に確認し、背景のワイプ方法について確認しておりました。ただ
    ・文字列のワイプ方法が求めているものと違ったこと
    ・文字が背景色より前に出なかったため、この方法は違うと感じてしまったこと
    ・上の二点から背景のワイプ方法も同じ方法は使えないのではないかと考えてしまったこと
    の三点からこのページの方法は私が求めるものと異なると判断してしまいました…。

    もしかすると、この判断がおかしいと思われるかもしれませんが、今現在なんとかネットでCSSの知識を拾いながら付け焼刃でページを実装している状態のCSS初級者の精一杯がこれでした…。
    (思い返せば、このサイトを確認していると先述した上で、背景のワイプ方法はこれでいいですか?と質問を投げたり、背景より文字を前に出す方法と文字列をワイプする方法のみに焦点を絞って質問を投げたりするべきでしたね…。)
    質問内容にあげた「疑似要素等も使用してみたのですが、浅学のため、背景色が文字の上に重なってしまい、実装できませんでした。」の部分につきましては、特にこのサイト等を参考にし実装を練っておりました。

    >「CSS フェードアウト」でググった1番目
    すいませんフェードアウトについては方法は知っていたのですが、ワイプで表示をしてからのフェードアウトの方法がわからなかったのです…
    確かに質問内容を見るとフェードアウト自体を丸投げしているように見えるため気をつけます。

    >本当に検索をしたのですか?
    言い訳するようで不快に思われるかもしれませんが、本当に検索を重ね、5、6時間程試行錯誤は繰り返しておりました…。
    結果として自分が検索した結果が自分の求めるものに繋がらず、その証跡を質問内容に載せなかったため、今回のご指摘に繋がってしまったことを反省しております。

    ググるのが下手に加えて、理解力に乏しいことも加わっており、さらに説明力も不足しているため、今回の質問内容大変不快に感じられたかと思います。
    アドバイスいただいたことを踏まえて、次回より自分の思いとそれに向けて行動したことを質問内容にあげつつ、回答者の皆様に不快にならないように努めます。ありがとうございます!

    キャンセル

  • 2020/07/25 10:08

    コメントありがとうございます。
    真摯に問題に取り組み、ご質問をされたことがわかりました。
    後段の部分を撤回し、無礼なことを申し上げたことをお詫びします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る