forked from codrops/CollapsingLogo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·117 lines (117 loc) · 7.42 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapsing Logo Effect | Codrops</title>
<meta name="description" content="A recreation of the collapsing logo effect seen on PracticalVR." />
<meta name="keywords" content="logo, animation, effect, demo, web developemnt, animejs" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<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>
</head>
<body class="loading">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<svg id="icon-github" viewBox="0 0 33 33">
<title>github</title>
<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
</svg>
<svg id="icon-arrowup" viewBox="0 0 49 46">
<title>arrow up</title>
<path d="M49 45.946H0L24.5.054z"></path>
</svg>
</svg>
<main>
<div class="content">
<div class="sidebar">
<nav class="menu">
<a href="#" class="menu__item menu__item--current">Agency</a>
<a href="#" class="menu__item">Story</a>
<a href="#" class="menu__item">Contact</a>
</nav>
<a class="pater" href="http://www.elegantthemes.com/affiliates/idevaffiliate.php?id=17972_5_1_20">
<p class="pater__description">Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever. <strong>Learn more</strong></p>
<div class="pater__img"><div class="pater__img-inner"></div></div>
</a>
</div>
<div class="slideshow">
<div class="slideshow__item slideshow__item--featured">
<div class="slideshow__item-img slideshow__item-img--larger">
<div class="slideshow__item-img-inner" style="background-image: url(img/1.jpg);"></div>
</div>
<span class="slideshow__item-number">#1</span>
<div class="slideshow__item-titlewrap slideshow__item-titlewrap--featured">
<h3 class="slideshow__item-title slideshow__item-title--larger">Werry & Smith</h3>
<p class="slideshow__item-subtitle">Technical portfolio design and implementation</p>
</div>
</div>
<div class="slideshow__item">
<div class="slideshow__item-img">
<div class="slideshow__item-img-inner" style="background-image: url(img/2.jpg);"></div>
</div>
<span class="slideshow__item-number">#2</span>
<div class="slideshow__item-titlewrap">
<h3 class="slideshow__item-title">Gimpson Technology</h3>
<p class="slideshow__item-subtitle">Future technology assessment and consultation</p>
</div>
</div>
<nav class="slideshow__nav">
<button class="slideshow__nav-item slideshow__nav-item--current">1</button>
<button class="slideshow__nav-item">2</button>
<button class="slideshow__nav-item">3</button>
<button class="slideshow__nav-item">4</button>
<button class="slideshow__nav-item">5</button>
<button class="slideshow__nav-item">6</button>
<button class="slideshow__nav-item">7</button>
<button class="slideshow__nav-item">8</button>
</nav>
</div><!-- /slideshow -->
</div><!-- /content -->
<div class="intro">
<!-- This element animates: -->
<div class="intro__box"></div>
<a class="intro__logo">
<svg class="icon icon--arrowup"><use xlink:href="#icon-arrowup"></use></svg>
</a>
<div class="intro__title-wrap">
<h1 class="intro__title animatable">Vonnov</h1>
<div class="intro__subtitle-wrap animatable">
<h3 class="intro__subtitle">Collapsing Logo Effect</h3>
<p class="intro__info">Inspired by <a href="https://experience.practicalvr.com/">practicalvr</a></p>
</div>
<div class="codrops-links animatable">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GridLayoutMotion/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=35022" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<a class="intro__enter animatable">Enter</a>
</div>
<div class="intro__content intro__content--second animatable">
<h3 class="intro__content-title animatable">Philosophy</h3>
<p class="intro__content-text animatable">Banjo ethical readymade, microdosing subway tile pinterest glossier put a bird on it retro direct trade blog tumeric wayfarers mustache</p>
<p class="intro__content-text animatable">Thundercats hella sartorial occupy portland DIY raclette mlkshk poke DIY chambray franzen tattooed thundercats master</p>
</div>
<div class="intro__content intro__content--forth animatable">
<h3 class="intro__content-title animatable">About</h3>
<p class="intro__content-text animatable">We are a quadruple award winning hyper active super duper cryptocurrency consultation and technology assessment firm that will help you understand what's going on in the present and future of finances</p>
</div>
<div class="intro__location animatable">9529 Vernon Court, New York, NY 10027</div>
<div class="intro__social animatable">
<a href="https://www.instagram.com/codropsss" class="intro__social-item">Instagram</a>
<a href="https://twitter.com/codrops" class="intro__social-item">Twitter</a>
</div>
<a class="intro__github animatable" href="https://github.com/codrops/CollapsingLogo/" title="Find this project on GitHub">GitHub</a>
</div>
</main>
<script src="js/anime.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>