0

Justin Aguilar のサイトの指示に従って、CSS アニメーションを自分の Web サイトに追加しました。よくまとめられていて、かなり簡単に見えます。しかし、入り口のアニメーションをトリガーする際に大きな問題が発生しました。

これにかなり慣れていないので、この質問が完全にばかげている可能性があることは理解していますが、ここ数日間いじっていましたが、成功していません。

入り口を作成するために、要素の可視性は最初は「非表示」に設定されています。次に、javascript は、要素を表示してアニメーション化する .pullUp クラスを追加することにより、アニメーションをトリガーすることになっています。これは非常に単純に思えますが、ページが読み込まれるか、非表示のままになるとすぐに、すべての要素がアニメーション化を開始します。

私は本当にいくつかの助けを使うことができました。JFiddle のコードへのリンクを次に示します。 

   <img src="img/apple.png" id="apple" class="pullUp" /> 

   <script= "text/css">

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp; 

    animation-duration: 1.1s;   
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;             
    }
</script>

<script>

$(window).scroll(function() {
  $('#apple').each(function(){
  var imagePos = $(this).offset().top;

  var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+150) {
      $(this).addClass(".pullUp");
    }
  });
</script>

基本的に、画像がスクロールされたときに画像が表示されてアニメーション化される必要があります。

私のサイトのブートストラップ フレームワークが問題の原因である可能性がありますが、その理由がわかりません。また、私は外部スタイル シートを使用しており、便宜上すべてのコードをここに含めていることも知っておいてください。洞察や助けをいただければ幸いです。

4

2 に答える 2

0

私はあなたのJSFiddleをフォークしました

  1. });コード ブロックの最後に行方不明がありました。そのため、jQuery は機能していませんでした。
  2. 画像にはpullUp既にクラスが追加されているため、アニメーションはすぐに開始されました。
于 2013-11-15T02:54:35.220 に答える