4

BXslider.jsを使用して全画面画像スライダー付きのホームページを作成しました。スライダー内のすべての画像には、アンカー リンク付きのキャプション テキストがあります。アンカー リンクをクリックすると、1 つの詳細ページに移動します。ホームから詳細ページに移動すると遷移が表示されます。これは基本的にjquery.smoothstate.jsページのデモと同じです。

jquery.smoothstate javascript をインクルードした後、BXslider が壊れます。BXslider の前または次の矢印ボタンを押すたびに、スライダー自体が上書きされ、前/次のボタンが複製され、画像が消えます。firebug では、警告やエラーは発生しません。これにより、デバッグが困難になります。うまくいけば、誰かがこの問題で私を助けてくれます。

前もって感謝します！

以下に、私の bxslider.js/smootstate Web サイト用に書いたコードを示します。

ホームページのコード

        <div id="main" class="m-scene">
            <div class="scene-element scene-element--fadeinup">
            <section id="banner">
                <div class="inner">

                    <div id="box">
                        <div class="relative-box">
                            <div class="logo"></div>
                            <h2>Client-name</h2>
                            <div id="captions">
                                <p>&#34; This is a caption &#34;</p>
                            </div>
                        </div>
                        <a href="/generic.html" class="more">To genericpage</a>
                    </div>

                    <ul class="bxslider">
                      <li style="background-image: url('/images/pic1.jpg');"></li>
                      <li style="background-image: url('/images/pic2.jpg');"></li>
                      <li style="background-image: url('/images/pic3');"></li>
                      <li style="background-image: url('/images/pic4.jpg');"></li>
                      <li style="background-image: url('/images/pic5.jpg');"></li>
                    </ul>

                </div>

            </section>
        </div>
    </div>
   </div>

一般的な html/css セレクター

jquery.smootstate.js に一般的な html/selector を使用しています。以下の html は、ホームと詳細ページで同じです。

  <div id="main" class="m-scene">
        <div class="scene-element scene-element--fadeinup">

css3 トランジション

css3 ページ アニメーションには、scene-element と scene-element--fadeinup セレクターが使用されます。

@keyframes fadeInUp{
    0%{opacity:0; transform:translate3d(0,100%,0);}
    100%{opacity:1;transform:none;}
}

.m-scene .scene-element{
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animtation-fill-mode: both;
}

.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}

.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}

jquery.smoothstate.js の JavaScript

        (function($) {
          'use strict';
          var $body = $('html, body'),
              content = $('#smooth').smoothState({
                // Runs when a link has been activated
                onStart: {
                  duration: 250, // Duration of our animation
                  render: function (url, $container) {
                    // toggleAnimationClass() is a public method
                    // for restarting css animations with a class
                    content.toggleAnimationClass('is-exiting');
                    // Scroll user to the top
                    $body.animate({
                      scrollTop: 0
                    });
                  }
                }
              }).data('smoothState');
              //.data('smoothState') makes public methods available
        })(jQuery);
4

1 に答える 1

1

私の過ちから学ぶ

1. jquery.smoothstate で名前空間を DIY しないでください

私はコンテナ#smoothの代わりに使用しました。私のjquery関数はjquery.smoothstateを呼び出そうとしていましたが、jquery.smoothstate.jsライブラリで識別子として使用されているため機能しません。#main<div>#main

2.すべてのリンクをスムーズステートの一部にする代わりにアンカーを定義する

上記の間違いを修正した後、別の問題が発生しました。ソースで bxslider を使用しています。BXslider で次へまたは前への矢印を押すたびに、スライダーの新しい複製が元のスライダーの上に表示されます。

オプションアンカーを定義することでこれを修正しました。これは jquery.smoothstate の一部です。これにより、他のすべてのアンカーが除外されます。

3.toggleAnimationClass は非推奨です

toggleAnimationClass functioncall restartCSSAnimations(); の代わりに使用します。

addClass() で一時クラス「is-exited」を追加

これは完全な作業ソースです:

    (function($) {

      'use strict';

          content = $('#main').smoothState({
            // Runs when a link has been activated
            prefetch: true,
            pageCacheSize: 4,
            anchors: 'link',
            onStart: {
              duration: 250, // Duration of our animation
              render: function (url, $container) {

                //add temporary class #main
                $('#main').addClass('is-exited');

                // for restarting css animations with a class
                content.restartCSSAnimations();

              }
            }
          }).data('smoothState');
    })(jQuery);
于 2015-10-15T11:46:38.817 に答える