Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intelligent navbar, space before about section, and particlesJS #25

Merged
merged 7 commits into from
Oct 15, 2023
Merged

Intelligent navbar, space before about section, and particlesJS #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6fe806b
Move JavaScript to its own file
cszach Oct 15, 2023
930efb9
Smart navbar
cszach Oct 15, 2023
cd19a58
Merge pull request #23 from UR-dandyhacks/feature/sticky-navbar
cszach Oct 15, 2023
1234209
Leaves some space before the About section header when scroll to
cszach Oct 15, 2023
601bc9d
Add particles.js config
cszach Oct 15, 2023
b6d7df7
Integrate particles.js into the FAQ and sponsoring sections
cszach Oct 15, 2023
b2d2551
Merge pull request #24 from UR-dandyhacks/feature/particles-fireflies
cszach Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions assets/particlesjs-config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 50,
"density": {
"enable": true,
"value_area": 500
}
},
"color": {
"value": "#fed936"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": true
}
},
"size": {
"value": 8,
"random": true,
"anim": {
"enable": true,
"speed": 4.794898228285104,
"size_min": 0.1,
"sync": true
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
25 changes: 9 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
</head>

<body class="font-sans text-lavender bg-deep-purple">
<nav class="absolute flex flex-row items-center justify-between flex-none w-full px-5 py-5 lg:px-12 bg-deep-purple">
<nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
<div>
<input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
<img class="lg:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-10 flex flex-col h-full pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<li class="text-right"><a href="#about">About</a></li>
<li class="text-right"><a href="#faq">FAQ</a></li>
<li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
Expand Down Expand Up @@ -49,7 +49,8 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
</div>
</div>
</div>
<div id="about" class="flex flex-row items-center justify-center bg-violet gap-[77px]">
<div class="flex flex-row items-center justify-center bg-violet gap-[77px]">
<div id="about" class="absolute bottom-16 lg:bottom-[150px]"></div>
<img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
<div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
<h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
Expand All @@ -70,12 +71,12 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
</p>
</div>
</div>
<img class="hidden lg:block lg:relative b-[150px]" src="img/sticker1.png" />
<img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
</div>
<div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
<div id="faq" class="relative px-5">
<div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
<h2 class="text-5xl">FAQS</h2>
<div class="flex flex-col px-10 py-4 lg:py-0 gap-5 lg:px-0">
<div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
<details>
<summary>
What is a hackathon?
Expand Down Expand Up @@ -212,16 +213,8 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
<span>© 2023 DandyHacks</span>
</div>
</footer>
<script>
let navigationLinks = document.querySelectorAll('nav li');
let hamburgerCheckbox = document.querySelector('nav .peer');

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', e => {
hamburgerCheckbox.checked = false;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script src="script.js"></script>
</body>

</html>
16 changes: 14 additions & 2 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,26 @@

@layer utilities {
details {
@apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4;
@apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4 pointer-events-auto;
}

details summary {
@apply flex items-center justify-between text-2xl font-bold after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
@apply flex items-center justify-between text-2xl font-bold hover:cursor-pointer after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
}

details p {
@apply text-2xl;
}

canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}

#faq > div > * {
position: relative;
z-index: 10;
}
}
45 changes: 45 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', () => {
const navBar = document.querySelector('nav');
const navigationLinks = navBar.querySelectorAll('li');
const hamburgerCheckbox = navBar.querySelector('.peer');

// Hamburger navigation

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', () => {
document.body.classList.remove('overflow-hidden');
hamburgerCheckbox.checked = false;
});
});

// Navbar appears on scroll down and hides on scroll up

let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
window.scrollY - lastScrollY > 0 ? hideNavBar() : showNavBar();
lastScrollY = window.scrollY;
});

function hideNavBar() {
navBar.classList.add('-translate-y-full');
navBar.classList.remove('translate-y-0');
}

function showNavBar() {
navBar.classList.add('translate-y-0');
navBar.classList.remove('-translate-y-full');
}

// Disable scrolling when navigation menu is visible

hamburgerCheckbox.addEventListener('change', (e) => {
if (e.target.checked) {
document.body.classList.add('overflow-hidden');
}
});

// particles.js

particlesJS.load('faq', 'assets/particlesjs-config.json');
});
Loading