徐々に下からでるフェーイドイン

Question

前提・実現したいこと

お世話になっております
javascriptまたはjquery
で質問です。

初歩的な問題なのですが
テキスト画像を下から順番にフェイドイン
させたいのですが
スクロールすると出てくるパターンはよく
ググるとでてくるんですが、今回はスクロールさせずに
ファーストビューでの動きがなかなか
なくて困っております

ご教示いただけましたら幸いです

試したjqueryですがこれではだめでした
よろしくおねがいします
$(function(){
$('#mv').append(
'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
);
$(window).load(function(){
var delaySpeed = 200;
var fadeSpeed = 1000;
$('.mv_contetns ul li').each(function(i){
$(this).delay(i*(delaySpeed)).animate({opacity:'1',marginTop:'0px'},fadeSpeed);
});
});
});

Answer 1

bounce.js

こんな感じですか？

左のtranselateをクリックするとパラメーターいじれます

Answer 2

/* アニメーションはkeyframeで作っとく。 */
@keyframes fadein {
0% {
opacity: 0;
bottom: -100px;
}
100% {
opacity: 1;
bottom: 400px;
}
}

/* テキストを絶対位置で動かしたいのでrelative指定しとく。firstviewの外でもテキストが見えてていいならoverflow: hidden;は不要*/
#firstview {
position: relative;
overflow: hidden;
}

/*適当に表示したいテキストのサイズを200*100に。まぁ好きなサイズで。
このクラスは最初からテキストにつけておく。画像ならdivを挟んでimgを子要素に、imgのwidth,heightを100%として親要素のdivの値をいじるほうが楽。*/
.textbox {
position: absolute;
height: 100px;
line-height: 100px;
width: 200px;
}

/* 上で作ったアニメーションを呼び出すやつ。js,jqueryでつけてあげればいい。*/
.shown {
animation-name: fadein;
animation-duration: 2.8s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
}

細かい位置の指定もしたくて、そこも方法がわからなければ返答ください

Comments

[ShoutaMiyamoto]

ありがとうございます。

HTMLは以下のようになっておりまして
<li>ようそをフェイドインさせる形でございます
<div id="mv">
<div class="mv_contetns">
<ul>
<li><img src="images/mv01_logo_pc.png" alt="" /></li>
<li><img src="images/mv02_logo_pc.png" alt="" /></li>
<li><img src="images/mv03_logo_pc.png" alt="" /></li>
<li><img src="images/mv04_logo_pc.png" alt="" /></li>
</ul>
</div>
</div>

mv_

[cheche0830]

$("li").hide();
$("li").fadeIn();

とりあえずこれだけfadeInは実装されるので、
あとはsetTimeoutなりでずらすなりすれば
いけるんじゃないでしょうか？

[sansansandodo]

各リスト子要素が同時にフェードインするならこんな感じです。
ずらしたい場合はさらに連ねて回答お願いします

上記の方のように、jqueryのfadeInでも全然いいですが、値をいじりやすいので動きはcssで書いておくほうが楽かもしれません。

実現方法は多くありますが、ロジックとして簡単な（私の偏見です）、「アニメーションするクラスを作っておいて、させたいときにつける」でいきました

ulにidつけたの忘れてたので書き直しました
14:21 hideとhiddenも使っておきました
```
<!-- mvが何かわからなくてid名変えてますが気にしないでください -->
<!-- リスト全部にidつけてますが、getElementById以外のdom取得を扱えるなら不要です -->
<div class="container">
<section id="firstview">
<ul id="content-list-box">
<li id="img1">一個目</li>
<li id="img2">２こめ！</li>
<li id="img3">さんコ目！</li>
<li id="img4">らすとぉ！</li>
</ul>
</section>
</div>
```

```
.container {
width: 1280px;
margin: 0 auto;
}

/* グリッドレイアウトにすることで、各コンテナの位置を基準にできます。そのため、@keyframesは一つだけ書けばよくなります */
#content-list-box {
height: 480px;
list-style-type: none;
width: 400px;
margin: 0 auto;
position: relative;
top: 130px;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
#firstview {
background: skyblue;
width: 100%;
height: 720px;
}
#content-list-box li {
width: 400px;
height: 100px;
line-height: 100px;
background: white;
margin-bottom: 10px;
text-align: center;
position: absolute;
}
#content-list-box li:nth-child(1) {
grid-row: 1 / 2;
}
#content-list-box li:nth-child(2){
grid-row: 2 / 3;
}
#content-list-box li:nth-child(3){
grid-row: 3 / 4;
}
#content-list-box li:nth-child(4){
grid-row: 4 / 5;
}

/* 最初隠したければこのクラスをつけておきます。今回は使ってません。 */
.hide {
display: none;
}
/* 今回使いませんが、フェードアウト用のクラスもセットで作っておきます。*/
.hidden {
display: block;
animation-name: fadeout;
-webkit-animation-name: fadeout;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}

/* フェードイン用のクラスです。これを付けたときから(クラスが変わった時から)、animation-durationの時間をかけてアニメーションします。animation-timing-functionでease-outを指定するとゆっくり終わります。少し待ってから始めてほしい場合はanimation-delayを指定しておきます。-webkit-はchromeで動くようにするやつです（べんだーぷれふぃくす） */
.show {
display: block;
animation-name: fadein;
-webkit-animation-name: fadein;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}

/* showクラスで呼んでいるアニメーションの内容です。0%がアニメーションスタート時点の各値になります。あらかじめposition: absolute;を指定しているので、以下のtopの値はabsoluteになります。 */
@keyframes fadein {
0% {
opacity: 0;
top: 300px;
}
100% {
opacity: 1;
top: 0;
}
}
@keyframes fadeout {
0% {
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: 300px;
}
}
```

```
(function(){
let img1 = document.getElementById('img1');
let img2 = document.getElementById('img2');
let img3 = document.getElementById('img3');
let img4 = document.getElementById('img4');
let Timer0 = 0;
let animcounter = 0;
let imgary = [img1, img2, img3, img4]; //配列で呼ぶほうが好みな場合はこっちで呼んでください

function changeclassname(obj, classname) {
//第一引数のobjにはDOMを渡してください
//第二引数のclassnameには文字列を渡してください。
//第一引数のDOMに第二引数の文字列のクラスをつけます
obj.className = "";
obj.className = classname;
console.log(obj);
return "changed";
}

//onloadで呼んでいるのでページよんだらすぐ始まります。クリックしたときとかちょっと待ちたいとかなら連ねて質問ください
window.onload = function() {
//配列で呼んだほうが好みなら配列のループで呼んでください
changeclassname(img1, "show");
changeclassname(img2, "show");
changeclassname(img3, "show");
changeclassname(img4, "show");
// 同時にフェードインならこれでいいです。ずらしてよびたいなら時間で呼んでいけばいいです。ずらし方わからなければさらに質問重ねてください
console.log("アニメーションしましたよっ");
}
//追記。hideとhiddenも使ってあげないと寂しい感じがするので追記しときますね～。一つ目のリストをクリックすると、奇数回はフェードアウト、偶数回はフェードインします。フェードアウトの後、元の位置に戻ってきてほしくない場合は、displayを指定する位置を変えて、@keyframesの99％まではdisplay: block;、100%ではdisplay: none;とかにするのがわかりやすいロジックです
img1.addEventListener('click',function(){
countnow1++
if(countnow1 % 2 == 1){
changeclassname(img1, "hidden");
}else {
changeclassname(img1, "show");
}
})

//hideもつかってあげよ。二個目のリストを奇数回クリックすると一個目が消えます。偶数回はフェードイン。
img2.addEventListener('click',function(){
countnow2++;
if(countnow2 % 2 == 1){
changeclassname(img1, "hide");
}else {
changeclassname(img1, "show");
}
})
})();
```

Answer 3

とりあえず、
$('#mv').append(
'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
);
をやめて、cssは普通にかいてみたらどうですか？