SVG滑动导航

下载代码

html

css

分享到微信朋友圈

html

css

/*   DESKTOP DEMO OF SVG EFFECTS. */

@import url("https://fonts.googleapis.com/css?family=Lato");

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: #9387ab;
	font: 400 10px "Lato", sans-serif;
	text-align: center;
}

.header {
	width: 100%;
	height: 75px;
	background: #17141d;
	opacity: 0.95;
	overflow: hidden;
	-webkit-box-shadow: #333 1px 3px 4px;
	-moz-box-shadow: #333 1px 3px 4px;
	box-shadow: #333 1px 3px 4px;
}

.content {
	width: 100%;
	height: calc(100% - 75px);
	background-image: url(https://picsum.photos/1000/700);
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #9387ab;
}
h1 {
	letter-spacing: 4px;
	padding: 1em;
	color: white;
	background-color: #17141d;
	opacity: 0.8;
}

svg.line-top {
	width: 100%;
	background-color: #17141d;
}
svg.line-bottom {
	width: 100%;
}
.menu {
	width: 750px;
	margin: 0 auto;
}
ul {
	padding: 0;
	margin: 0;
}

ul li {
	margin: 0;
	padding: 10px 0 10px 0;
	width: 25%;
	height: 10px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
	cursor: pointer;
	display: inline-block;
	letter-spacing: 3.5px;
	transition: all 0.5s ease-out;
}

li.active {
	color: orange;
	transform: scale(1.1);
}

polygon {
	stroke-width: 2px;
	stroke: orange;
	fill: orange;
}

@media (max-device-width: 991px) {
	.header {
		height: 64px;
	}

body {
		font-size: 0.4em;
	}
	.content {
		height: calc(100% - 64px);
	}
}

JavaScript

const lis = document.querySelectorAll("li");
const lbs = document.querySelectorAll(".lb");
const ul = document.querySelector("ul");
const lineDash = document.querySelector(".line-dash");
const p1 = document.querySelector(".p1");
const p2 = document.querySelector(".p2");

var dashOrigin = -35; //pixels
var selectedLi = -35; //pixels
var speed = 500; //move this many pixels in one second.
var distance = 0;
var time = 0;

// initial animation and class for HOME
TweenLite.to(lbs[0], 0.6, {
					y: -43,
					ease: Bounce.easeOut,
					delay: 1
				});

lis[0].classList.add("active");

//push all the bottom lines down.
function pushDownLb() {
	for(let k = 0; k < lbs.length; ++k)
		TweenLite.to(lbs[k], 0.5, {
					y: 0,
					ease:  Power3.easeOut
				});
}

ul.addEventListener(
	"mouseleave",
	function(e) {
		// to avoid a bug in chrome that sometimes triggers mouseleave on click
		// and the relatedTarget comes up null
		if (e.relatedTarget) {
			distance = Math.abs(dashOrigin - selectedLi);
			time = distance / speed;
			dashOrigin = selectedLi;
			if (time) {
				// overlaping tweens would give a zero time
				TweenLite.to(lineDash, time, {
					strokeDashoffset: selectedLi,
					ease: Bounce.easeOut
				});
			} //if
		} //if
	},
	false
);

for (let i = 0; i < 4; ++i) {
	lis[i].addEventListener("mouseover", function() {
		distance = Math.abs(-250 * i - 35 - dashOrigin);
		time = distance / speed;
		dashOrigin = -250 * i - 35;
		if (time) {
			TweenLite.to(lineDash, time, {
				strokeDashoffset: -250 * i - 35,
				ease: Bounce.easeOut
			});
		} //if
	});

lis[i].addEventListener("click", function() {
		selectedLi = -250 * i - 35;
		pushDownLb();
		let current = document.getElementsByClassName("active");
		current[0].classList.remove("active");
		lis[i].classList.add("active");
		TweenLite.to(lbs[i], 0.5, {
					y: -43,
					ease: Bounce.easeOut
				});
	});
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg