36 lines
979 B
HTML
36 lines
979 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>AOS - Animate on scroll library</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<link rel="stylesheet" href="../dist/aos.css" />
|
|
</head>
|
|
<body>
|
|
<div id="aos-demo" class="aos-all"></div>
|
|
|
|
<script src="../dist/aos.js"></script>
|
|
<script>
|
|
AOS.init({
|
|
easing: 'ease-in-out-sine'
|
|
});
|
|
|
|
setInterval(addItem, 300);
|
|
|
|
var itemsCounter = 1;
|
|
var container = document.getElementById('aos-demo');
|
|
|
|
function addItem () {
|
|
if (itemsCounter > 42) return;
|
|
var item = document.createElement('div');
|
|
item.classList.add('aos-item');
|
|
item.setAttribute('data-aos', 'fade-up');
|
|
item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
|
|
container.appendChild(item);
|
|
itemsCounter++;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|