CSSMarqueeMenu/index.html at master · danielbenjamins/CSSMarqueeMenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS-only Marquee Menu Effect | Codrops</title>
	<meta name="description" content="A menu with a css-only marquee hover effect" />
	<meta name="keywords" content="marquee, css, animation, loop, infinite, hover, menu, navigation" />
	<meta name="author" content="Codrops" />
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="https://use.typekit.net/zhq0vyf.css">
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script>
	document.documentElement.className = "js";
	var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
	supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
	</script>
	<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
</head>

<body class="demo-1">
	<main>
		<div class="frame">
			<div class="frame__title-wrap">
				<h1 class="frame__title">CSS-only Marquee Menu Effect</h1>
				<p class="frame__info">based on Francesco Zagami's <a href="https://dribbble.com/shots/9524661-Homepage-Menu-Interaction">Dribbble shot</a></p>
			</div>
			<div class="frame__links">
				<a href="https://tympanus.net/codrops/?p=48796">Article</a>
				<a href="https://github.com/codrops/CSSMarqueeMenu/">GitHub</a>
			</div>
		</div>
		<nav class="menu">
			<div class="menu__item">
				<a class="menu__item-link">Showreel</a>
				<img class="menu__item-img" src="img/1.jpg" alt="Some image"/>
				<div class="marquee">
					<div class="marquee__inner" aria-hidden="true">
						<span>Showreel</span>
						<span>Showreel</span>
						<span>Showreel</span>
						<span>Showreel</span>
					</div>
				</div>
			</div>
			<div class="menu__item">
				<a class="menu__item-link">Case Studies</a>
				<img class="menu__item-img" src="img/2.jpg" alt="Some image"/>
				<div class="marquee">
					<div class="marquee__inner" aria-hidden="true">
						<span>Case Studies</span>
						<span>Case Studies</span>
						<span>Case Studies</span>
						<span>Case Studies</span>
					</div>
				</div>
			</div>
			<div class="menu__item">
				<a class="menu__item-link">Experiments</a>
				<img class="menu__item-img" src="img/3.jpg" alt="Some image"/>
				<div class="marquee">
					<div class="marquee__inner" aria-hidden="true">
						<span>Experiments</span>
						<span>Experiments</span>
						<span>Experiments</span>
						<span>Experiments</span>
					</div>
				</div>
			</div>
			<div class="menu__item">
				<a class="menu__item-link">Our Crew</a>
				<img class="menu__item-img" src="img/4.jpg" alt="Some image"/>
				<div class="marquee">
					<div class="marquee__inner" aria-hidden="true">
						<span>The Crew</span>
						<span>The Crew</span>
						<span>The Crew</span>
						<span>The Crew</span>
					</div>
				</div>
			</div>
			<div class="menu__item">
				<a class="menu__item-link">Contact</a>
				<img class="menu__item-img" src="img/5.jpg" alt="Some image"/>
				<div class="marquee">
					<div class="marquee__inner" aria-hidden="true">
						<span>Contact</span>
						<span>Contact</span>
						<span>Contact</span>
						<span>Contact</span>
					</div>
				</div>
			</div>
		</nav>
		<div class="frame">
			<p>Images by <a href="https://www.instagram.com/byfoul/">Frankie Cordoba AKA Foulster</a></p>
		</div>
	</main>
	<!--script src="https://tympanus.net/codrops/adpacks/cda.js"></script-->
</body>

</html>