animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素。如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性。又或者你想为它添加一些炫酷的动画。这时你可能会对 jQuery 感兴趣,因为它会帮你做大部分的事情。但并不必这样!事实上只用几行代码就可以解决这件事情。
在这篇文章中,我会向你们展示如何用 原生Javascript,CSS 和 HTML 去创建一个带动画的固顶导航菜单。最后它会在页面向下滚动时上滑隐藏起来,页面向上滚动时下滑回到页面上(以一种时髦的透明效果)。许多流行的网站采用了这种技术,例如Medium和Hacker Noon。
相信阅读完你就会在你的设计中尝试了,希望能有很好的效果。如果你等不及可以直接看文章末尾的 demo
固顶导航菜单:基本HTML结构
下面是我们将要使用的 HTML 骨架,很普通的代码。
添加一点样式
让我们为主要的元素添加一些样式。
主容器
我们需要移除浏览器的默认样式并设置主容器的 width 为100%。
*{
box-sizing:border-box;
padding: 0;
margin: 0;
}
.container{
width: 100%;
}
横幅容器
它包裹在导航菜单的外面,位置是固定的,当页面垂直滚动时会上滑隐藏或下滑展现导航菜单。我们给它添加一个 z-index 属性来保证它会展现在页面的最顶层。
.banner-wrapper {
z-index: 4;
transition: all 300ms ease-in-out;
position: fixed;
width: 100%;
}
横幅部分
它包含导航菜单。当页面上下滚动时,CSS 的 transition 属性会让位置和背景颜色的改变带有动画效果。
.banner {
height: 77px;
display: flex;
flex-direction: column;
justify-content: space-around;
background: rgba(162, 197, 35, 1);
transition: all 300ms ease-in-out;
}
内容部分
这部分包含背景图片和文本。我们会在文章的后面部分为它添加视差效果。
.content {
background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
background-size: cover;
padding-top: 100%;
}
让菜单动起来
我们要做的第一件事是给滚动事件添加一个事件处理器,以便在用户滚动页面的时候相应的展示或隐藏菜单。我们把所有代码用即时执行函数 IIFE 封装起来以免与同一页面的其他代码发生冲突。
(() => {
'use strict';
const handler = () => {
//DOM manipulation code here };
window.addEventListener('scroll', handler, false);
})();
设置一些初始变量
refOffset 表示用户向下滚动页面的距离。这个值会在页面加载时初始化为 0。bannerHeight 来储存菜单的高度。同样我们需要 .banner-wrapper 和 .banner 两个DOM元素的引用。
let refOffset = 0;
let visible = true;
const bannerHeight = 77;
const bannerWrapper = document.querySelector('.banner-wrapper');
const banner = document.querySelector('.banner');
确定滚动方向
接下来我们需要确定滚动的方向以便我们能相应的展示和隐藏菜单。
我们以 newOffset 变量开始。在页面加载的时它会被设置为 window.scrollY 的值 —— 当前页面垂直滚动的像素个数(初始为 0)。当用户滚动时,newOffset 会相应的增加或减少。如果 newOffset 大于 bannerHeight ,这时我们就知道菜单已经滚动到视图外了。
const newOffset = window.scrollY;
if (newOffset > bannerHeight) {
// Menu out of view} else {
// Menu in view}
向下滚动会使 newOffset 大于 refOffset ,导航菜单应该上滑隐藏。向上滚动会使 newOffset 小于 refOffset ,导航菜单应该以透明效果滑回视图。所以我们需要不断通过 newOffset 来更新 refOffset ,来保持对用户滚动的距离的追踪。
if (newOffset > bannerHeight) {
// Menu out of view if(newOffset > refOffset) {
// Hide the menu } else if (newOffset < refOffset) {
// Slide menu back down }
refOffset = newOffset;
} else {
// Menu in view}
菜单动画
最后,添加 animateIn 和 animateOut 两个方法,分别用来展示和隐藏菜单。我们也应该保证当菜单位于页面顶部的时候移除它的透明效果。
if (newOffset > bannerHeight) {
if (newOffset > refOffset) {
animateOut();
} else {
animateIn();
}
refOffset = newOffset;
} else {
banner.style.backgroundColor = 'rgba(162, 197, 35, 1)';
}
下面是动画效果的函数代码
function animateOut() {
bannerWrapper.style.msTransform = `translateY(-${bannerHeight}px)`;
bannerWrapper.style.transform = `translateY(-${bannerHeight}px)`;
bannerWrapper.style.webkitTransform = `translateY(-${bannerHeight}px)`;
bannerWrapper.style.MozTransform = `translateY(-${bannerHeight}px)`;
banner.style.background = 'rgba(162, 197, 35, 0.6)';
}
function animateIn() {
bannerWrapper.style.transform = 'translateY(0px)';
bannerWrapper.style.msTransform = 'translateY(0px)';
bannerWrapper.style.webkitTransform = 'translateY(0px)';
bannerWrapper.style.MozTransform = 'translateY(0px)';
banner.style.background = 'rgba(162, 197, 35, 0.6)';
}
你可能考虑使用 CSS 的 class 来达到同样的效果,你可以修改相应的代码来实现。在本篇文章中,我选择了使用 JavaScript。
演示
这里是导航菜单的演示效果:Create an Animated Sticky Navigation Menu with Vanilla JavaScript
总结
本文描述了如何仅仅用几行原生 JavaScript 代码(不需要 jQuery)来设计一个带动画的导航菜单。菜单会在页面向下滚动时上滑隐藏,页面向上滚动时下滑回视图并带有透明效果。通过监听垂直方向的滚动并改变 DOM 元素相应的 CSS 属性来实现功能。这样的定制化解决方案会给你更大的自由空间,让你可以根据自己的需求灵活的进行设计。
animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单相关推荐
- 弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用Java ...
- animate用法 js原生_animateplus.js 教程
animateplus(Animate Plus)是一个基于现在的网络的动画模块.Animate Plus 是一个专注于性能和创作灵活性的 JavaScript 动画库.它的目标是提供稳定的 60 F ...
- javascript创建类_如何使用JavaScript创建吹气效果
javascript创建类 Have you ever wondered how you can create a realistic air blowing effect with JavaScri ...
- WPS.JS宏应用案例01:创建带超链接的工作表目录
HI,大家好,我是星光. 之前给大家分享了如何使用函数或VBA创建带超链接的工作表目录,今天再给大家分享一下,如何使用WPS的JS宏实现同样的目的. 复制运行以下代码,即可在当前工作表的A列创建如上图 ...
- animate用法 js原生_原生js实现jq的animate效果.js
原生js实现jq的animate效果(有一定bug未修复,有时间补上) //原生js实现jq的animate效果 /** *@param obj 执行动画的元素 *@param css JSON数值对 ...
- animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
- animate用法 js原生_animate动画、原生JS实现轮播图
写在前面 最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
- java js 正则表达式_如何在JavaScript与Java中使用正则表达式
如何在JavaScript与Java中使用正则表达式 发布时间:2021-02-11 13:16:01 来源:亿速云 阅读:69 作者:Leah 如何在JavaScript与Java中使用正则表达式? ...
- java js 转换_[Java教程]javascript 类型转换。
[Java教程]javascript 类型转换. 0 2016-10-11 18:00:06 目录: 1 : 伪对象 2 : 转换为字符串 3 : 数字转字符串 4 : 转换为数字 5 : 转换为Bo ...
最新文章
- 如何以编程方式退出WPF应用程序?
- BZOJ.1109.[POI2007]堆积木Klo(DP LIS)
- debian 8 mysql_在Debian 8系统安装 nginx + php + mysql(MariaDB) 基本Web环境
- 使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端
- 飞秋下载2010正式版_飞秋下载
- phpcms某处逻辑问题导致getshell
- OpenCV实现图像翻转
- CF1463-D. Pairs
- disruptor框架为什么不流行_五笔输入法那么厉害,为什么现在不流行了?
- 使用Comsol完成固体火箭装药的燃面推移
- 鸿蒙系统充电动画,荣耀智慧屏首发抢先体验:电视只是小功能,鸿蒙系统才是真亮点...
- 电脑文档需要服务器登录,云服务器需要用电脑登录
- 各大搜索引擎登陆入口
- 看最近国内名人们对四川地震灾区的捐款
- 跨考计算机复试自我介绍,复试之自我介绍_跨考网
- 工作五年的我,为什么要转行学网络安全技术呢
- 苹果CMS搭建影视网站教程及注意事项
- 电脑术语 IT人员必知
- 怎么删除win10系统的更新缓存文件?
- 光学元件工艺管理系统源码:基于springboot+Vue前后端分离项目