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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2644閲覧

ふわっと表示させて文字の切り替えをしたい

Larkiwing

総合スコア120

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/11 10:43

ヘッダー画像の上に文字をふわっと表示させつつ、
決まった秒数ごとに文字の切り替えをしたいです。

例えば日本語で「ああああ」とページを開いた時に表示され、
3秒後くらいに「aaaa」と文字を切り替えたいです。
そしてまた、3秒ぐらいたつと「ああああ」という表示にもどし、
ループさせたいです。

コード

html

1<header class="cover"> 2 <h2 class="catch-copy text-white text-center fadein">aaaa</h2> 3 <h2 class="catch-copy text-white text-center fadein">ああああ</h2> 4 <img src="img/background.jpg" class="img-background" alt=""> 5 </header>

CSS

1.navbar { 2 position: relative; 3} 4 5.logo-img { 6 top: 22px; 7 left: 44px; 8 height: 150%; 9 height: 150%; 10 position: absolute; 11} 12 13.img-background { 14 position: absolute; 15 top:0; 16 left:0; 17 z-index: -1; 18} 19 20.catch-copy { 21 margin-top: 241px; 22 font-size: 40px; 23} 24 25.fadein { 26 opacity : 0.1; 27 transition : all 500ms; 28 } 29 30.fadein.scrollin { 31 opacity : 1; 32 transform : translate(0, 0); 33 }

javascript

1$(function(){ 2 $(window).scroll(function (){ 3 $('.fadein').each(function(){ 4 var elemPos = $(this).offset().top; 5 var scroll = $(window).scrollTop(); 6 var windowHeight = $(window).height(); 7 if (scroll > elemPos - windowHeight + 200){ 8 $(this).addClass('scrollin'); 9 } 10 }); 11 }); 12});

今の状態だと文字がふわっと表示させることはできていますが、
文字の切り替えはできていません。

宜しくお願い致します。

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

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

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

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

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

hatena19

2020/10/11 11:33 編集

なんかやりたいことの説明とコードがまったくあってないのですが。 説明では3秒ごとに文字を切り替え、スクリプトではスクロールすると文字の透過度を変更となってますが、提示するコードを間違ってませんか。 また、HTMLのクラスとCSSのセレクタが合致していないのもあります。 コードを確認して質問にあったものに修正してください。
guest

回答3

0

ベストアンサー

提示のコードを無視して、説明からやりたいことを想像してみました。
違ってたらさらっとスルーしてください。

html

1<header class="cover"> 2 <h2 class="catch-copy text-white text-center fadein1">aaaa</h2> 3 <h2 class="catch-copy text-white text-center fadein2">ああああ</h2> 4</header>

css

1.cover { 2 width: 100%; 3 height: 400px; 4 position:relative; 5 background-image: url(https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg); 6 background-size: cover; 7} 8.catch-copy { 9 font-size: 40px; 10 position: absolute; 11 top: 140px; 12 left: 100px; 13} 14.fadein1 { 15 animation: fadein 3s ease-in-out infinite alternate both; 16} 17.fadein2 { 18 animation: fadein 3s ease-in-out 3s infinite alternate both; 19} 20 21.fadein.scrollin { 22 opacity: 1; 23 transform: translate(0, 0); 24} 25 26@keyframes fadein { 27 0%{ 28 opacity: 0; 29 } 30 20%{ 31 opacity: 0; 32 } 33 } 34 100%{ 35 opacity: 1; 36 } 37}

Codepenサンプル

投稿2020/10/11 12:19

編集2020/10/11 12:20
hatena19

総合スコア33620

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

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

Larkiwing

2020/10/11 12:51

回答ありがとうございます。 説明が足りなくてすみませんでした。 想像力が神ですね('◇')ゞ ぴったり僕のやりたいことに当てはまりました!
guest

0

こんばんは。

以下のようにしてみてはいかがですか?

サンプル

css

1.fadein:after{ 2 content: ""; 3 animation: test 3s infinite; 4} 5 6@keyframes test{ 7 to{ 8 content: "aaaa"; 9 } 10 from{ 11 content: "ああああ"; 12 } 13}

なお、疑似要素にテキストを入れているので、要素のテキストは削除してください。

投稿2020/10/11 11:19

Lhankor_Mhy

総合スコア35871

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

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

Larkiwing

2020/10/11 12:49

回答ありがとうございます!
guest

0

完全に出遅れた形となりましたが一応作ってみました。
参考までに...

CSS

1 .navbar { 2 position: relative; 3 } 4 5 .logo-img { 6 top: 22px; 7 left: 44px; 8 height: 150%; 9 height: 150%; 10 position: absolute; 11 } 12 13 .img-background { 14 position: absolute; 15 top:0; 16 left:0; 17 z-index: -1; 18 } 19 20 .catch-copy { 21 margin-top: 241px; 22 font-size: 40px; 23 } 24 25 @keyframes fadeIn { 26 0% {opacity: 0} 27 100% {opacity: 1} 28 } 29 30 .fadein { 31 animation: fadeIn 3s ease 0s 1 normal; 32 }

javascript

1 var msgs = ["aaaa","ああああ"]; 2 var msgNo = msgs.length; 3 var an = false; 4 $(function(){ 5 $(window).scroll(function (){ 6 $('.catch-copy').each(function(){ 7 var elemPos = $(this).offset().top; 8 var scroll = $(window).scrollTop(); 9 var windowHeight = $(window).height(); 10 if (scroll > elemPos - windowHeight + 200){ 11 if(an == false){ 12 setFadein(); 13 an = true; 14 } 15 }else{ 16 an = false; 17 } 18 }); 19 }); 20 $('.catch-copy').on('webkitAnimationEnd', function() { 21 if(an == true){ 22 $('.catch-copy').removeClass('fadein'); 23 ti = setTimeout("setFadein()", 3000); 24 } 25 }); 26 }); 27 function setFadein(){ 28 msgNo ++; 29 if(msgs.length <= msgNo) msgNo = 0; 30 $('.catch-copy').text(msgs[msgNo]); 31 $('.catch-copy').addClass('fadein'); 32 }

HTML

1<html> 2<head> 3 <meta charset="UTF-8"> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 5</head> 6<body> 7<header class="cover"> 8 <h2 class="catch-copy text-white text-center">aaaa</h2> 9 <img src="img/background.jpg" class="img-background" alt=""> 10</header> 11</body> 12</html>

投稿2020/10/11 13:14

kuma_kuma_

総合スコア2506

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

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

Larkiwing

2020/10/11 13:33

ありがとうございます。 次回参考にさせて頂きます('◇')ゞ
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問