-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLandingpages.html
215 lines (202 loc) · 10.4 KB
/
Landingpages.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147643942-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-147643942-1');
</script>
<title>Landing Pages — Nate Folsom</title>
<link rel="shortcut icon" href="faviconv2.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,700"
rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div class="mainContainer">
<!-- HEADER -->
<!-- DESKTOP NAV -->
<div class="top-fixed top-layer full-width margins desktop-nav">
<div class="desktop-nav-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 30">
<defs>
</defs>
<rect x="85" y="0" width="75" height="28.5" fill="#fff" />
<rect class="pen-logo-gray" x="89.9" y="14.46" width="2.18" height="0.94" rx="0.3"/>
<path class="pen-logo-gray" d="M124.6,20.6h19.86c.54,0,1-.26,1-.59v-.93c0-.26-.34-.46-.77-.46s-.77.2-.77.46v.6H126a1,1,0,0,0-.64-.2c-.43,0-.77.2-.77.46Z"/>
<path class="pen-logo-gray" d="M103.55,13H100.4c-.43,0-.78.21-.78.47v.72H93.78c-.23,0-.41.11-.41.25v1.07c0,.14.18.25.41.25h5.84v.72c0,.26.35.47.78.47h3.15Z"/>
<rect class="pen-logo-gray" x="104.98" y="12.13" width="40.42" height="5.6" rx="0.6"/>
<path class="pen-logo-gray" d="M149.19,10.45h3.92a0,0,0,0,1,0,0v8.39a.58.58,0,0,1-.58.58h-2.75a.58.58,0,0,1-.58-.58V10.45a0,0,0,0,1,0,0Z" transform="translate(136.22 166.09) rotate(-90)"/>
</svg>
</div>
<div class="nav-buttons">
<a href="index.html#work-start"> <h2 class="left nav background">WORK</h2></a>
<a href="About.html"> <h2 class="right nav background">ABOUT</h2></a>
<a href="Contact.html"> <h2 class="right nav background">CONTACT</h2></a>
</div>
</div>
<!-- MOBILE NAV/HEADER -->
<div class="nav-m full-width top-fixed top-layer">
<input class="top-layer" type="checkbox"/>
<label for="checkbox">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 700 120">
<defs>
</defs>
<rect x="0" y="0" width="700" height="120" fill="#fff" mask="url(#mobile-header-mask)"/>
<path class="open" d="M 600 30 l 80 0 m 0 30 l -80 0 m 0 30 l 80 0"/>
<path class="close" d="M 710 30 l 60 60 m 0 -60 l -60 60"/>
<text x="23" y="47" font-size="30px" letter-spacing="10" fill="#4d4d4d">NATE FOLSOM</text>
<text x="23" y="96" font-size="30px" letter-spacing="10" fill="#4d4d4d">DESIGN</text>
<g>
<rect class="pen-logo-gray" x="316.04" y="80.63" width="3.88" height="2.15" rx="0.6"/>
<path class="pen-logo-gray" d="M258.23,94.65H222.91a1.59,1.59,0,0,1-1.75-1.33V91.17a1.43,1.43,0,0,1,2.75,0v1.38h31.81a1.5,1.5,0,0,1,1.14-.46,1.25,1.25,0,0,1,1.37,1Z"/>
<path class="pen-logo-gray" d="M295.65,77.2h5.59a1.27,1.27,0,0,1,1.4,1.07v1.64H313a.66.66,0,0,1,.73.56v2.47a.66.66,0,0,1-.73.56H302.64v1.65a1.27,1.27,0,0,1-1.4,1.06h-5.59Z"/>
<rect class="pen-logo-gray" x="221.25" y="75.3" width="71.87" height="12.81" rx="1.21"/>
<path class="pen-logo-gray" d="M207.71,73.73h6.6a1.18,1.18,0,0,1,1.18,1.18V89.68a0,0,0,0,1,0,0h-9a0,0,0,0,1,0,0V74.91A1.18,1.18,0,0,1,207.71,73.73Z" transform="translate(129.3 292.72) rotate(-90)"/>
</g>
</svg>
<div class="menu-foldout right background">
<a href="About.html"> <h2 class="nav">ABOUT</h2></a>
<a href="Contact.html"> <h2 class="nav">CONTACT</h2></a>
<a href="index.html#work-start"> <h2 class="nav">WORK</h2></a>
</div>
</label>
</div>
<div class="under-header-spacer-m">
</div>
<!-- CASE STUDY HEADER -->
<div class="full-width background one-col cs-header">
<div class="one-col-1">
<h1>Animated Landing Page Concepts</h1>
</div>
</div>
<!-- PROJECT OVERVIEW -->
<div class="full-width no-background two-col no-color content align-center">
<div class="two-col-1 text-left">
<h2>Project Overview</h2>
<p class="">
As a design and coding exercise in JavaScript, I coded three different
landing page animations based on an idea that I had floating around in my head.
The concept at its most basic level is a grid of squares that change color or illuminate one by one until
the whole grid has changed color. </p>
</div>
<div class="two-col-2 text-left">
<h4>Roles: </h4>
<p>Visual Designer, Front-End Developer</p>
</div>
</div>
<!-- SIMPLE -->
<div class="full-width background no-color one-col-wide content">
<div class="one-col-1">
<h2>Simple</h2>
<p>This is the first and most basic version of the animation. The script
creates "cells" and assigns a random animation delay to each cell.</p>
<iframe class="full-width space" src="landingpages/indexSimple.html"></iframe>
</div>
</div>
<!-- COLORS -->
<div class="full-width no-background no-color one-col-wide content">
<div class="one-col-1">
<h2>Color</h2>
<p>Next up, the addition of colors. This time the script assigns each cell a
random color from a preselected palette as well as assigning a random delay.
Finally a masked SVG image is used so that the grid only shows through the letters. </p>
<iframe class="full-width space" src="landingpages/indexColors.html"></iframe>
</div>
</div>
<!-- CITY -->
<div class="full-width background no-color one-col-wide content">
<div class="one-col-1">
<h2>City</h2>
<p>For the final variation of the animation, I used an SVG image that I
created in Adobe Illustrator. Instead of a script that creates cells,
the script looks through the SVG image of the city and identifies windows.
Like the previous variation, the script assigns
delays and colors to the windows. City lights were one of my main inspirations
for the creation of these animations in the first place. </p>
<iframe class="full-width city space" src="landingpages/indexCity.html"></iframe>
</div>
</div>
<!-- CONCLUSION -->
<div class="full-width no-background no-color one-col content">
<div class="one-col-1">
<h2>Conclusion</h2>
<p>One of the main functions of a landing page is to engage the user and
hook them into a website or product. A unique loading animation is sure to be noticed,
but at the same time there is a delicate balance that must be upheld. Animations
consume time and budget, as well as the resources of a user's device. Slow
load times or distracting visuals can often do more harm than good to a digital experience
by boosting bounce rates. These worst-case scenarios aside, a user-centered
design solution for a landing page will not only build interest, but also
benefit visitors directly by reducing cognitive load. I am excited to do more
design and exploration into the world of animations, especially from a user
experience perspective.</p>
</div>
</div>
<div class="full-width background one-col-wide-short"></div>
<!-- CASE STUDY LINKS -->
<div class="full-width no-background one-col-wide-short">
<div class="one-col-1">
<ul class="links">
<a href="index.html#work-start"><li>Work</li></a>
<a class="nf-green" href="NeuFarms.html"><li>NeuFarms</li></a>
<a class="gs-red" href="GatheringSpot.html"><li>Gathering Spot</li></a>
<a class="" href="Landingpages.html"><li>Landing Page Concepts</li></a>
<a class="cc-blue" href="Costco.html"><li>Costco</li></a>
<a class="hm-red" target="_blank" href="https://codepen.io/nate-folsom/pen/GRKEeOw"><li>Hamburger Menu (codepen)</li></a>
<a class="mm-yellow" href="MoonMotorcycles.html"><li>Moon Motorcycles</li></a>
</ul>
</div>
</div>
<div class="bottom-spacer">
</div>
<footer>
<svg class="full-width footer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 100">
<defs>
<mask id="shape-mask-footer">
<rect x="0" y="0" width="800" height="100" fill="#fff"/>
<circle class="footer-circle" cx="225" cy="50" r="10"/>
<circle class="footer-circle" cx="250" cy="50" r="10"/>
<circle class="footer-circle" cx="275" cy="50" r="10"/>
<circle class="footer-circle" cx="300" cy="50" r="10"/>
<circle class="footer-circle" cx="325" cy="50" r="10"/>
<circle class="footer-circle" cx="350" cy="50" r="10"/>
<circle class="footer-circle" cx="375" cy="50" r="10"/>
<circle class="footer-circle" cx="400" cy="50" r="10"/>
<circle class="footer-circle" cx="425" cy="50" r="10"/>
<circle class="footer-circle" cx="450" cy="50" r="10"/>
<circle class="footer-circle" cx="475" cy="50" r="10"/>
<circle class="footer-circle" cx="500" cy="50" r="10"/>
<circle class="footer-circle" cx="525" cy="50" r="10"/>
<circle class="footer-circle" cx="550" cy="50" r="10"/>
<circle class="footer-circle" cx="575" cy="50" r="10"/>
</mask>
<style>
</style>
</defs>
<!-- SVG SHAPES -->
<rect x="0" y="0" width="800" height="200" fill="#fff" mask="url(#shape-mask-footer)"/>
<text x="225" y="56" fill="#fff" text-anchor="middle">©</text>
<text x="250" y="56" fill="#fff" text-anchor="middle">N</text>
<text x="275" y="56" fill="#fff" text-anchor="middle">A</text>
<text x="300" y="56" fill="#fff" text-anchor="middle">T</text>
<text x="325" y="56" fill="#fff" text-anchor="middle">E</text>
<text x="350" y="56" fill="#fff" text-anchor="middle">F</text>
<text x="375" y="56" fill="#fff" text-anchor="middle">O</text>
<text x="400" y="56" fill="#fff" text-anchor="middle">L</text>
<text x="425" y="56" fill="#fff" text-anchor="middle">S</text>
<text x="450" y="56" fill="#fff" text-anchor="middle">O</text>
<text x="475" y="56" fill="#fff" text-anchor="middle">M</text>
<text x="500" y="56" fill="#fff" text-anchor="middle">2</text>
<text x="525" y="56" fill="#fff" text-anchor="middle">0</text>
<text x="550" y="56" fill="#fff" text-anchor="middle">1</text>
<text x="575" y="56" fill="#fff" text-anchor="middle">9</text>
</svg>
</footer>
</div>
</body>
</html>