Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
FRONTEND TRENDS 2021
BENEFITS of TECHNOLOGIES
PWA
GraphQL
NEXT
TYPESCRIPT
DENO
PWA
the best of both worlds...
GraphQL
a query language for APIs
NEXT
framework for Production
TYPESCRIPT
giving you better tooling at any scale
DENO
a modern runtime
css
* { 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; } .nav h2, .slider h2 { font-size: 2vw; letter-spacing: 0.5rem; font-family: "ROBOTO", sans-serif; font-weight: 300; color: #faebd7; z-index: 4; } 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-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: 5px; background: #03dac6; transition: left 0.3s ease; } .background { position: absolute; height: 100vh; 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; }
JavaScript
window.onload = function () { Particles.init({ selector: ".background" }); }; var 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) { $(".header").addClass("header--scrolled"); } else { $(".header").removeClass("header--scrolled"); } let offset = $(".nav").offset().top + $(".nav").height() - this.tabContainerHeight - headerHeight; if ( $(window).scrollTop() > this.lastScroll && $(window).scrollTop() > offset ) { $(".header").addClass("et-header--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 ) { $(".header").removeClass("et-header--move-up"); $(".nav-container").removeClass("nav-container--top-second"); $(".et-hero-tabs-container").addClass( "et-hero-tabs-container--top-first" ); } else { $(".header").removeClass("header--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: Matrix - Particles.js; Slider - Ettrics; Fonts - Google Fonts */
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航页面设计-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号