wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added animations

Browse Source
This commit is contained in:
James Dinh 2022-06-03 15:38:07 -07:00
parent 3ff769e0ef
commit a8da4bea84
3 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/general.css
View File

@ -363,12 +363,66 @@ nav li a:focus::after{
opacity: 1;
}
}
@keyframes slidein-prize-2 {
0% {
transform: translateX(-150px);
opacity: 0;
}
40% {
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slidein-prize-1 {
0% {
transform: translateY(-100px);
opacity: 0;
}
40% {
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slidein-prize-3 {
0% {
transform: translateX(300px);
opacity: 0;
}
60% {
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation {
animation: slidein-side ease 1s;
}
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-2 {
animation: slidein-prize-2 ease 3s;
}
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-1 {
animation: slidein-prize-1 ease 2s;
}
}
@media (prefers-reduced-motion: no-preference) {
.slide-animation-prize-3 {
animation: slidein-prize-3 ease 3s;
}
}
/* Main Section */
main {

17
index.html
View File

@ -193,6 +193,7 @@
<div class="outer">
<div class="card">
<div class="info">
<!-- Checklist src: https://codepen.io/milanraring/pen/QWbqBGo -->
<div id="checklist">
<input id="01" type="checkbox" name="r" value="1">
<label for="01">
@ -371,7 +372,7 @@
<div id="prizes-container">
<article id="second-column">
<div class="podium-description">
<div class="prize-desc">
<div class="prize-desc" id="second-place">
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
<div class="prize-title">2nd</div>
<div class="prize-content">$300</div>
@ -382,7 +383,7 @@
</article>
<article id="first-column">
<div class="podium-description">
<div class="prize-desc">
<div class="prize-desc" id="first-place">
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
<div class="prize-title">1st</div>
<div class="prize-content">$400</div>
@ -397,7 +398,7 @@
</article>
<article id="third-column">
<div class="podium-description">
<div class="prize-desc">
<div class="prize-desc" id="third-place">
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
<div class="prize-title">3rd</div>
<div class="prize-content">$200</div>
@ -412,7 +413,7 @@
<h2 class="topic">Hackathon Team</h2>
<hr class="line">
<div id="team-container">
<article>
<article id="administration">
<h3 class="team-title">Administration</h3>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@ -423,7 +424,7 @@
</div>
</div>
</article>
<article>
<article id="logistics">
<h3 class="team-title">Logistics</h3>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@ -434,7 +435,7 @@
</div>
</div>
</article>
<article>
<article id="outreach">
<h3 class="team-title">Outreach</h3>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@ -445,7 +446,7 @@
</div>
</div>
</article>
<article>
<article id="tech">
<h3 class="team-title">Tech</h3>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@ -472,7 +473,7 @@
</div>
</div>
</article>
<article>
<article id="marketing">
<h3 class="team-title">Marketing</h3>
<div class="team-entry">
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>

46
js/scroll_element.js
View File

@ -8,7 +8,40 @@ const observer = new IntersectionObserver(entries => {
}
});
});
const observer_prize_2 = 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-prize-2');
}
});
});
const observer_prize_1 = 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-prize-1');
}
});
});
const observer_prize_3 = 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-prize-3');
}
});
});
observer.observe(document.querySelector('#description-heading'));
observer.observe(document.querySelector('#event-main-box'));
observer.observe(document.querySelector('#timeline'));
@ -17,5 +50,14 @@ const observer = new IntersectionObserver(entries => {
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'));
observer.observe(document.querySelector('#second-column'));
observer.observe(document.querySelector('#first-column'));
observer.observe(document.querySelector('#third-column'));
observer_prize_2.observe(document.querySelector('#second-place'));
observer_prize_1.observe(document.querySelector('#first-place'));
observer_prize_3.observe(document.querySelector('#third-place'));
observer.observe(document.querySelector('#administration'));
observer.observe(document.querySelector('#logistics'));
observer.observe(document.querySelector('#outreach'));
observer.observe(document.querySelector('#tech'));
observer.observe(document.querySelector('#marketing'));