在JavaScript中觸發CSS動畫

我不知道如何使用JQuery，所以我需要一種只能使用JavaScript觸發動畫的方法。我需要在用戶滾動頁面時調用/觸發CSS動畫。請幫我解決這個問題。在JavaScript中觸發CSS動畫

<html> 

<head> 
    <style> 

     * 
     { 
      margin:0px; 
     } 
     #logo 
     { 
      position:fixed; 
      top:200px; 
      height:200px; 
      width:1000px; 
      left:5%; 
      z-index:4; 


      opacity:0.8; 
     } 
     #earthlogo 
     { 
      position: fixed; 
      top:200px; 
      height:120px; 
      align-self: center; 
      left:5%; 
      margin-left: 870px; 
      margin-top: 60px; 
      z-index:4; 


      opacity: 0.9; 
     } 
     @keyframes anim 
     { 
      50% 
      { 
       filter:blur(10px); 
       transform: rotate(-15deg); 
       box-shadow:0px 0px 10px 3px; 
      } 
      100% 
      { 
       height:100px; 
       width:500px; 
       left:10px; 
       top:10px; 
       box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7); 
       background-color: rgba(0, 0, 1, 0.3); 
       opacity: 0.7; 
      } 
     } 

     @keyframes anim2 
     { 
       50% 
      { 
       filter:blur(40px); 
       transform: rotate(-15deg); 
      } 
      100% 
      { 
       height:60px; 
       width:60px; 
       left:10px; 
       top:10px; 
       margin-left: 435px; 
       margin-top: 30px; 
       opacity: 0.8; 
      } 
     } 
     body 
     { 
      height: 2000px; 
     } 
     #backstar 
     { 
      position:fixed; 
      width: 100%; 
      z-index: 1; 
     } 
     #earth 
     { 
      position: absolute; 
      width:100%; 
      z-index: 2; 
      top: 300px; 
     } 
    </style> 
    <script> 
     function start() 
     { 
      document.getElementById('logo').style.animation = "anim 2s 2s forward"; 
      document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward"; 
     }

</head> 

<body> 

    <img src="logo.png" id="logo" onclick="start();"> 
    <img src="earthlogo.gif" id="earthlogo" onscroll="start();"> 
    <img src="earth.png" id="earth"> 
    <img src="stars.jpg" id="backstar"> 

</body>

來源

2017-06-30 Siddharth Kurnal

'onscroll'在圖像上是沒有意義的。 –

搜索如何攔截滾動甚至與jQuery的頁面以及如何添加一個類。漂亮的基本問題伴侶做一些研究。 – user5014677

最簡單的方法來觸發CSS動畫是添加或移除類 - 如何使用純JavaScript做到這一點，你可以在這裏閱讀：

How do I add a class to a given element?

如果你使用jQuery（它應該很容易學習基本用法），你可以簡單地使用addClass/removeClass。

所有您需要做的就是設置一個過渡到這樣一個給定的元素：

.el { 
width:10px; 
transition: all 2s; 
}

，然後改變其狀態，如果該元素有一個類：

.el.addedclass { 
width:20px; 
}

注：此例如與過渡。但對於動畫來說，它也是一樣的：只需在其上有類的元素上添加動畫即可。

類似的問題在這裏：Trigger a CSS keyframe animation via scroll

來源

2017-06-30 12:44:11 Blackbam

document.getElementById('logo').classList.add("anim"); 
document.getElementById('earthlogo').classList.add("anim2");

來源

2017-06-30 12:41:43 dsb

這可能是一個正確的答案，但對於解決方案的不同或者解釋的一些細節將服務於OP以及將來的SO用戶尋找答案，以教他們什麼。 –

你可以使用CSS來隱藏圖像/動畫顯示當用戶滾動。這將這樣的工作：

CSS：

div { 
    border: 1px solid black; 
    width: 200px; 
    height: 100px; 
    overflow: scroll; 
} 

#demo{ 
    display: none; 
}

HTML：

<div id="myDIV"> </div> 

<div id="demo"> 
    <img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me"> 
</div>

您的JavaScript只是需要包括事件監聽呼叫觸發動畫的顯示功能。

JS：

document.getElementById("myDIV").addEventListener("scroll", start); 

function start() { 
    document.getElementById('demo').style.display='block'; 
}

來源

2017-06-30 13:00:46 galtech

在JavaScript中觸發CSS動畫

回答

相關問題