Skip to content

Commit

Permalink
Vite works
Browse files Browse the repository at this point in the history
  • Loading branch information
@Staijn1
Staijn1 committed Jun 2, 2024
1 parent 9f7ee79 commit e35e216
Show file tree
Hide file tree
Showing 19 changed files with 5,608 additions and 447 deletions.
146 changes: 146 additions & 0 deletions aos/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
body {
font-family: Helvetica,Tahoma;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

.scroll-counter {
position: fixed;
top: 0;
right: 0;
padding: 15px;
color: white;
background-color: rgba(0,0,0,0.4);
}

.aos-all {
width: 1000px;
max-width: 98%;
margin: 50px auto;
}

.aos-item {
display: inline-block;
float: left;
width: 100%;
height: 300px;
padding: 20px;
}

.aos-item::before {
content: attr(data-id);
position: relative;
width: 100%;
height: 100%;
float: left;
background: #1da4e2;
line-height: 260px;
text-align: center;
color: #fff;
}

@media screen and (min-width: 420px) {
.aos-item {
width: 50%;
}
}

@media screen and (min-width: 1024px) {
.aos-item {
width: 33%;
}
}

.aos-anchors__lines {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 2px solid blue;
border-bottom: 2px solid red;
}

.aos-anchors__lines::before {
content: '';
width: 100%;
height: 2px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: green;
}

.aos-anchors__sidebar {
position: fixed;
left: 0;
top: 0;
}

.aos-anchors__sidebar > div {
padding: 5px 10px;
background: #f1f1f1;
}

.aos-anchors__content {
width: 400px;
margin: 50px auto;
}

.aos-anchors__content > div {
position: relative;
width: 100%;
height: 300px;
margin-bottom: 50px;
background: #f1f1f1;
line-height: 300px;
text-align: center;
color: #333;
}

.aos-anchors__content > div::before {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
}

.aos-anchors__content > div::after {
content: attr(data-anchor-id);
position: relative;
background-color: #f1f1f1;
}

.aos-anchors__content > div[data-placement$="-bottom"]::before {
background-color: red;
}

.aos-anchors__content > div[data-placement$="-center"]::before {
background-color: green;
}

.aos-anchors__content > div[data-placement$="-top"]::before {
background-color: blue;
}

.aos-anchors__content > div[data-placement^="top-"]::before {
top: 0;
}

.aos-anchors__content > div[data-placement^="center-"]::before {
top: 0;
bottom: 0;
margin: auto;
}

.aos-anchors__content > div[data-placement^="bottom-"]::before {
bottom: 0;
}
65 changes: 56 additions & 9 deletions aos/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AOS - Animate On Scroll</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css"/>
<title>AOS - Animate On Scroll</title>
</head>
<body>
<div class="js-scroll-counter scroll-counter"></div>
<div class="aos-all">
<div data-id="1" class="aos-item" data-aos="fade-up"></div>
<div data-id="2" class="aos-item" data-aos="fade-down"></div>
<div data-id="3" class="aos-item" data-aos="zoom-out-down"></div>
<div data-id="4" class="aos-item" data-aos="flip-down"></div>
<div data-id="5" class="aos-item" data-aos="flip-up"></div>
<div data-id="6" class="aos-item" data-aos="fade-down"></div>
<div data-id="7" class="aos-item" data-aos="fade-in"></div>
<div data-id="8" class="aos-item" data-aos="fade-down"></div>
<div data-id="9" class="aos-item" data-aos="fade-in"></div>
<div data-id="10" class="aos-item" data-aos="fade-down" data-aos-id="super-duper"></div>
<div data-id="11" class="aos-item" data-aos="fade-up"></div>
<div data-id="12" class="aos-item" data-aos="fade-down"></div>
<div data-id="13" class="aos-item" data-aos="fade-in"></div>
<div data-id="14" class="aos-item" data-aos="fade-up"></div>
<div data-id="15" class="aos-item" data-aos="fade-in"></div>
<div data-id="16" class="aos-item" data-aos="fade-up"></div>
<div data-id="17" class="aos-item" data-aos="fade-down"></div>
<div data-id="18" class="aos-item" data-aos="fade-up"></div>
<div data-id="19" class="aos-item" data-aos="zoom-out"></div>
<div data-id="20" class="aos-item" data-aos="fade-up"></div>
<div data-id="21" class="aos-item" data-aos="zoom-out"></div>
<div data-id="22" class="aos-item" data-aos="fade-in"></div>
<div data-id="23" class="aos-item" data-aos="zoom-out-up"></div>
<div data-id="24" class="aos-item" data-aos="zoom-out-down"></div>
</div>
<script type="module" src="/src/js/aos.js"></script>
<script type="module">
import AOS from '/src/js/aos.js';

document.querySelector('html').classList.remove('no-js');
if (!window.Cypress) {
const scrollCounter = document.querySelector('.js-scroll-counter');

AOS.init({
mirror: true
});

document.addEventListener('aos:in', function (e) {
console.log('in!', e.detail);
});

window.addEventListener('scroll', function () {
scrollCounter.innerHTML = window.pageYOffset;
});
}
</script>
</body>
</html>
Loading

0 comments on commit e35e216

Please sign in to comment.