Created
September 20, 2023 04:06
-
-
Save X-oss-byte/dc05f446210fff80c37c168aa5dd405e to your computer and use it in GitHub Desktop.
Navigation PageDesign/Lesson
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sectio.nav | |
h1 FRONTEND TRENDS | |
h3.span.loader | |
span.m B | |
span.m E | |
span.m N | |
span.m E | |
span.m F | |
span.m I | |
span.m T | |
span.m S | |
span.m | |
span.m o | |
span.m f | |
span.m | |
span.m T | |
span.m E | |
span.m C | |
span.m H | |
span.m N | |
span.m O | |
span.m L | |
span.m O | |
span.m G | |
span.m I | |
span.m E | |
span.m S | |
.nav-container | |
a.nav-tab(href="#tab-svelte") SVELTE | |
a.nav-tab(href="#tab-esbuild") ESBUILD | |
a.nav-tab(href="#tab-next") NEXT.JS | |
a.nav-tab(href="#tab-typescript") TYPESCRIPT | |
a.nav-tab(href="#tab-vite") VITE | |
span.nav-tab-slider | |
main.main | |
section#tab-svelte.slider | |
h1 SVELTE | |
h2 another frontend JS framework | |
section#tab-esbuild.slider | |
h1 ESBUILD | |
h2 an extremely fast JavaScript bundler | |
section#tab-next.slider | |
h1 NEXT.JS | |
h2 framework for Production | |
section#tab-typescript.slider | |
h1 TYPESCRIPT | |
h2 giving you better tooling at any scale | |
section#tab-vite.slider | |
h1 VITE | |
h2 a frontend build tool | |
canvas.background | |
<!-- SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuIQ== --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Credit and Thanks: | |
Matrix - Particles.js; | |
SliderJS - Ettrics; | |
Design - Sara Mazal Web; | |
Fonts - Google Fonts | |
*/ | |
window.onload = function () { | |
Particles.init({ | |
selector: ".background" | |
}); | |
}; | |
const particles = Particles.init({ | |
selector: ".background", | |
color: ["#03dac6", "#ff0266", "#000000"], | |
connectParticles: true, | |
responsive: [ | |
{ | |
breakpoint: 768, | |
options: { | |
color: ["#faebd7", "#03dac6", "#ff0266"], | |
maxParticles: 43, | |
connectParticles: false | |
} | |
} | |
] | |
}); | |
class NavigationPage { | |
constructor() { | |
this.currentId = null; | |
this.currentTab = null; | |
this.tabContainerHeight = 70; | |
this.lastScroll = 0; | |
let self = this; | |
$(".nav-tab").click(function () { | |
self.onTabClick(event, $(this)); | |
}); | |
$(window).scroll(() => { | |
this.onScroll(); | |
}); | |
$(window).resize(() => { | |
this.onResize(); | |
}); | |
} | |
onTabClick(event, element) { | |
event.preventDefault(); | |
let scrollTop = | |
$(element.attr("href")).offset().top - this.tabContainerHeight + 1; | |
$("html, body").animate({ scrollTop: scrollTop }, 600); | |
} | |
onScroll() { | |
this.checkHeaderPosition(); | |
this.findCurrentTabSelector(); | |
this.lastScroll = $(window).scrollTop(); | |
} | |
onResize() { | |
if (this.currentId) { | |
this.setSliderCss(); | |
} | |
} | |
checkHeaderPosition() { | |
const headerHeight = 75; | |
if ($(window).scrollTop() > headerHeight) { | |
$(".nav-container").addClass("nav-container--scrolled"); | |
} else { | |
$(".nav-container").removeClass("nav-container--scrolled"); | |
} | |
let offset = | |
$(".nav").offset().top + | |
$(".nav").height() - | |
this.tabContainerHeight - | |
headerHeight; | |
if ( | |
$(window).scrollTop() > this.lastScroll && | |
$(window).scrollTop() > offset | |
) { | |
$(".nav-container").addClass("nav-container--move-up"); | |
$(".nav-container").removeClass("nav-container--top-first"); | |
$(".nav-container").addClass("nav-container--top-second"); | |
} else if ( | |
$(window).scrollTop() < this.lastScroll && | |
$(window).scrollTop() > offset | |
) { | |
$(".nav-container").removeClass("nav-container--move-up"); | |
$(".nav-container").removeClass("nav-container--top-second"); | |
$(".nav-container-container").addClass("nav-container--top-first"); | |
} else { | |
$(".nav-container").removeClass("nav-container--move-up"); | |
$(".nav-container").removeClass("nav-container--top-first"); | |
$(".nav-container").removeClass("nav-container--top-second"); | |
} | |
} | |
findCurrentTabSelector(element) { | |
let newCurrentId; | |
let newCurrentTab; | |
let self = this; | |
$(".nav-tab").each(function () { | |
let id = $(this).attr("href"); | |
let offsetTop = $(id).offset().top - self.tabContainerHeight; | |
let offsetBottom = | |
$(id).offset().top + $(id).height() - self.tabContainerHeight; | |
if ( | |
$(window).scrollTop() > offsetTop && | |
$(window).scrollTop() < offsetBottom | |
) { | |
newCurrentId = id; | |
newCurrentTab = $(this); | |
} | |
}); | |
if (this.currentId != newCurrentId || this.currentId === null) { | |
this.currentId = newCurrentId; | |
this.currentTab = newCurrentTab; | |
this.setSliderCss(); | |
} | |
} | |
setSliderCss() { | |
let width = 0; | |
let left = 0; | |
if (this.currentTab) { | |
width = this.currentTab.css("width"); | |
left = this.currentTab.offset().left; | |
} | |
$(".nav-tab-slider").css("width", width); | |
$(".nav-tab-slider").css("left", left); | |
} | |
} | |
new NavigationPage(); | |
/* Credit and Thanks: | |
Matrix - Particles.js; | |
SliderJS - Ettrics; | |
Design - Sara Mazal Web; | |
Fonts - Google Fonts | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: "ROBOTO", sans-serif; | |
} | |
.nav, | |
.slider { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
position: relative; | |
background-color: #1e1f26; | |
text-align: center; | |
padding: 0 2em; | |
} | |
.nav h1, | |
.slider h1 { | |
font-family: "Josefin Sans", sans-serif; | |
font-size: 5vw; | |
margin: 0; | |
padding-bottom: 0.5rem; | |
letter-spacing: 0.5rem; | |
color: #03dac6; | |
transition: all 0.3s ease; | |
z-index: 3; | |
} | |
h1:hover { | |
transform: translate3d(0, -10px, 22px); | |
color: #ff0266; | |
} | |
.slider h2 { | |
font-size: 2vw; | |
letter-spacing: 0.3rem; | |
font-family: "ROBOTO", sans-serif; | |
font-weight: 300; | |
color: #faebd7; | |
z-index: 4; | |
} | |
h3.span { | |
font-size: 2vw; | |
letter-spacing: 0.7em; | |
font-family: "ROBOTO", sans-serif; | |
font-weight: 300; | |
color: #faebd7; | |
z-index: 4; | |
} | |
span:hover { | |
color: #ff0266; | |
font-weight: 500; | |
font-size: 2.2vw; | |
} | |
a { | |
text-decoration: none; | |
} | |
.nav-container { | |
display: flex; | |
flex-direction: row; | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
height: 75px; | |
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5); | |
background: #1e1f26; | |
z-index: 10; | |
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); | |
} | |
.nav-container--top-first { | |
position: fixed; | |
top: 75px; | |
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); | |
} | |
.nav-container--top-second { | |
position: fixed; | |
top: 0; | |
} | |
.nav-tab { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex: 1; | |
color: #03dac6; | |
letter-spacing: 0.1rem; | |
transition: all 0.5s ease; | |
font-size: 2vw; | |
} | |
.nav-tab:hover { | |
color: #1e1f26; | |
background: #03dac6; | |
transition: all 0.5s ease; | |
} | |
.nav-tab-slider { | |
position: absolute; | |
bottom: 0; | |
width: 0; | |
height: 2px; | |
background: #03dac6; | |
transition: left 0.3s ease; | |
} | |
.background { | |
position: absolute; | |
height: 90vh; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: auto; | |
} | |
@media (min-width: 800px) { | |
.nav h1, | |
.slider h1 { | |
font-size: 5vw; | |
} | |
.nav h2, | |
.slider h2 { | |
font-size: 3vw; | |
} | |
.nav-tab { | |
font-size: 3vw; | |
} | |
} | |
@media screen only (min-width: 360px) { | |
.nav h1, | |
.slider h1 { | |
font-size: 8vw; | |
} | |
.nav h2, | |
.slider h2 { | |
font-size: 2vw; | |
letter-spacing: 0.2vw; | |
} | |
.nav-tab { | |
font-size: 1.2vw; | |
} | |
} | |
.background { | |
position: absolute; | |
height: 100vh; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 0; | |
} | |
.loader span { | |
color: #faebd7; | |
text-shadow: 0 0 0 #faebd7; | |
-webkit-animation: loading 1s ease-in-out infinite alternate; | |
} | |
@-webkit-keyframes loading { | |
to { | |
text-shadow: 20px 0 70px #ff0266; | |
color: #ff0266; | |
} | |
} | |
.loader span:nth-child(2) { | |
-webkit-animation-delay: 0.1s; | |
} | |
.loader span:nth-child(3) { | |
-webkit-animation-delay: 0.2s; | |
} | |
.loader span:nth-child(4) { | |
-webkit-animation-delay: 0.3s; | |
} | |
.loader span:nth-child(5) { | |
-webkit-animation-delay: 0.4s; | |
} | |
.loader span:nth-child(6) { | |
-webkit-animation-delay: 0.5s; | |
} | |
.loader span:nth-child(7) { | |
-webkit-animation-delay: 0.6s; | |
} | |
.loader span:nth-child(8) { | |
-webkit-animation-delay: 0.7s; | |
} | |
.loader span:nth-child(9) { | |
-webkit-animation-delay: 0.8s; | |
} | |
.loader span:nth-child(10) { | |
-webkit-animation-delay: 0.9s; | |
} | |
.loader span:nth-child(11) { | |
-webkit-animation-delay: 1s; | |
} | |
.loader span:nth-child(12) { | |
-webkit-animation-delay: 1.1s; | |
} | |
.loader span:nth-child(13) { | |
-webkit-animation-delay: 1.2s; | |
} | |
.loader span:nth-child(14) { | |
-webkit-animation-delay: 1.3s; | |
} | |
.loader span:nth-child(15) { | |
-webkit-animation-delay: 1.4s; | |
} | |
.loader span:nth-child(16) { | |
-webkit-animation-delay: 1.5s; | |
} | |
.loader span:nth-child(17) { | |
-webkit-animation-delay: 1.6s; | |
} | |
.loader span:nth-child(18) { | |
-webkit-animation-delay: 1.7s; | |
} | |
.loader span:nth-child(19) { | |
-webkit-animation-delay: 1.8s; | |
} | |
.loader span:nth-child(20) { | |
-webkit-animation-delay: 1.9s; | |
} | |
.loader span:nth-child(21) { | |
-webkit-animation-delay: 2s; | |
} | |
.loader span:nth-child(22) { | |
-webkit-animation-delay: 2.1s; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment