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

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

ただいまの
回答率

90.51%

  • jQuery

    7742questions

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

  • CSS3

    2464questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

フェードでスライドと中の画像を横移動の方法

受付中

回答 2

投稿

flag 質問者が1日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 3
  • VIEW 91

sakio6

score 27

前提・実現したいこと

お世話になります。

下記参考サイトをchoromeのデベロッパーツールでスマホ表示もしくは、
スマホ実機でご確認いただきますと、背景画像が横にスライドしながら画像
全体が見えるような動きをしており、その後フェードで画像が切り替わる動きを
実装したいと考えております。
※背景画像手前のロゴや文字部分などは今回含まれません。

また、参考サイトとは違い、フェードの切り替えをします要素が1ページに複数あり、横並びに並んでいる状態です。

■参考サイト
https://hoshinoya.com/

基本のソースコード

<ul class="SlideArea">

    <li>
        <div class="imgBox">
            <ul class="slide-res">
                <li><img src="img/beginningImg_01.jpg"></li>
                <li><img src="img/beginningImg_02.jpg"></li>
                <li><img src="img/beginningImg_03.jpg"></li>
            </ul>
        </div>
    </li>

    <li>
        <div class="imgBox">
            <ul class="slide-res">
                <li><img src="img/beginningImg_04.jpg"></li>
                <li><img src="img/beginningImg_05.jpg"></li>
                <li><img src="img/beginningImg_06.jpg"></li>
            </ul>
        </div>
    </li>

    <li>
        <div class="imgBox">
            <ul class="slide-res">
                <li><img src="img/beginningImg_07.jpg"></li>
                <li><img src="img/beginningImg_08.jpg"></li>
                <li><img src="img/beginningImg_09.jpg"></li>
            </ul>
        </div>
    </li>

</ul>
.SlideArea {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.SlideArea > li {
    width: 32%;
    margin-bottom: 30px;
}

.imgBox li {
    overflow: hidden;
}

.imgBox img {
    max-width: 120%;
    position: relative;
}
$(function() {
    $('.slide-res').slick({
        autoplay:true,
        autoplaySpeed:5000,
        fade:true,
        speed:2000,
        arrows:false,

    });
});

試したこと

■フェードの画像切り替え
「slick.js」を使用して、フェードの切り替えを実装しました。

■画像単体の横スライド

  1. css3のanimationを使い横にスライドするように指定をしました。
  2. 上記で不具合があった為、「slick.js」のイベントを使い横スライドを試みました。

試したソースコード

css3のanimationを使用

@keyframes slide {
    0% {
        transform: translateX(0px);
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }

    100% {
        transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        -ms-transform: translateX(-50px);    
    }
}

.slick-active img {
    animation-name: slide;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    position: relative;
}


「slick.js」のイベントを使用

$(function() {
    $('.slide-res').slick({
        autoplay:true,
        autoplaySpeed:5000,
        fade:true,
        speed:2000,
        arrows:false,

    });

    $('.slide-res').on('beforeChange',function(){
        $('.slide-res li img').animate({left: '0px'}, 500, 'linear');
    }); 

    $('.slide-res').on('afterChange',function(){
        $('.slide-res li img').animate({left: '-25px'}, 1500, 'linear');
    });

});

発生している問題・エラーメッセージ

■css3を使用した際の不具合

  1. IE、FireFoxで画像単体のスライドがカクつきスムーズな動きではありませんでした。
  2. スライド表示されている要素に「slick.js」によって付与されるクラスが付いたら画像単体のスライドが始まるようにした為、フェード切り替え時にクラスがハズレ、
    画像単体のスライドが元の状態に戻るためフェード切り替えの度にガクッと動いていました。

■「slick.js」のイベントを使った際の不具合

  1. IE、FireFoxで画像単体のスライドがカクつきスムーズな動きではありませんでした。
  2. イベントにスライドが移動する前beforeChange
    スライドが完了した後afterChangeがありましたので、jQueryのanimateを使って、画像単体のスライドを試みましたが、フェード切り替えが行われた時点でイベントが発生しますので、css3の時と同様に画像単体のスライドが元の位置に戻って、フェード切り替えが行われており、フェード切り替え時にガクッとした動きが出てしまいました。

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

css3も「slick.js」も基本同じ不具合が出ております。
参考サイトと同じ方法で出来れば一番良いのですが、何を使用しているのかソースを拝見しても理解が出来ず今回の方法で対応を試みましたがうまく行かない状況です。

希望としましては、参考サイトと同じ方法での実装をしたいと思いますが、その他方法でも問題御座いません。
ご面倒では御座いますが、是非お力添えを頂けますと幸いでございます。
宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

0

IEを視野に入れているならjQuery1.12とui1.12で試してみてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

uiの有効性

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
  $('#d1').animate({'background-Color':'green'},1000);
  $('#d2').hide().show("slide", {direction: "left"},1000);
});
</script>
<div id="d1" style="background-Color:red;width:100px;height:100px">hoge</div>
<div id="d2" style="background-Color:yellow;width:100px;height:100px">fuga</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/07 13:45

    yambejp様
    ご回答頂きありがとうございます。
    jQuery UIは、画像単体のスライド実装の為に使用するのでしょうか?
    jQuery UIを使用した事が無いためどの部分の為にjQuery UIを導入するのか検討が付きません。
    無知で大変申し訳ございませんが、ご教示頂けますと幸いです。
    宜しくお願い致します。

    キャンセル

  • 2019/03/07 14:07 編集

    > どの部分の為にjQuery UIを導入するのか

    横方向のスライドとか、数値以外の変化とかに有効です

    キャンセル

  • 2019/03/07 14:18

    ありがとうございます。
    jQuery UIについて調べてみたいと思います。

    キャンセル

0

1.に関してだけですが、cssアニメーションは0%と100%以外に途中の段階も書き込んでおくと動きがスムーズになることがありますのでお試しください。

@keyframes slide {
    0% {
        transform: translateX(0px);
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }

    50% {
        transform: translateX(-25px);
        -moz-transform: translateX(-25px);
        -webkit-transform: translateX(-25px);
        -o-transform: translateX(-25px);
        -ms-transform: translateX(-25px);
    }

    100% {
        transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        -ms-transform: translateX(-50px);    
    }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/14 11:07

    cerfweb様
    ご回答頂きありがとうございます。

    実は、こちらでご質問させて頂いた後、色々調べて、cerfweb様がご回答されたように細かく段階を分けてみたのですが、FireFoxでのカクつきが直りませんでした。
    IEは多少スムーズになった印象でした。
    ちなみに、試した際は上記よりもう少し細かくして、0%、25%、50%、75%、100%で段階を分けました。
    その旨の追記が出来ておらずお手数おかけしました。

    キャンセル

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

  • jQuery

    7742questions

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

  • CSS3

    2464questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。