繰り返し無限に移動(スライド)するアニメーションを設定したい

フォーラム 使い方全般 繰り返し無限に移動(スライド)するアニメーションを設定したい

  • このトピックには3件の返信、2人の参加者があり、最後にhsasakiにより4年、 11ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #87520
    appletea
    参加者

    ——————————————-
    WordPress のバージョン:WordPress 5.1.1
    Welcart のバージョン:Version 1.9.17.190305
    ご利用のテーマ:Welcart Basic
    症状を確認したブラウザ:IE11
    サーバー(会社名、サービス名):ロリポップ
    ——————————————–

    1518pxの幅で写真3枚を繰り返し無限に移動(スライド)するアニメーションを設定したいのです。
    写真の横幅は200pxが良いです。
    以下のどこを変更したらよいのでしょうか。
    よろしくお願いいたします。

    <!– wp:html –>
     

    <style>
    #wrapper {
    padding: 50px 0;
    background: #fff;
    text-align: center; }

    h2 + div {
    margin-bottom: 80px;
    }

    .loop_css2 {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
    }

    .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
    }

    .loop_css2 li {
    display: inline-block;
    width: calc(100vw / 4);
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
    }

    .loop_css2 li a {
    display: block;
    }

    .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
    }

    .loop_css2 li a:hover {
    opacity: .7;
    }

    .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    }

    .loop_css2 ul + ul {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
    }

    .loop_css2:hover ul {
    animation-play-state: paused;
    }

    @-webkit-keyframes loop {
    0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    }
    to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    }
    }

    @keyframes loop {
    0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    }
    to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    }
    }

    @-webkit-keyframes loop2 {
    0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    }
    to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
    }
    }

    @keyframes loop2 {
    0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    }
    to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
    }
    }

    </style>

    <!– ///wrapper –><!– script –>
    <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script> <script defer src=”TweenMax.min.js”></script> <script>
    $(function () {
    var loop = document.getElementById(‘loop_js’),
    loopAnim = new TimelineMax({
    repeat: -1
    }),
    loopItem = (window.innerWidth, loop.children[0]);

    loop.appendChild(loopItem.cloneNode(true)), loop.appendChild(loopItem.cloneNode(true)),
    loopAnim.to(loop, 50, {
    ease: Power0.easeNone,
    xPercent: -66.66666
    }).to(loop, 0, {
    ease: Power0.easeNone,
    x: 0
    })
    });
    </script>

    <!– /wp:html –>

    <!– wp:image –>
    <figure class=”wp-block-image”></figure>
    <!– /wp:image –>

    #87522
    hsasaki
    キーマスター

    ご利用のテーマに Welcart Basic をお使いとのことですが、
    Welcart Basic に無いスタイル、スクリプトを書かれております。
    よって、
    こちらでは返答しかねます。
    また、
    Welcart Basic は親テーマになりますので、
    基本的に親テーマを直接触りますと、
    バージョンアップ時に上書きされ、
    カスタマイズした場所が削除されます。
    テーマを改修する場合は子テーマで作られた方が良いかと思います。

    上記内容はカスタマイズとなりますので、
    お問い合わせよりご相談または見積依頼をお願いいたします。

    #87528
    appletea
    参加者

    こちらは子テーマではなく、固定ページの該当ページに貼り付けており、CCS等には記載していません。
    こちらは勧誘のページではございませんので

    1518pxの幅で写真3枚を繰り返し無限に移動(スライド)するアニメーションを設定したいのです。
    写真の横幅は200pxが良いです。

    のご指導を賜れる方、よろしくお願いします。

    #87531
    hsasaki
    キーマスター

    テーマに関係なく、WordPressの固定ページに貼り付けたいと言うことでしたら、
    こちらで聞かれた方が良いかもしれません。
    Wordpress 日本語フォーラム
    https://ja.wordpress.org/support/

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。