如何在CSS中正確計時影片？-有解無憂

我計劃建立一個網站，但我似乎沒有找到任何方法來計時影片。這是一個例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image {
        animation-name: appear;
        animation-duration: 5s;
      }
      
      .extremebig {
        font-size: 200px;
      }
      
      @keyframes appear {
        0% {opacity: 0;}
        100% {opacity: 1.0;}
      }
    </style>
  </head>
  <body>
    <p class="extremebig">hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
  </body>
</html>

我對時間的想法是，蘋果只有在網站訪問者可見時才開始出現。你們有什么想法嗎？

uj5u.com熱心網友回復：

您可以使用 CSS animation-delay。下面的代碼應該可以作業。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image {
        animation-name: appear;
        animation-duration: 5s;
        animation-delay: /* However long you want the delay to be */;
      }
      
      .extremebig {
        font-size: 200px;
      }
      
      @keyframes appear {
        0% {opacity: 0;}
        100% {opacity: 1.0;}
      }
    </style>
  </head>
  <body>
    <p class="extremebig">hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
  </body>
</html>

uj5u.com熱心網友回復：

下面的代碼應該可以作業：

function reveal() {
  var reveals = document.querySelectorAll(".image");

  for (var i = 0; i < reveals.length; i  ) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

如果這不起作用，請告訴我，我會嘗試為您提供更多幫助。:)

來源

uj5u.com熱心網友回復：

對于那種特定情況，您需要確定用戶是否滾動到您放置蘋果的區域，如果他這樣做了，您可以將類添加到元素以顯示它。當您向元素添加類時，影片將自動啟動。

uj5u.com熱心網友回復：

我認為您正在嘗試實作以下目標：https ://codepen.io/tateishi-e/pen/xaEJxw

function Utils() {}
        Utils.prototype = {
            constructor: Utils,
            isElementInView: function (element, fullyInView) {
                var pageTop = $(window).scrollTop();
                var pageBottom = pageTop   $(window).height();
                var elementTop = $(element).offset().top;
                var elementBottom = elementTop   $(element).height();

                if (fullyInView === true) {
                    return ((pageTop < elementTop) && (pageBottom > elementBottom));
                } else {
                    return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
                }
            }
        };

        var Utils = new Utils();
        $(window).on('load', addFadeIn());
        
        $(window).scroll(function() {
            addFadeIn(true);
        });

function addFadeIn(repeat) {
            var classToFadeIn = ".will-fadeIn";
            
            $(classToFadeIn).each(function( index ) {
                var isElementInView = Utils.isElementInView($(this), false);
                if (isElementInView) {
                    if(!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
                        if(index % 2 == 0) $(this).addClass('fadeInRight');
                        else $(this).addClass('fadeInLeft');
                    }
                } else if(repeat) {
                    $(this).removeClass('fadeInRight');
                    $(this).removeClass('fadeInLeft');
                }
            });
        }

您可以使用他的函式來檢查元素是否對視口可見。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463268.html

標籤：javascript html css CSS动画视口

上一篇：React：用于從FirebaseFirestore資料庫中匯出資料的按鈕

下一篇：洗掉陣列A中存在于陣列B中的所有元素，而不使用雙回圈