CodePen - Navigation PageDesign\/Lesson<\/title>\n <meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<meta name=\"description\" content=\"sara mazal lessons\">\n<meta name=\"keywords\" content=\"HTML, CSS, JavaScript, mazal, icons\">\n<meta name=\"author\" content=\"Sara Mazal\">\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Josefin+Sans:wght@200;300;400;500&family=Raleway:wght@100;200;300;400;500&family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n\n<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.8.2\/css\/all.css\" integrity=\"sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq\/1cq5FLXAZQ7Ay\" crossorigin=\"anonymous\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/particlesjs\/2.2.3\/particles.min.js\"><\/script><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\">\n<link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<style>* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"ROBOTO\", sans-serif;\n}\n\n.nav,\n.slider {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n position: relative;\n background-color: #1e1f26;\n text-align: center;\n padding: 0 2em;\n}\n\n.nav h1,\n.slider h1 {\n font-family: \"Josefin Sans\", sans-serif;\n font-size: 5vw;\n margin: 0;\n padding-bottom: 0.5rem;\n letter-spacing: 0.5rem;\n color: #03dac6;\n transition: all 0.3s ease;\n z-index: 3;\n}\nh1:hover {\n transform: translate3d(0, -10px, 22px);\n color: #ff0266;\n}\n\n.slider h2 {\n font-size: 2vw;\n letter-spacing: 0.3rem;\n font-family: \"ROBOTO\", sans-serif;\n font-weight: 300;\n color: #faebd7;\n z-index: 4;\n}\nh3.span {\n font-size: 2vw;\n letter-spacing: 0.7em;\n font-family: \"ROBOTO\", sans-serif;\n font-weight: 300;\n color: #faebd7;\n z-index: 4;\n}\nspan:hover {\n color: #ff0266;\n font-weight: 500;\n font-size: 2.2vw;\n}\n\na {\n text-decoration: none;\n}\n\n.nav-container {\n display: flex;\n flex-direction: row;\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 75px;\n box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);\n background: #1e1f26;\n z-index: 10;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.nav-container--top-first {\n position: fixed;\n top: 75px;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.nav-container--top-second {\n position: fixed;\n top: 0;\n}\n.nav-tab {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n color: #03dac6;\n letter-spacing: 0.1rem;\n transition: all 0.5s ease;\n font-size: 2vw;\n}\n\n.nav-tab:hover {\n color: #1e1f26;\n background: #03dac6;\n transition: all 0.5s ease;\n}\n\n.nav-tab-slider {\n position: absolute;\n bottom: 0;\n width: 0;\n height: 2px;\n background: #03dac6;\n transition: left 0.3s ease;\n}\n.background {\n position: absolute;\n height: 90vh;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: auto;\n}\n@media (min-width: 800px) {\n .nav h1,\n .slider h1 {\n font-size: 5vw;\n }\n\n .nav h2,\n .slider h2 {\n font-size: 3vw;\n }\n\n .nav-tab {\n font-size: 3vw;\n }\n}\n\n@media screen only (min-width: 360px) {\n .nav h1,\n .slider h1 {\n font-size: 8vw;\n }\n\n .nav h2,\n .slider h2 {\n font-size: 2vw;\n letter-spacing: 0.2vw;\n }\n\n .nav-tab {\n font-size: 1.2vw;\n }\n}\n.background {\n position: absolute;\n height: 100vh;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 0;\n}\n.loader span {\n color: #faebd7;\n text-shadow: 0 0 0 #faebd7;\n -webkit-animation: loading 1s ease-in-out infinite alternate;\n}\n\n@-webkit-keyframes loading {\n to {\n text-shadow: 20px 0 70px #ff0266;\n color: #ff0266;\n }\n}\n.loader span:nth-child(2) {\n -webkit-animation-delay: 0.1s;\n}\n.loader span:nth-child(3) {\n -webkit-animation-delay: 0.2s;\n}\n.loader span:nth-child(4) {\n -webkit-animation-delay: 0.3s;\n}\n.loader span:nth-child(5) {\n -webkit-animation-delay: 0.4s;\n}\n.loader span:nth-child(6) {\n -webkit-animation-delay: 0.5s;\n}\n.loader span:nth-child(7) {\n -webkit-animation-delay: 0.6s;\n}\n.loader span:nth-child(8) {\n -webkit-animation-delay: 0.7s;\n}\n.loader span:nth-child(9) {\n -webkit-animation-delay: 0.8s;\n}\n\n.loader span:nth-child(10) {\n -webkit-animation-delay: 0.9s;\n}\n.loader span:nth-child(11) {\n -webkit-animation-delay: 1s;\n}\n.loader span:nth-child(12) {\n -webkit-animation-delay: 1.1s;\n}\n.loader span:nth-child(13) {\n -webkit-animation-delay: 1.2s;\n}\n.loader span:nth-child(14) {\n -webkit-animation-delay: 1.3s;\n}\n.loader span:nth-child(15) {\n -webkit-animation-delay: 1.4s;\n}\n.loader span:nth-child(16) {\n -webkit-animation-delay: 1.5s;\n}\n.loader span:nth-child(17) {\n -webkit-animation-delay: 1.6s;\n}\n.loader span:nth-child(18) {\n -webkit-animation-delay: 1.7s;\n}\n.loader span:nth-child(19) {\n -webkit-animation-delay: 1.8s;\n}\n.loader span:nth-child(20) {\n -webkit-animation-delay: 1.9s;\n}\n.loader span:nth-child(21) {\n -webkit-animation-delay: 2s;\n}\n.loader span:nth-child(22) {\n -webkit-animation-delay: 2.1s;\n}<\/style>\n<body>\n\n<sectio class=\"nav\">\n <h1><span class=\"ez-toc-section\" id=\"FRONTEND_TRENDS\"><\/span>FRONTEND TRENDS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h3 class=\"span loader\"><span class=\"ez-toc-section\" id=\"BENEFITS_of_TECHNOLOGIES\"><\/span><span class=\"m\">B<\/span><span class=\"m\">E<\/span><span class=\"m\">N<\/span><span class=\"m\">E<\/span><span class=\"m\">F<\/span><span class=\"m\">I<\/span><span class=\"m\">T<\/span><span class=\"m\">S<\/span><span class=\"m\"> <\/span><span class=\"m\">o<\/span><span class=\"m\">f<\/span><span class=\"m\"> <\/span><span class=\"m\">T<\/span><span class=\"m\">E<\/span><span class=\"m\">C<\/span><span class=\"m\">H<\/span><span class=\"m\">N<\/span><span class=\"m\">O<\/span><span class=\"m\">L<\/span><span class=\"m\">O<\/span><span class=\"m\">G<\/span><span class=\"m\">I<\/span><span class=\"m\">E<\/span><span class=\"m\">S<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n <div class=\"nav-container\"><a class=\"nav-tab\" href=\"#tab-svelte\">SVELTE<\/a><a class=\"nav-tab\" href=\"#tab-esbuild\">ESBUILD<\/a><a class=\"nav-tab\" href=\"#tab-next\">NEXT.JS<\/a><a class=\"nav-tab\" href=\"#tab-typescript\">TYPESCRIPT<\/a><a class=\"nav-tab\" href=\"#tab-vite\">VITE<\/a><span class=\"nav-tab-slider\"><\/span><\/div>\n<\/sectio>\n<main class=\"main\">\n <section class=\"slider\" id=\"tab-svelte\">\n <h1><span class=\"ez-toc-section\" id=\"SVELTE\"><\/span>SVELTE<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"another_frontend_JS_framework\"><\/span>another frontend JS framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-esbuild\">\n <h1><span class=\"ez-toc-section\" id=\"ESBUILD\"><\/span>ESBUILD<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"an_extremely_fast_JavaScript_bundler\"><\/span>an extremely fast JavaScript bundler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-next\">\n <h1><span class=\"ez-toc-section\" id=\"NEXTJS\"><\/span>NEXT.JS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"framework_for_Production\"><\/span>framework for Production<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-typescript\">\n <h1><span class=\"ez-toc-section\" id=\"TYPESCRIPT\"><\/span>TYPESCRIPT<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"giving_you_better_tooling_at_any_scale\"><\/span>giving you better tooling at any scale<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-vite\">\n <h1><span class=\"ez-toc-section\" id=\"VITE\"><\/span>VITE<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"a_frontend_build_tool\"><\/span>a frontend build tool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n<\/main>\n<canvas class=\"background\"><\/canvas>\n\n <script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js'><\/script>\n <script >\n\/* Credit and Thanks:\nMatrix - Particles.js;\nSliderJS - Ettrics;\nDesign - Sara Mazal Web;\nFonts - Google Fonts\n*\/\n\nwindow.onload = function () {\n Particles.init({\n selector: \".background\"\n });\n};\nconst particles = Particles.init({\n selector: \".background\",\n color: [\"#03dac6\", \"#ff0266\", \"#000000\"],\n connectParticles: true,\n responsive: [\n {\n breakpoint: 768,\n options: {\n color: [\"#faebd7\", \"#03dac6\", \"#ff0266\"],\n maxParticles: 43,\n connectParticles: false\n }\n }\n ]\n});\n\nclass NavigationPage {\n constructor() {\n this.currentId = null;\n this.currentTab = null;\n this.tabContainerHeight = 70;\n this.lastScroll = 0;\n let self = this;\n $(\".nav-tab\").click(function () {\n self.onTabClick(event, $(this));\n });\n $(window).scroll(() => {\n this.onScroll();\n });\n $(window).resize(() => {\n this.onResize();\n });\n }\n\n onTabClick(event, element) {\n event.preventDefault();\n let scrollTop =\n $(element.attr(\"href\")).offset().top - this.tabContainerHeight + 1;\n $(\"html, body\").animate({ scrollTop: scrollTop }, 600);\n }\n\n onScroll() {\n this.checkHeaderPosition();\n this.findCurrentTabSelector();\n this.lastScroll = $(window).scrollTop();\n }\n\n onResize() {\n if (this.currentId) {\n this.setSliderCss();\n }\n }\n\n checkHeaderPosition() {\n const headerHeight = 75;\n if ($(window).scrollTop() > headerHeight) {\n $(\".nav-container\").addClass(\"nav-container--scrolled\");\n } else {\n $(\".nav-container\").removeClass(\"nav-container--scrolled\");\n }\n let offset =\n $(\".nav\").offset().top +\n $(\".nav\").height() -\n this.tabContainerHeight -\n headerHeight;\n if (\n $(window).scrollTop() > this.lastScroll &&\n $(window).scrollTop() > offset\n ) {\n $(\".nav-container\").addClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\n $(\".nav-container\").addClass(\"nav-container--top-second\");\n } else if (\n $(window).scrollTop() < this.lastScroll &&\n $(window).scrollTop() > offset\n ) {\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\n $(\".nav-container-container\").addClass(\"nav-container--top-first\");\n } else {\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\n }\n }\n\n findCurrentTabSelector(element) {\n let newCurrentId;\n let newCurrentTab;\n let self = this;\n $(\".nav-tab\").each(function () {\n let id = $(this).attr(\"href\");\n let offsetTop = $(id).offset().top - self.tabContainerHeight;\n let offsetBottom =\n $(id).offset().top + $(id).height() - self.tabContainerHeight;\n if (\n $(window).scrollTop() > offsetTop &&\n $(window).scrollTop() < offsetBottom\n ) {\n newCurrentId = id;\n newCurrentTab = $(this);\n }\n });\n if (this.currentId != newCurrentId || this.currentId === null) {\n this.currentId = newCurrentId;\n this.currentTab = newCurrentTab;\n this.setSliderCss();\n }\n }\n\n setSliderCss() {\n let width = 0;\n let left = 0;\n if (this.currentTab) {\n width = this.currentTab.css(\"width\");\n left = this.currentTab.offset().left;\n }\n $(\".nav-tab-slider\").css(\"width\", width);\n $(\".nav-tab-slider\").css(\"left\", left);\n }\n}\n\nnew NavigationPage();\n\/* Credit and Thanks:\nMatrix - Particles.js;\nSliderJS - Ettrics;\nDesign - Sara Mazal Web;\nFonts - Google Fonts\n*\/\n\n <\/script>\n\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-401c1057 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"401c1057\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-45b80367\" data-id=\"45b80367\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-476b6aad elementor-widget elementor-widget-text-editor\" data-id=\"476b6aad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\n<pre class=\"wp-block-code\"><code>sectio.nav\r\n h1 FRONTEND TRENDS\r\n h3.span.loader\r\n span.m B\r\n span.m E\r\n span.m N\r\n span.m E\r\n span.m F\r\n span.m I\r\n span.m T\r\n span.m S\r\n span.m  \r\n span.m o\r\n span.m f\r\n span.m  \r\n span.m T\r\n span.m E\r\n span.m C\r\n span.m H\r\n span.m N\r\n span.m O\r\n span.m L\r\n span.m O\r\n span.m G\r\n span.m I\r\n span.m E\r\n span.m S\r\n .nav-container\r\n a.nav-tab(href=\"#tab-svelte\") SVELTE\r\n a.nav-tab(href=\"#tab-esbuild\") ESBUILD\r\n a.nav-tab(href=\"#tab-next\") NEXT.JS\r\n a.nav-tab(href=\"#tab-typescript\") TYPESCRIPT\r\n a.nav-tab(href=\"#tab-vite\") VITE\r\n span.nav-tab-slider\r\nmain.main\r\n section#tab-svelte.slider\r\n h1 SVELTE\r\n h2 another frontend JS framework\r\n section#tab-esbuild.slider\r\n h1 ESBUILD\r\n h2 an extremely fast JavaScript bundler\r\n section#tab-next.slider\r\n h1 NEXT.JS\r\n h2 framework for Production\r\n section#tab-typescript.slider\r\n h1 TYPESCRIPT\r\n h2 giving you better tooling at any scale\r\n section#tab-vite.slider\r\n h1 VITE\r\n h2 a frontend build tool\r\ncanvas.background\r\n\r\n\r\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: \"ROBOTO\", sans-serif;\r\n}\r\n\r\n.nav,\r\n.slider {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n position: relative;\r\n background-color: #1e1f26;\r\n text-align: center;\r\n padding: 0 2em;\r\n}\r\n\r\n.nav h1,\r\n.slider h1 {\r\n font-family: \"Josefin Sans\", sans-serif;\r\n font-size: 5vw;\r\n margin: 0;\r\n padding-bottom: 0.5rem;\r\n letter-spacing: 0.5rem;\r\n color: #03dac6;\r\n transition: all 0.3s ease;\r\n z-index: 3;\r\n}\r\nh1:hover {\r\n transform: translate3d(0, -10px, 22px);\r\n color: #ff0266;\r\n}\r\n\r\n.slider h2 {\r\n font-size: 2vw;\r\n letter-spacing: 0.3rem;\r\n font-family: \"ROBOTO\", sans-serif;\r\n font-weight: 300;\r\n color: #faebd7;\r\n z-index: 4;\r\n}\r\nh3.span {\r\n font-size: 2vw;\r\n letter-spacing: 0.7em;\r\n font-family: \"ROBOTO\", sans-serif;\r\n font-weight: 300;\r\n color: #faebd7;\r\n z-index: 4;\r\n}\r\nspan:hover {\r\n color: #ff0266;\r\n font-weight: 500;\r\n font-size: 2.2vw;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\n.nav-container {\r\n display: flex;\r\n flex-direction: row;\r\n position: absolute;\r\n bottom: 0;\r\n width: 100%;\r\n height: 75px;\r\n box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);\r\n background: #1e1f26;\r\n z-index: 10;\r\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\r\n}\r\n\r\n.nav-container--top-first {\r\n position: fixed;\r\n top: 75px;\r\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\r\n}\r\n\r\n.nav-container--top-second {\r\n position: fixed;\r\n top: 0;\r\n}\r\n.nav-tab {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex: 1;\r\n color: #03dac6;\r\n letter-spacing: 0.1rem;\r\n transition: all 0.5s ease;\r\n font-size: 2vw;\r\n}\r\n\r\n.nav-tab:hover {\r\n color: #1e1f26;\r\n background: #03dac6;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.nav-tab-slider {\r\n position: absolute;\r\n bottom: 0;\r\n width: 0;\r\n height: 2px;\r\n background: #03dac6;\r\n transition: left 0.3s ease;\r\n}\r\n.background {\r\n position: absolute;\r\n height: 90vh;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: auto;\r\n}\r\n@media (min-width: 800px) {\r\n .nav h1,\r\n .slider h1 {\r\n font-size: 5vw;\r\n }\r\n\r\n .nav h2,\r\n .slider h2 {\r\n font-size: 3vw;\r\n }\r\n\r\n .nav-tab {\r\n font-size: 3vw;\r\n }\r\n}\r\n\r\n@media screen only (min-width: 360px) {\r\n .nav h1,\r\n .slider h1 {\r\n font-size: 8vw;\r\n }\r\n\r\n .nav h2,\r\n .slider h2 {\r\n font-size: 2vw;\r\n letter-spacing: 0.2vw;\r\n }\r\n\r\n .nav-tab {\r\n font-size: 1.2vw;\r\n }\r\n}\r\n.background {\r\n position: absolute;\r\n height: 100vh;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 0;\r\n}\r\n.loader span {\r\n color: #faebd7;\r\n text-shadow: 0 0 0 #faebd7;\r\n -webkit-animation: loading 1s ease-in-out infinite alternate;\r\n}\r\n\r\n@-webkit-keyframes loading {\r\n to {\r\n text-shadow: 20px 0 70px #ff0266;\r\n color: #ff0266;\r\n }\r\n}\r\n.loader span:nth-child(2) {\r\n -webkit-animation-delay: 0.1s;\r\n}\r\n.loader span:nth-child(3) {\r\n -webkit-animation-delay: 0.2s;\r\n}\r\n.loader span:nth-child(4) {\r\n -webkit-animation-delay: 0.3s;\r\n}\r\n.loader span:nth-child(5) {\r\n -webkit-animation-delay: 0.4s;\r\n}\r\n.loader span:nth-child(6) {\r\n -webkit-animation-delay: 0.5s;\r\n}\r\n.loader span:nth-child(7) {\r\n -webkit-animation-delay: 0.6s;\r\n}\r\n.loader span:nth-child(8) {\r\n -webkit-animation-delay: 0.7s;\r\n}\r\n.loader span:nth-child(9) {\r\n -webkit-animation-delay: 0.8s;\r\n}\r\n\r\n.loader span:nth-child(10) {\r\n -webkit-animation-delay: 0.9s;\r\n}\r\n.loader span:nth-child(11) {\r\n -webkit-animation-delay: 1s;\r\n}\r\n.loader span:nth-child(12) {\r\n -webkit-animation-delay: 1.1s;\r\n}\r\n.loader span:nth-child(13) {\r\n -webkit-animation-delay: 1.2s;\r\n}\r\n.loader span:nth-child(14) {\r\n -webkit-animation-delay: 1.3s;\r\n}\r\n.loader span:nth-child(15) {\r\n -webkit-animation-delay: 1.4s;\r\n}\r\n.loader span:nth-child(16) {\r\n -webkit-animation-delay: 1.5s;\r\n}\r\n.loader span:nth-child(17) {\r\n -webkit-animation-delay: 1.6s;\r\n}\r\n.loader span:nth-child(18) {\r\n -webkit-animation-delay: 1.7s;\r\n}\r\n.loader span:nth-child(19) {\r\n -webkit-animation-delay: 1.8s;\r\n}\r\n.loader span:nth-child(20) {\r\n -webkit-animation-delay: 1.9s;\r\n}\r\n.loader span:nth-child(21) {\r\n -webkit-animation-delay: 2s;\r\n}\r\n.loader span:nth-child(22) {\r\n -webkit-animation-delay: 2.1s;\r\n}\r\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Credit and Thanks:\r\nMatrix - Particles.js;\r\nSliderJS - Ettrics;\r\nDesign - Sara Mazal Web;\r\nFonts - Google Fonts\r\n*\/\r\n\r\nwindow.onload = function () {\r\n Particles.init({\r\n selector: \".background\"\r\n });\r\n};\r\nconst particles = Particles.init({\r\n selector: \".background\",\r\n color: [\"#03dac6\", \"#ff0266\", \"#000000\"],\r\n connectParticles: true,\r\n responsive: [\r\n {\r\n breakpoint: 768,\r\n options: {\r\n color: [\"#faebd7\", \"#03dac6\", \"#ff0266\"],\r\n maxParticles: 43,\r\n connectParticles: false\r\n }\r\n }\r\n ]\r\n});\r\n\r\nclass NavigationPage {\r\n constructor() {\r\n this.currentId = null;\r\n this.currentTab = null;\r\n this.tabContainerHeight = 70;\r\n this.lastScroll = 0;\r\n let self = this;\r\n $(\".nav-tab\").click(function () {\r\n self.onTabClick(event, $(this));\r\n });\r\n $(window).scroll(() => {\r\n this.onScroll();\r\n });\r\n $(window).resize(() => {\r\n this.onResize();\r\n });\r\n }\r\n\r\n onTabClick(event, element) {\r\n event.preventDefault();\r\n let scrollTop =\r\n $(element.attr(\"href\")).offset().top - this.tabContainerHeight + 1;\r\n $(\"html, body\").animate({ scrollTop: scrollTop }, 600);\r\n }\r\n\r\n onScroll() {\r\n this.checkHeaderPosition();\r\n this.findCurrentTabSelector();\r\n this.lastScroll = $(window).scrollTop();\r\n }\r\n\r\n onResize() {\r\n if (this.currentId) {\r\n this.setSliderCss();\r\n }\r\n }\r\n\r\n checkHeaderPosition() {\r\n const headerHeight = 75;\r\n if ($(window).scrollTop() > headerHeight) {\r\n $(\".nav-container\").addClass(\"nav-container--scrolled\");\r\n } else {\r\n $(\".nav-container\").removeClass(\"nav-container--scrolled\");\r\n }\r\n let offset =\r\n $(\".nav\").offset().top +\r\n $(\".nav\").height() -\r\n this.tabContainerHeight -\r\n headerHeight;\r\n if (\r\n $(window).scrollTop() > this.lastScroll &&\r\n $(window).scrollTop() > offset\r\n ) {\r\n $(\".nav-container\").addClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\r\n $(\".nav-container\").addClass(\"nav-container--top-second\");\r\n } else if (\r\n $(window).scrollTop() < this.lastScroll &&\r\n $(window).scrollTop() > offset\r\n ) {\r\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\r\n $(\".nav-container-container\").addClass(\"nav-container--top-first\");\r\n } else {\r\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\r\n }\r\n }\r\n\r\n findCurrentTabSelector(element) {\r\n let newCurrentId;\r\n let newCurrentTab;\r\n let self = this;\r\n $(\".nav-tab\").each(function () {\r\n let id = $(this).attr(\"href\");\r\n let offsetTop = $(id).offset().top - self.tabContainerHeight;\r\n let offsetBottom =\r\n $(id).offset().top + $(id).height() - self.tabContainerHeight;\r\n if (\r\n $(window).scrollTop() > offsetTop &&\r\n $(window).scrollTop() < offsetBottom\r\n ) {\r\n newCurrentId = id;\r\n newCurrentTab = $(this);\r\n }\r\n });\r\n if (this.currentId != newCurrentId || this.currentId === null) {\r\n this.currentId = newCurrentId;\r\n this.currentTab = newCurrentTab;\r\n this.setSliderCss();\r\n }\r\n }\r\n\r\n setSliderCss() {\r\n let width = 0;\r\n let left = 0;\r\n if (this.currentTab) {\r\n width = this.currentTab.css(\"width\");\r\n left = this.currentTab.offset().left;\r\n }\r\n $(\".nav-tab-slider\").css(\"width\", width);\r\n $(\".nav-tab-slider\").css(\"left\", left);\r\n }\r\n}\r\n\r\nnew NavigationPage();\r\n\/* Credit and Thanks:\r\nMatrix - Particles.js;\r\nSliderJS - Ettrics;\r\nDesign - Sara Mazal Web;\r\nFonts - Google Fonts\r\n*\/\r\n<\/code><\/pre>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CodePen – Navigation PageDesign\/Lesson FRONTEND TRENDS BENEFITS of TECHNOLOGIES SVELTEESBUILDNEXT.JSTYPESCRIPTVITE SVELTE another frontend JS framework ESBUILD an extremely fast JavaScript bundler NEXT.JS … <\/p>\n<p class=\"read-more-container\"><a title=\"Navigation PageDesign\/Lesson\" class=\"read-more button\" href=\"https:\/\/sahaldecode.com\/navigation-pagedesign-lesson\/#more-624\" aria-label=\"Read more about Navigation PageDesign\/Lesson\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[32,31],"tags":[],"class_list":["post-624","post","type-post","status-publish","format-standard","hentry","category-html","category-projects"],"_links":{"self":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624"}],"collection":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":1,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":4508,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624\/revisions\/4508"}],"wp:attachment":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n CodePen - Navigation PageDesign\/Lesson<\/title>\n <meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<meta name=\"description\" content=\"sara mazal lessons\">\n<meta name=\"keywords\" content=\"HTML, CSS, JavaScript, mazal, icons\">\n<meta name=\"author\" content=\"Sara Mazal\">\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Josefin+Sans:wght@200;300;400;500&family=Raleway:wght@100;200;300;400;500&family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n\n<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.8.2\/css\/all.css\" integrity=\"sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq\/1cq5FLXAZQ7Ay\" crossorigin=\"anonymous\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/particlesjs\/2.2.3\/particles.min.js\"><\/script><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\">\n<link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<style>* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"ROBOTO\", sans-serif;\n}\n\n.nav,\n.slider {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n position: relative;\n background-color: #1e1f26;\n text-align: center;\n padding: 0 2em;\n}\n\n.nav h1,\n.slider h1 {\n font-family: \"Josefin Sans\", sans-serif;\n font-size: 5vw;\n margin: 0;\n padding-bottom: 0.5rem;\n letter-spacing: 0.5rem;\n color: #03dac6;\n transition: all 0.3s ease;\n z-index: 3;\n}\nh1:hover {\n transform: translate3d(0, -10px, 22px);\n color: #ff0266;\n}\n\n.slider h2 {\n font-size: 2vw;\n letter-spacing: 0.3rem;\n font-family: \"ROBOTO\", sans-serif;\n font-weight: 300;\n color: #faebd7;\n z-index: 4;\n}\nh3.span {\n font-size: 2vw;\n letter-spacing: 0.7em;\n font-family: \"ROBOTO\", sans-serif;\n font-weight: 300;\n color: #faebd7;\n z-index: 4;\n}\nspan:hover {\n color: #ff0266;\n font-weight: 500;\n font-size: 2.2vw;\n}\n\na {\n text-decoration: none;\n}\n\n.nav-container {\n display: flex;\n flex-direction: row;\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 75px;\n box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);\n background: #1e1f26;\n z-index: 10;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.nav-container--top-first {\n position: fixed;\n top: 75px;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.nav-container--top-second {\n position: fixed;\n top: 0;\n}\n.nav-tab {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n color: #03dac6;\n letter-spacing: 0.1rem;\n transition: all 0.5s ease;\n font-size: 2vw;\n}\n\n.nav-tab:hover {\n color: #1e1f26;\n background: #03dac6;\n transition: all 0.5s ease;\n}\n\n.nav-tab-slider {\n position: absolute;\n bottom: 0;\n width: 0;\n height: 2px;\n background: #03dac6;\n transition: left 0.3s ease;\n}\n.background {\n position: absolute;\n height: 90vh;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: auto;\n}\n@media (min-width: 800px) {\n .nav h1,\n .slider h1 {\n font-size: 5vw;\n }\n\n .nav h2,\n .slider h2 {\n font-size: 3vw;\n }\n\n .nav-tab {\n font-size: 3vw;\n }\n}\n\n@media screen only (min-width: 360px) {\n .nav h1,\n .slider h1 {\n font-size: 8vw;\n }\n\n .nav h2,\n .slider h2 {\n font-size: 2vw;\n letter-spacing: 0.2vw;\n }\n\n .nav-tab {\n font-size: 1.2vw;\n }\n}\n.background {\n position: absolute;\n height: 100vh;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 0;\n}\n.loader span {\n color: #faebd7;\n text-shadow: 0 0 0 #faebd7;\n -webkit-animation: loading 1s ease-in-out infinite alternate;\n}\n\n@-webkit-keyframes loading {\n to {\n text-shadow: 20px 0 70px #ff0266;\n color: #ff0266;\n }\n}\n.loader span:nth-child(2) {\n -webkit-animation-delay: 0.1s;\n}\n.loader span:nth-child(3) {\n -webkit-animation-delay: 0.2s;\n}\n.loader span:nth-child(4) {\n -webkit-animation-delay: 0.3s;\n}\n.loader span:nth-child(5) {\n -webkit-animation-delay: 0.4s;\n}\n.loader span:nth-child(6) {\n -webkit-animation-delay: 0.5s;\n}\n.loader span:nth-child(7) {\n -webkit-animation-delay: 0.6s;\n}\n.loader span:nth-child(8) {\n -webkit-animation-delay: 0.7s;\n}\n.loader span:nth-child(9) {\n -webkit-animation-delay: 0.8s;\n}\n\n.loader span:nth-child(10) {\n -webkit-animation-delay: 0.9s;\n}\n.loader span:nth-child(11) {\n -webkit-animation-delay: 1s;\n}\n.loader span:nth-child(12) {\n -webkit-animation-delay: 1.1s;\n}\n.loader span:nth-child(13) {\n -webkit-animation-delay: 1.2s;\n}\n.loader span:nth-child(14) {\n -webkit-animation-delay: 1.3s;\n}\n.loader span:nth-child(15) {\n -webkit-animation-delay: 1.4s;\n}\n.loader span:nth-child(16) {\n -webkit-animation-delay: 1.5s;\n}\n.loader span:nth-child(17) {\n -webkit-animation-delay: 1.6s;\n}\n.loader span:nth-child(18) {\n -webkit-animation-delay: 1.7s;\n}\n.loader span:nth-child(19) {\n -webkit-animation-delay: 1.8s;\n}\n.loader span:nth-child(20) {\n -webkit-animation-delay: 1.9s;\n}\n.loader span:nth-child(21) {\n -webkit-animation-delay: 2s;\n}\n.loader span:nth-child(22) {\n -webkit-animation-delay: 2.1s;\n}<\/style>\n<body>\n\n<sectio class=\"nav\">\n <h1><span class=\"ez-toc-section\" id=\"FRONTEND_TRENDS\"><\/span>FRONTEND TRENDS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h3 class=\"span loader\"><span class=\"ez-toc-section\" id=\"BENEFITS_of_TECHNOLOGIES\"><\/span><span class=\"m\">B<\/span><span class=\"m\">E<\/span><span class=\"m\">N<\/span><span class=\"m\">E<\/span><span class=\"m\">F<\/span><span class=\"m\">I<\/span><span class=\"m\">T<\/span><span class=\"m\">S<\/span><span class=\"m\"> <\/span><span class=\"m\">o<\/span><span class=\"m\">f<\/span><span class=\"m\"> <\/span><span class=\"m\">T<\/span><span class=\"m\">E<\/span><span class=\"m\">C<\/span><span class=\"m\">H<\/span><span class=\"m\">N<\/span><span class=\"m\">O<\/span><span class=\"m\">L<\/span><span class=\"m\">O<\/span><span class=\"m\">G<\/span><span class=\"m\">I<\/span><span class=\"m\">E<\/span><span class=\"m\">S<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n <div class=\"nav-container\"><a class=\"nav-tab\" href=\"#tab-svelte\">SVELTE<\/a><a class=\"nav-tab\" href=\"#tab-esbuild\">ESBUILD<\/a><a class=\"nav-tab\" href=\"#tab-next\">NEXT.JS<\/a><a class=\"nav-tab\" href=\"#tab-typescript\">TYPESCRIPT<\/a><a class=\"nav-tab\" href=\"#tab-vite\">VITE<\/a><span class=\"nav-tab-slider\"><\/span><\/div>\n<\/sectio>\n<main class=\"main\">\n <section class=\"slider\" id=\"tab-svelte\">\n <h1><span class=\"ez-toc-section\" id=\"SVELTE\"><\/span>SVELTE<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"another_frontend_JS_framework\"><\/span>another frontend JS framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-esbuild\">\n <h1><span class=\"ez-toc-section\" id=\"ESBUILD\"><\/span>ESBUILD<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"an_extremely_fast_JavaScript_bundler\"><\/span>an extremely fast JavaScript bundler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-next\">\n <h1><span class=\"ez-toc-section\" id=\"NEXTJS\"><\/span>NEXT.JS<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"framework_for_Production\"><\/span>framework for Production<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-typescript\">\n <h1><span class=\"ez-toc-section\" id=\"TYPESCRIPT\"><\/span>TYPESCRIPT<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"giving_you_better_tooling_at_any_scale\"><\/span>giving you better tooling at any scale<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n <section class=\"slider\" id=\"tab-vite\">\n <h1><span class=\"ez-toc-section\" id=\"VITE\"><\/span>VITE<span class=\"ez-toc-section-end\"><\/span><\/h1>\n <h2><span class=\"ez-toc-section\" id=\"a_frontend_build_tool\"><\/span>a frontend build tool<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <\/section>\n<\/main>\n<canvas class=\"background\"><\/canvas>\n\n <script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js'><\/script>\n <script >\n\/* Credit and Thanks:\nMatrix - Particles.js;\nSliderJS - Ettrics;\nDesign - Sara Mazal Web;\nFonts - Google Fonts\n*\/\n\nwindow.onload = function () {\n Particles.init({\n selector: \".background\"\n });\n};\nconst particles = Particles.init({\n selector: \".background\",\n color: [\"#03dac6\", \"#ff0266\", \"#000000\"],\n connectParticles: true,\n responsive: [\n {\n breakpoint: 768,\n options: {\n color: [\"#faebd7\", \"#03dac6\", \"#ff0266\"],\n maxParticles: 43,\n connectParticles: false\n }\n }\n ]\n});\n\nclass NavigationPage {\n constructor() {\n this.currentId = null;\n this.currentTab = null;\n this.tabContainerHeight = 70;\n this.lastScroll = 0;\n let self = this;\n $(\".nav-tab\").click(function () {\n self.onTabClick(event, $(this));\n });\n $(window).scroll(() => {\n this.onScroll();\n });\n $(window).resize(() => {\n this.onResize();\n });\n }\n\n onTabClick(event, element) {\n event.preventDefault();\n let scrollTop =\n $(element.attr(\"href\")).offset().top - this.tabContainerHeight + 1;\n $(\"html, body\").animate({ scrollTop: scrollTop }, 600);\n }\n\n onScroll() {\n this.checkHeaderPosition();\n this.findCurrentTabSelector();\n this.lastScroll = $(window).scrollTop();\n }\n\n onResize() {\n if (this.currentId) {\n this.setSliderCss();\n }\n }\n\n checkHeaderPosition() {\n const headerHeight = 75;\n if ($(window).scrollTop() > headerHeight) {\n $(\".nav-container\").addClass(\"nav-container--scrolled\");\n } else {\n $(\".nav-container\").removeClass(\"nav-container--scrolled\");\n }\n let offset =\n $(\".nav\").offset().top +\n $(\".nav\").height() -\n this.tabContainerHeight -\n headerHeight;\n if (\n $(window).scrollTop() > this.lastScroll &&\n $(window).scrollTop() > offset\n ) {\n $(\".nav-container\").addClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\n $(\".nav-container\").addClass(\"nav-container--top-second\");\n } else if (\n $(window).scrollTop() < this.lastScroll &&\n $(window).scrollTop() > offset\n ) {\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\n $(\".nav-container-container\").addClass(\"nav-container--top-first\");\n } else {\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\n }\n }\n\n findCurrentTabSelector(element) {\n let newCurrentId;\n let newCurrentTab;\n let self = this;\n $(\".nav-tab\").each(function () {\n let id = $(this).attr(\"href\");\n let offsetTop = $(id).offset().top - self.tabContainerHeight;\n let offsetBottom =\n $(id).offset().top + $(id).height() - self.tabContainerHeight;\n if (\n $(window).scrollTop() > offsetTop &&\n $(window).scrollTop() < offsetBottom\n ) {\n newCurrentId = id;\n newCurrentTab = $(this);\n }\n });\n if (this.currentId != newCurrentId || this.currentId === null) {\n this.currentId = newCurrentId;\n this.currentTab = newCurrentTab;\n this.setSliderCss();\n }\n }\n\n setSliderCss() {\n let width = 0;\n let left = 0;\n if (this.currentTab) {\n width = this.currentTab.css(\"width\");\n left = this.currentTab.offset().left;\n }\n $(\".nav-tab-slider\").css(\"width\", width);\n $(\".nav-tab-slider\").css(\"left\", left);\n }\n}\n\nnew NavigationPage();\n\/* Credit and Thanks:\nMatrix - Particles.js;\nSliderJS - Ettrics;\nDesign - Sara Mazal Web;\nFonts - Google Fonts\n*\/\n\n <\/script>\n\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-401c1057 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"401c1057\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-45b80367\" data-id=\"45b80367\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-476b6aad elementor-widget elementor-widget-text-editor\" data-id=\"476b6aad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\n<pre class=\"wp-block-code\"><code>sectio.nav\r\n h1 FRONTEND TRENDS\r\n h3.span.loader\r\n span.m B\r\n span.m E\r\n span.m N\r\n span.m E\r\n span.m F\r\n span.m I\r\n span.m T\r\n span.m S\r\n span.m  \r\n span.m o\r\n span.m f\r\n span.m  \r\n span.m T\r\n span.m E\r\n span.m C\r\n span.m H\r\n span.m N\r\n span.m O\r\n span.m L\r\n span.m O\r\n span.m G\r\n span.m I\r\n span.m E\r\n span.m S\r\n .nav-container\r\n a.nav-tab(href=\"#tab-svelte\") SVELTE\r\n a.nav-tab(href=\"#tab-esbuild\") ESBUILD\r\n a.nav-tab(href=\"#tab-next\") NEXT.JS\r\n a.nav-tab(href=\"#tab-typescript\") TYPESCRIPT\r\n a.nav-tab(href=\"#tab-vite\") VITE\r\n span.nav-tab-slider\r\nmain.main\r\n section#tab-svelte.slider\r\n h1 SVELTE\r\n h2 another frontend JS framework\r\n section#tab-esbuild.slider\r\n h1 ESBUILD\r\n h2 an extremely fast JavaScript bundler\r\n section#tab-next.slider\r\n h1 NEXT.JS\r\n h2 framework for Production\r\n section#tab-typescript.slider\r\n h1 TYPESCRIPT\r\n h2 giving you better tooling at any scale\r\n section#tab-vite.slider\r\n h1 VITE\r\n h2 a frontend build tool\r\ncanvas.background\r\n\r\n\r\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: \"ROBOTO\", sans-serif;\r\n}\r\n\r\n.nav,\r\n.slider {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n position: relative;\r\n background-color: #1e1f26;\r\n text-align: center;\r\n padding: 0 2em;\r\n}\r\n\r\n.nav h1,\r\n.slider h1 {\r\n font-family: \"Josefin Sans\", sans-serif;\r\n font-size: 5vw;\r\n margin: 0;\r\n padding-bottom: 0.5rem;\r\n letter-spacing: 0.5rem;\r\n color: #03dac6;\r\n transition: all 0.3s ease;\r\n z-index: 3;\r\n}\r\nh1:hover {\r\n transform: translate3d(0, -10px, 22px);\r\n color: #ff0266;\r\n}\r\n\r\n.slider h2 {\r\n font-size: 2vw;\r\n letter-spacing: 0.3rem;\r\n font-family: \"ROBOTO\", sans-serif;\r\n font-weight: 300;\r\n color: #faebd7;\r\n z-index: 4;\r\n}\r\nh3.span {\r\n font-size: 2vw;\r\n letter-spacing: 0.7em;\r\n font-family: \"ROBOTO\", sans-serif;\r\n font-weight: 300;\r\n color: #faebd7;\r\n z-index: 4;\r\n}\r\nspan:hover {\r\n color: #ff0266;\r\n font-weight: 500;\r\n font-size: 2.2vw;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\n.nav-container {\r\n display: flex;\r\n flex-direction: row;\r\n position: absolute;\r\n bottom: 0;\r\n width: 100%;\r\n height: 75px;\r\n box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);\r\n background: #1e1f26;\r\n z-index: 10;\r\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\r\n}\r\n\r\n.nav-container--top-first {\r\n position: fixed;\r\n top: 75px;\r\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\r\n}\r\n\r\n.nav-container--top-second {\r\n position: fixed;\r\n top: 0;\r\n}\r\n.nav-tab {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex: 1;\r\n color: #03dac6;\r\n letter-spacing: 0.1rem;\r\n transition: all 0.5s ease;\r\n font-size: 2vw;\r\n}\r\n\r\n.nav-tab:hover {\r\n color: #1e1f26;\r\n background: #03dac6;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.nav-tab-slider {\r\n position: absolute;\r\n bottom: 0;\r\n width: 0;\r\n height: 2px;\r\n background: #03dac6;\r\n transition: left 0.3s ease;\r\n}\r\n.background {\r\n position: absolute;\r\n height: 90vh;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: auto;\r\n}\r\n@media (min-width: 800px) {\r\n .nav h1,\r\n .slider h1 {\r\n font-size: 5vw;\r\n }\r\n\r\n .nav h2,\r\n .slider h2 {\r\n font-size: 3vw;\r\n }\r\n\r\n .nav-tab {\r\n font-size: 3vw;\r\n }\r\n}\r\n\r\n@media screen only (min-width: 360px) {\r\n .nav h1,\r\n .slider h1 {\r\n font-size: 8vw;\r\n }\r\n\r\n .nav h2,\r\n .slider h2 {\r\n font-size: 2vw;\r\n letter-spacing: 0.2vw;\r\n }\r\n\r\n .nav-tab {\r\n font-size: 1.2vw;\r\n }\r\n}\r\n.background {\r\n position: absolute;\r\n height: 100vh;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 0;\r\n}\r\n.loader span {\r\n color: #faebd7;\r\n text-shadow: 0 0 0 #faebd7;\r\n -webkit-animation: loading 1s ease-in-out infinite alternate;\r\n}\r\n\r\n@-webkit-keyframes loading {\r\n to {\r\n text-shadow: 20px 0 70px #ff0266;\r\n color: #ff0266;\r\n }\r\n}\r\n.loader span:nth-child(2) {\r\n -webkit-animation-delay: 0.1s;\r\n}\r\n.loader span:nth-child(3) {\r\n -webkit-animation-delay: 0.2s;\r\n}\r\n.loader span:nth-child(4) {\r\n -webkit-animation-delay: 0.3s;\r\n}\r\n.loader span:nth-child(5) {\r\n -webkit-animation-delay: 0.4s;\r\n}\r\n.loader span:nth-child(6) {\r\n -webkit-animation-delay: 0.5s;\r\n}\r\n.loader span:nth-child(7) {\r\n -webkit-animation-delay: 0.6s;\r\n}\r\n.loader span:nth-child(8) {\r\n -webkit-animation-delay: 0.7s;\r\n}\r\n.loader span:nth-child(9) {\r\n -webkit-animation-delay: 0.8s;\r\n}\r\n\r\n.loader span:nth-child(10) {\r\n -webkit-animation-delay: 0.9s;\r\n}\r\n.loader span:nth-child(11) {\r\n -webkit-animation-delay: 1s;\r\n}\r\n.loader span:nth-child(12) {\r\n -webkit-animation-delay: 1.1s;\r\n}\r\n.loader span:nth-child(13) {\r\n -webkit-animation-delay: 1.2s;\r\n}\r\n.loader span:nth-child(14) {\r\n -webkit-animation-delay: 1.3s;\r\n}\r\n.loader span:nth-child(15) {\r\n -webkit-animation-delay: 1.4s;\r\n}\r\n.loader span:nth-child(16) {\r\n -webkit-animation-delay: 1.5s;\r\n}\r\n.loader span:nth-child(17) {\r\n -webkit-animation-delay: 1.6s;\r\n}\r\n.loader span:nth-child(18) {\r\n -webkit-animation-delay: 1.7s;\r\n}\r\n.loader span:nth-child(19) {\r\n -webkit-animation-delay: 1.8s;\r\n}\r\n.loader span:nth-child(20) {\r\n -webkit-animation-delay: 1.9s;\r\n}\r\n.loader span:nth-child(21) {\r\n -webkit-animation-delay: 2s;\r\n}\r\n.loader span:nth-child(22) {\r\n -webkit-animation-delay: 2.1s;\r\n}\r\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Credit and Thanks:\r\nMatrix - Particles.js;\r\nSliderJS - Ettrics;\r\nDesign - Sara Mazal Web;\r\nFonts - Google Fonts\r\n*\/\r\n\r\nwindow.onload = function () {\r\n Particles.init({\r\n selector: \".background\"\r\n });\r\n};\r\nconst particles = Particles.init({\r\n selector: \".background\",\r\n color: [\"#03dac6\", \"#ff0266\", \"#000000\"],\r\n connectParticles: true,\r\n responsive: [\r\n {\r\n breakpoint: 768,\r\n options: {\r\n color: [\"#faebd7\", \"#03dac6\", \"#ff0266\"],\r\n maxParticles: 43,\r\n connectParticles: false\r\n }\r\n }\r\n ]\r\n});\r\n\r\nclass NavigationPage {\r\n constructor() {\r\n this.currentId = null;\r\n this.currentTab = null;\r\n this.tabContainerHeight = 70;\r\n this.lastScroll = 0;\r\n let self = this;\r\n $(\".nav-tab\").click(function () {\r\n self.onTabClick(event, $(this));\r\n });\r\n $(window).scroll(() => {\r\n this.onScroll();\r\n });\r\n $(window).resize(() => {\r\n this.onResize();\r\n });\r\n }\r\n\r\n onTabClick(event, element) {\r\n event.preventDefault();\r\n let scrollTop =\r\n $(element.attr(\"href\")).offset().top - this.tabContainerHeight + 1;\r\n $(\"html, body\").animate({ scrollTop: scrollTop }, 600);\r\n }\r\n\r\n onScroll() {\r\n this.checkHeaderPosition();\r\n this.findCurrentTabSelector();\r\n this.lastScroll = $(window).scrollTop();\r\n }\r\n\r\n onResize() {\r\n if (this.currentId) {\r\n this.setSliderCss();\r\n }\r\n }\r\n\r\n checkHeaderPosition() {\r\n const headerHeight = 75;\r\n if ($(window).scrollTop() > headerHeight) {\r\n $(\".nav-container\").addClass(\"nav-container--scrolled\");\r\n } else {\r\n $(\".nav-container\").removeClass(\"nav-container--scrolled\");\r\n }\r\n let offset =\r\n $(\".nav\").offset().top +\r\n $(\".nav\").height() -\r\n this.tabContainerHeight -\r\n headerHeight;\r\n if (\r\n $(window).scrollTop() > this.lastScroll &&\r\n $(window).scrollTop() > offset\r\n ) {\r\n $(\".nav-container\").addClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\r\n $(\".nav-container\").addClass(\"nav-container--top-second\");\r\n } else if (\r\n $(window).scrollTop() < this.lastScroll &&\r\n $(window).scrollTop() > offset\r\n ) {\r\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\r\n $(\".nav-container-container\").addClass(\"nav-container--top-first\");\r\n } else {\r\n $(\".nav-container\").removeClass(\"nav-container--move-up\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-first\");\r\n $(\".nav-container\").removeClass(\"nav-container--top-second\");\r\n }\r\n }\r\n\r\n findCurrentTabSelector(element) {\r\n let newCurrentId;\r\n let newCurrentTab;\r\n let self = this;\r\n $(\".nav-tab\").each(function () {\r\n let id = $(this).attr(\"href\");\r\n let offsetTop = $(id).offset().top - self.tabContainerHeight;\r\n let offsetBottom =\r\n $(id).offset().top + $(id).height() - self.tabContainerHeight;\r\n if (\r\n $(window).scrollTop() > offsetTop &&\r\n $(window).scrollTop() < offsetBottom\r\n ) {\r\n newCurrentId = id;\r\n newCurrentTab = $(this);\r\n }\r\n });\r\n if (this.currentId != newCurrentId || this.currentId === null) {\r\n this.currentId = newCurrentId;\r\n this.currentTab = newCurrentTab;\r\n this.setSliderCss();\r\n }\r\n }\r\n\r\n setSliderCss() {\r\n let width = 0;\r\n let left = 0;\r\n if (this.currentTab) {\r\n width = this.currentTab.css(\"width\");\r\n left = this.currentTab.offset().left;\r\n }\r\n $(\".nav-tab-slider\").css(\"width\", width);\r\n $(\".nav-tab-slider\").css(\"left\", left);\r\n }\r\n}\r\n\r\nnew NavigationPage();\r\n\/* Credit and Thanks:\r\nMatrix - Particles.js;\r\nSliderJS - Ettrics;\r\nDesign - Sara Mazal Web;\r\nFonts - Google Fonts\r\n*\/\r\n<\/code><\/pre>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CodePen – Navigation PageDesign\/Lesson FRONTEND TRENDS BENEFITS of TECHNOLOGIES SVELTEESBUILDNEXT.JSTYPESCRIPTVITE SVELTE another frontend JS framework ESBUILD an extremely fast JavaScript bundler NEXT.JS … <\/p>\n<p class=\"read-more-container\"><a title=\"Navigation PageDesign\/Lesson\" class=\"read-more button\" href=\"https:\/\/sahaldecode.com\/navigation-pagedesign-lesson\/#more-624\" aria-label=\"Read more about Navigation PageDesign\/Lesson\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[32,31],"tags":[],"class_list":["post-624","post","type-post","status-publish","format-standard","hentry","category-html","category-projects"],"_links":{"self":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624"}],"collection":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":1,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":4508,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/posts\/624\/revisions\/4508"}],"wp:attachment":[{"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sahaldecode.com\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}