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

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

新規登録して質問してみよう
ただいま回答率
85.46%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

341閲覧

アニメーションで文字を1行ずつ時間をずらして表示させたい

spn

総合スコア37

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/05/31 13:15

実現したいこと

アニメーションで文字を1行ずつ時間をずらして表示させたい

前提

https://codepen.io/jonnowitts/pen/YQLRYE

ハンバーガーメニューをこちらのサイトと同じような動きにしたいのですが、
現在3行とも同時に表示しています。

該当のソースコード

html

1 <nav class="spmenu" id="spmenu" aria-label="スマホ用メニュー"> 2 3 <div class="spmenu__inner"> 4 <h1 class="header__logo header__logo--sp"><a href="#top"><img src="img/top-header-logo@2x.png" 5 alt=""></a></h1> 6 <p class="spmenu__nav-ttl">contents</p><!-- /.spmenu__nav-ttl--> 7 <ul class="spmenu__list"> 8 <li class="spmenu__item"><a href="room.html" class="spmenu__link">お部屋</a></li> 9 <li class="spmenu__item"><a href="menu.html" class="spmenu__link">お料理</a></li> 10 <li class="spmenu__item"><a href="hot-spring.html" class="spmenu__link">温泉</a></li> 11 12 </ul><!-- /.spmenu__list --> 13 14 <p class="spmenu__info-ttl">information</p><!-- /.spmenu__nav-ttl--> 15 <div class="spmenu__tel"> 16 <a class="tel-number" href="TEL:000-0000-0000">TEL.000-0000-0000</a> 17 18 </div><!-- /.sumenu__tel--> 19 <address class="spmenu__adress"> 20 <span class="post-code">〒000-0000</span><!-- /.post-code --> 21 <span class="address">山形県鶴岡市xxxxxxxxxxx</span><!-- /.address --> 22 </address> 23 24 <div class="spmenu__btn__wrapper"> 25 <botton class="reserve-btn spmenu__btn"><a href=#">宿泊予約</a></botton> 26 </div> 27 </div><!-- /.spmenu__inner --> 28 29 </nav><!-- /.spmenu --> 30コード

scss

1.spmenu { 2 position: fixed; 3 z-index: 999; 4 top: 0; 5 right: -120%; 6 overflow-x: hidden; 7 overflow-y: auto; 8 width: 100%; 9 height: 100vh; 10 max-width: 70vw; 11 height: 100%; 12 background: #373331; 13 transition: all 0.6s ease-in-out; 14 15 .spmenu__list { 16 .spmenu__item { 17 .spmenu__link { 18 transform: translate3d(-150px, 0, 0); 19 transition: transform .15s ease-in; 20 } 21 } 22 } 23 24 &__inner { 25 padding: 50px 20px; 26 } 27 28 @include medium { 29 display: none !important; 30 } 31} 32 33/*アクティブクラスがついたら位置を0に*/ 34.spmenu.panelactive { 35 right: 0; 36} 37 38 39//レイアウト 40.spmenu__inner { 41 padding-left: 15px; 42 padding-right: 15px; 43 margin-left: auto; 44 margin-right: auto; 45 min-width: 230px; 46 /*ナビゲーション天地中央揃え*/ 47 position: absolute; 48 z-index: 999; 49 top: 50%; 50 left: 50%; 51 transform: translate(-50%, -50%); 52} 53 54//タイトル 55.spmenu__nav-ttl, 56.spmenu__info-ttl { 57 opacity: 0.6; 58 color: #fff; 59 font-size: 12px; 60 margin-top: 30px; 61 text-transform: uppercase; 62} 63 64.spmenu__adress, 65.spmenu__tel { 66 color: #fff; 67 margin-top: 15px; 68} 69 70.spmenu__adress span { 71 font-size: 14px; 72 display: block; 73 margin: 0; 74} 75 76.spmenu__tel a { 77 font-size: 16px; 78 font-weight: 700; 79 color: #fff; 80 81 &:hover, 82 &:focus { 83 opacity: 0.7; 84 transition: 0.7s; 85 color: #978F10; 86 } 87} 88 89.spmenu__txt { 90 color: #FFF; 91 font-size: 16px; 92 margin-top: 40px; 93 font-weight: 700; 94} 95 96 97 98.spmenu__item { 99 margin-top: 15px; 100} 101 102.spmenu__link { 103 color: #FFF; 104 margin-top: 15px; 105 font-size: 18px; 106 font-weight: 700; 107 display: block; 108 109 &:focus, 110 &:hover { 111 opacity: 0.7; 112 transition: 0.7s; 113 114 } 115} 116 117.menu--active { 118 height: 100vh; 119 overflow: hidden; 120 121 .spmenu__list { 122 .spmenu__item { 123 .spmenu__link { 124 transform: translate3d(0, 0, 0); 125 transition: transform 500ms ease-out; 126 127 /* Handles items within the slide-out to give them the delayed slide-in */ 128 &:first-child { 129 transition-delay: .2s; 130 } 131 132 &:nth-child(2) { 133 transition-delay: .3s; 134 } 135 136 &:last-child { 137 transition-delay: .4s; 138 } 139 140 } 141 } 142 143 } 144 145}

試したこと

自分なりにネットで調べたのですが、よくわかりませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

scss

1 .spmenu__list { 2 .spmenu__item { 3 .spmenu__link { 4 transform: translate3d(-150px, 0, 0); 5 transition: transform .15s ease-in; 6 } 7 } 8 }

上記のコードですが、li要素(.spmenu__item)内のa要素(.spmenu__link)にtransformを設定しています。これはメニュー非表示の状態ですね。

scss

1.menu--active { 2 height: 100vh; 3 overflow: hidden; 4 5 .spmenu__list { 6 .spmenu__item { 7 .spmenu__link { 8 transform: translate3d(0, 0, 0); 9 transition: transform 500ms ease-out; 10 11 /* Handles items within the slide-out to give them the delayed slide-in */ 12 &:first-child { 13 transition-delay: .2s; 14 } 15 16 &:nth-child(2) { 17 transition-delay: .3s; 18 } 19 20 &:last-child { 21 transition-delay: .4s; 22 } 23 } 24 } 25 } 26}

上記のコードでメニュー表示の場合の状態を設定していると思われます。
li要素(.spmenu__item)内のa要素(.spmenu__link)は一つしかないので、どのa要素も最後の子要素(:last-child)になるので、transition-delay: .4s;が設定されることになります。よって同時に移動します。

transform, transition関係の設定をa要素ではなく、li要素に設定すればそれぞれ兄弟要素になりますので、先頭要素、2番目要素、最後の要素にそれぞれのtransition-delayが設定されます。

scss

1```scss 2 .spmenu__list { 3 .spmenu__item { 4// 削除 .spmenu__link { 5 transform: translate3d(-150px, 0, 0); 6 transition: transform .15s ease-in; 7// 削除 } 8 } 9 }

scss

1.menu--active { 2 height: 100vh; 3 overflow: hidden; 4 5 .spmenu__list { 6 .spmenu__item { 7// 削除 .spmenu__link { 8 transform: translate3d(0, 0, 0); 9 transition: transform 500ms ease-out; 10 11 /* Handles items within the slide-out to give them the delayed slide-in */ 12 &:first-child { 13 transition-delay: .2s; 14 } 15 16 &:nth-child(2) { 17 transition-delay: .3s; 18 } 19 20 &:last-child { 21 transition-delay: .4s; 22 } 23// 削除 } 24 } 25 } 26}

投稿2023/05/31 14:15

hatena19

総合スコア33795

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spn

2023/06/01 01:53

liに設定するのですね。初歩的なミスでお恥ずかしいです。でも本当に助かりました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問