Question

我正在尝试使用滚动动画（AOS）功能使元素出现。我尝试下载JS和CSS文件并在本地链接它们，尝试使用不同的动画名称，并在图像和div标签上使用了它。

我认为问题出在链接或JS文件中。不幸的是，我不是JS方面的专家。

这是HTML文件

<html>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init();
</script>
<head>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<style>
@font-face {
font-family: myFirstFont;
src: url(TheSansArab.ttf);}

div{
   font-family: myFirstFont; }
html{
direction: rtl;
}
.aa {
 background-image: url("vro background.jpg");
}
</style>

<div style="height:30px; background-color:#174b8d;  color:white; padding-        top: 6px" > 
&nbsp; &nbsp; &nbsp; &nbsp; 
<SCRIPT LANGUAGE="JavaScript" ">
d = new Date( );
var months = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var dd= [" الأحد",  "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة"];
document.write(dd[d.getDay()]+"          |            "+d.getDate()+"   "+months[d.getMonth()]+"    "+d.getFullYear() )
</SCRIPT> 
</div>


 <div class="aa" style="height:800px; padding-top: 6px; color:white"  > 
 <br><br><br><br><br><br>
 <center> <img src="vrologo.png" alt="Vision Realization Office"                style="width:600px;height:251px;"> </center>

 <div  data-aos='slide-right' data-aos-delay='900'  >
<center><img data-aos='slide-right' data-aos-delay='900' src="icons/reports.png"> </center>
 </div>
</div>
<div style="padding-top: 6px;padding-left: 12px;padding-bottom: 6px;   background-color:#5ac0cc; padding-top: 6px; color:white; direction: ltr; text-align: left; font-size:10px" > 
&nbsp; &nbsp; &nbsp; &nbsp; 
© All rights are reserved . 
</div>
   </html>

Javascript在滚动动画中不起作用

0 个答案: