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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

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

  • jQuery

    6674questions

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

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

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 423

 前提・実現したいこと

お世話になっております
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);
});
});
});

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

/* アニメーションは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;
}

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/12 19:52

    ありがとうございます。

    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_

    キャンセル

  • 2018/07/13 01:09

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

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

    キャンセル

  • 2018/07/13 12:05 編集

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

    上記の方のように、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">2こめ!</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");
    }
    })
    })();
    ```

    キャンセル

0

bounce.js

こんな感じですか?

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    16348questions

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

  • jQuery

    6674questions

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