Fixed JS
This commit is contained in:
parent
325b94b815
commit
226746d2de
@ -1197,6 +1197,10 @@ section {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/* .cal-card:hover > #community-room {
|
||||
visibility: visible !important;
|
||||
} */
|
||||
|
||||
#fri {
|
||||
background-color: #18b14b65;
|
||||
}
|
||||
@ -1303,6 +1307,7 @@ section {
|
||||
padding: 3px;
|
||||
height: 500px;
|
||||
border: 1px solid white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
@ -1310,15 +1315,26 @@ section {
|
||||
width: 100%;
|
||||
|
||||
border-radius: 10px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#map-iframe {
|
||||
border: 0;
|
||||
/* #community-room {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
margin-top: 3px;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#com-room-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
border-radius: 10px;
|
||||
object-fit: contain;
|
||||
} */
|
||||
|
||||
#rules-description {
|
||||
margin: 10px 20px;
|
||||
|
BIN
img/GL_Community_Room.jpg
Normal file
BIN
img/GL_Community_Room.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
@ -411,6 +411,7 @@
|
||||
</div>
|
||||
<div id="map-container">
|
||||
<div id="map"></div>
|
||||
<!-- <div id="community-room"><img id="com-room-img" src="img/GL_Community_Room.jpg"></div> -->
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
@ -1,3 +1,4 @@
|
||||
// Creating an observer when the user views that element
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
// Loop over the entries
|
||||
entries.forEach(entry => {
|
||||
@ -10,55 +11,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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_img = 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-card-img');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const observer_team_desc = 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-card-desc');
|
||||
}
|
||||
});
|
||||
@ -74,26 +60,13 @@ const observer = new IntersectionObserver(entries => {
|
||||
observer_team_desc.observe(entry);
|
||||
});
|
||||
|
||||
observer.observe(document.querySelector('#description-heading'));
|
||||
observer.observe(document.querySelector('#event-main-box'));
|
||||
observer.observe(document.querySelector('#timeline'));
|
||||
observer.observe(document.querySelector('#signup-title'));
|
||||
observer.observe(document.querySelector('#steps-card'));
|
||||
observer.observe(document.querySelector('#sponsor-title'));
|
||||
observer.observe(document.querySelector('#sponsor-container'));
|
||||
observer.observe(document.querySelector('#map-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('#second-column'));
|
||||
observer.observe(document.querySelector('#first-column'));
|
||||
observer.observe(document.querySelector('#third-column'));
|
||||
|
||||
// Adding the class animations to these elements
|
||||
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-column', '#first-column', '#third-column', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
|
||||
elements_id.forEach(entry => {
|
||||
observer.observe(document.querySelector(entry));
|
||||
});
|
||||
|
||||
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'));
|
||||
observer_prize_3.observe(document.querySelector('#third-place'));
|
Loading…
Reference in New Issue
Block a user