Added animations
This commit is contained in:
parent
a92e915ba3
commit
579723466d
@ -334,6 +334,7 @@ nav li a:focus::after{
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slidein-2 {
|
||||
@ -346,6 +347,26 @@ nav li a:focus::after{
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slidein-side {
|
||||
0% {
|
||||
transform: translateX(-100px);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.slide-animation {
|
||||
animation: slidein-side ease 1s;
|
||||
}
|
||||
}
|
||||
|
||||
@ -861,7 +882,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
||||
|
||||
.prize-desc:hover > .prize-content {
|
||||
transform: rotate3d(0, 1, 0, 360deg);
|
||||
transition: 0.5s;
|
||||
transition: ease-in-out 0.5s;
|
||||
}
|
||||
|
||||
.prize-laurel {
|
||||
@ -872,15 +893,15 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
||||
|
||||
.prize-title {
|
||||
position: absolute;
|
||||
color: rgb(77, 218, 211);
|
||||
color: rgb(167, 146, 234);
|
||||
font-size: 25px;
|
||||
margin-bottom: 45px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.prize-content {
|
||||
color:rgb(129, 218, 126);
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
BIN
img/.DS_Store
vendored
Normal file
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
@ -185,7 +185,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<article id="signup-article">
|
||||
<h2 id="signup-header">Signup Instructions</h2>
|
||||
<div id="steps-card">
|
||||
<div id="signup-container">
|
||||
@ -471,6 +471,6 @@
|
||||
All Rights Reserved
|
||||
</footer>
|
||||
<script src="js/scroll_nav.js"></script>
|
||||
<script src="js/timeline.js"></script>
|
||||
<script src="js/scroll_element.js"></script>
|
||||
</body>
|
||||
</html>
|
20
js/scroll_element.js
Normal file
20
js/scroll_element.js
Normal file
@ -0,0 +1,20 @@
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
// Loop over the entries
|
||||
entries.forEach(entry => {
|
||||
// If the element is visible
|
||||
if (entry.isIntersecting) {
|
||||
// Add the animation class
|
||||
entry.target.classList.add('slide-animation');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.querySelector('#event-main-box'));
|
||||
observer.observe(document.querySelector('#timeline'));
|
||||
observer.observe(document.querySelector('#signup-article'));
|
||||
observer.observe(document.querySelector('#rules-description'));
|
||||
observer.observe(document.querySelector('#guidelines'));
|
||||
observer.observe(document.querySelector('#code-of-conduct'));
|
||||
observer.observe(document.querySelector('#photo-release-container'));
|
||||
observer.observe(document.querySelector('#prizes-container'));
|
||||
observer.observe(document.querySelector('#team-container'));
|
Loading…
Reference in New Issue
Block a user