2

現在、ブートストラップ 3、waypoint.js、および skrollr.js で animate.css を使用しようとしています。下にスクロールして 2 つの特定の div (「機能ボックス」のクラスを持つ) が表示されると、2 つの div は「ぐらつき」効果を使用してアニメーション化されます。

Chrome と FF では見栄えがよくても、アニメーションは Safari では発生せず、iOS デバイスでも同じことが起こります。理由はありますか？私はjquery/jsがあまり得意ではないので、競合があるのではないかと考えています。

オンラインでいくつかの調査を行いましたが、まだ手がかりが見つかりません。また、HTML の最後にある特定の js ファイルを削除しようとしましたが、結果は同じです。

これが私のコードです...

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Test using Bootstrap, Animate.css, Skrollr.js, and Waypoint.js</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body id="skrollr-body">

    <div id="bg1" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
          <div class="col-lg-4"><p>Row 1, Col 1</p></div>
          <div class="col-lg-4"><p>Row 1, Col 2</p></div>
          <div class="col-lg-4"><p>Row 1, Col 3</p></div>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg3" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
         <div class="feature-box">
            Animate This Box
          </div>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg2" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -25000px;">
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus neque vel massa mattis, aliquam lacinia nunc molestie. Donec augue elit, scelerisque quis arcu ac, varius dictum turpis.</p>
        </div>
      </div>
    </div>
    <div id="bg3" class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
      <div class="container">
        <div class="row">
         <div class="feature-box">
            Animate This Box
          </div>
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/skrollr.min.js"></script>
    <script src="js/waypoint.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

メイン.css

body {
    margin: 0;
    height: 100%!important;
}

.bg {
    padding: 30px;
}

#bg1 {
    background: url('http://www.hostpaperz.com/wp-content/uploads/2013/04/rainbow-colorful-nature-hd.jpg') center center no-repeat;
}

#bg2 {
    background: url('http://www.miglo.net/walls/nature-pack-photos-wide.jpg') center center no-repeat;
}

#bg3 {
    background: url('http://wall-height.com/wp-content/uploads/2013/05/Our-Surrendered-Nature-Wallpaper.jpg') center center no-repeat;
}

.feature-box {
background-color: #ecf0f5;
border-radius: 6px;
padding: 14px;
position: relative;
text-align: center;
}

.animated {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

メイン.js

skrollr.init();

var $letsMove = $('.feature-box');

$letsMove.waypoint(function(direction) {
  if (direction === 'down') {
    $(this).addClass('animated wobble');
  }
}, { offset: 'bottom-in-view' });

$letsMove.waypoint(function(direction) {
  if (direction === 'down') {
    $(this).removeClass('animated wobble');
  }
}, { offset: '105%' });

$letsMove.waypoint(function(direction) {
  if (direction === 'up') {
    $(this).addClass('animated wobble');
  }
}, { offset: '0%' });

$letsMove.waypoint(function(direction) {
  if (direction === 'up') {
    $(this).removeClass('animated wobble');
  }
}, { offset: '-5%' });

洞察力に感謝！

4

0 に答える 0