Added animations
This commit is contained in:
parent
a92e915ba3
commit
579723466d
@ -334,6 +334,7 @@ nav li a:focus::after{
|
|||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0px);
|
transform: translateY(0px);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes slidein-2 {
|
@keyframes slidein-2 {
|
||||||
@ -346,6 +347,26 @@ nav li a:focus::after{
|
|||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0px);
|
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 {
|
.prize-desc:hover > .prize-content {
|
||||||
transform: rotate3d(0, 1, 0, 360deg);
|
transform: rotate3d(0, 1, 0, 360deg);
|
||||||
transition: 0.5s;
|
transition: ease-in-out 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prize-laurel {
|
.prize-laurel {
|
||||||
@ -872,15 +893,15 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
|||||||
|
|
||||||
.prize-title {
|
.prize-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: rgb(77, 218, 211);
|
color: rgb(167, 146, 234);
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin-bottom: 45px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prize-content {
|
.prize-content {
|
||||||
color:rgb(129, 218, 126);
|
color:rgb(129, 218, 126);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 20px;
|
height: 25px;
|
||||||
position: absolute;
|
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>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article id="signup-article">
|
||||||
<h2 id="signup-header">Signup Instructions</h2>
|
<h2 id="signup-header">Signup Instructions</h2>
|
||||||
<div id="steps-card">
|
<div id="steps-card">
|
||||||
<div id="signup-container">
|
<div id="signup-container">
|
||||||
@ -471,6 +471,6 @@
|
|||||||
All Rights Reserved
|
All Rights Reserved
|
||||||
</footer>
|
</footer>
|
||||||
<script src="js/scroll_nav.js"></script>
|
<script src="js/scroll_nav.js"></script>
|
||||||
<script src="js/timeline.js"></script>
|
<script src="js/scroll_element.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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