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

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

例えば日本語で「ああああ」とページを開いた時に表示され、
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});

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

宜しくお願い致します。

hatena19

2020/10/11 11:33 編集

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

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}

投稿2020/10/11 12:19

総合スコア34075

2020/10/11 12:51

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

行動規範の内容に同意します

こんばんは。

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

サンプル

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

総合スコア36960

Larkiwing

2020/10/11 12:49

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

行動規範の内容に同意します

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

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>