Skip to content

Commit 4503330

Browse files
andrewbranchandrewbranch
committed
Improve smoothness
1 parent c1e446e commit 4503330

File tree

4 files changed

+65
-98
lines changed

4 files changed

+65
-98
lines changed

‎index.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,10 +141,12 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
141141
</g>
142142
</svg>
143143
<div id="signal">
144-
<div></div>
145-
<div></div>
146-
<div></div>
147-
<div></div>
144+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xml:space="preserve">
145+
<circle fill="none" cx="50" cy="50" r="48"/>
146+
<circle fill="none" cx="50" cy="50" r="40"/>
147+
<circle fill="none" cx="50" cy="50" r="30"/>
148+
<circle fill="none" cx="50" cy="50" r="20"/>
149+
</svg>
148150
</div>
149151
</div>
150152
<div class="col-xs-4" id="lightbulb-column">
@@ -315,19 +317,19 @@ <h1 class="huge">What is Switcha<span class="blue">BLE</span>?</h1>
315317
<div id="bio-container">
316318
<div id="bio-andrew">
317319
<h2>Andrew Branch</h2>
318-
<h6>iOS &bull; Website &bull; Branding &amp; Visual Design</h6>
320+
<h6>iOS &bull; Branding &amp; Visual Design</h6>
319321
</div>
320322
<div id="bio-derek">
321323
<h2>Derek Albritton</h2>
322-
<h6>PCB design &bull; Wireless engineering &bull; 3D enclosure</h6>
324+
<h6>Wireless engineering &bull; 3D enclosure</h6>
323325
</div>
324326
<div id="bio-brett">
325327
<h2>Brett Byer</h2>
326-
<h6>Embedded software &bull; Digital design &bull; PCB assembly</h6>
328+
<h6>Embedded software &bull; PCB design</h6>
327329
</div>
328330
<div id="bio-esteban">
329331
<h2>Esteban Porres</h2>
330-
<h6>Team leader &bull; Android app &bull; Communications protocol</h6>
332+
<h6>Team leader &bull; Android app</h6>
331333
</div>
332334
</div>
333335
</section>

‎stylesheets/main.less

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -306,13 +306,27 @@ header {
306306
}
307307
#signal {
308308
z-index: -1;
309-
margin-top: -7em;
309+
margin-top: -10em;
310310
margin-left: 7em;
311-
div {
312-
border: 3px solid @blue;
313-
border-radius: 50%;
314-
position: absolute;
315-
z-index: -1;
311+
svg {
312+
margin: -75em;
313+
height: 150em;
314+
}
315+
circle {
316+
// -ms-transform-origin: 50em 50em;
317+
// -moz-transform-origin: 50em 50em;
318+
// -webkit-transform-origin: 50em 50em;
319+
// transform-origin: 50em 50em;
320+
// margin-top: -50em;
321+
// margin-left: -50em;
322+
// width: 100em;
323+
// height: 100em;
324+
// border: 3px solid @blue;
325+
// border-radius: 50%;
326+
// position: absolute;
327+
// z-index: -1;
328+
stroke: @blue;
329+
stroke-width: .1;
316330
}
317331
}
318332
}

‎stylesheets/skrollr-xs.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ nav a:not(:first-child) { -skrollr-animation-name: nav-links; }
33
@-skrollr-keyframes nav-links {
44
8900 { opacity: 1; }
55
9000 { opacity: 0; }
6+
21000 { opacity: 0; }
7+
23500 { opacity: 0; }
68
}

‎stylesheets/skrollr.css

Lines changed: 33 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,11 @@ header { -skrollr-animation-name: header; }
3434
#svg-lightbulb .light * { -skrollr-animation-name: lightbulb-light; }
3535
#svg-phone { -skrollr-animation-name: svg-phone; }
3636
#signal { -skrollr-animation-name: signal; }
37-
#signal div:nth-child(4) { -skrollr-animation-name: signal-1; }
38-
#signal div:nth-child(3) { -skrollr-animation-name: signal-2; }
39-
#signal div:nth-child(2) { -skrollr-animation-name: signal-3; }
40-
#signal div:nth-child(1) { -skrollr-animation-name: signal-4; }
37+
#signal svg { -skrollr-animation-name: signal-svg; }
38+
#signal circle:nth-child(4) { -skrollr-animation-name: signal-1; }
39+
#signal circle:nth-child(3) { -skrollr-animation-name: signal-2; }
40+
#signal circle:nth-child(2) { -skrollr-animation-name: signal-3; }
41+
#signal circle:nth-child(1) { -skrollr-animation-name: signal-4; }
4142
#lightbulb-column { -skrollr-animation-name: lightbulb-column; }
4243
#phone-column { -skrollr-animation-name: phone-column; }
4344

@@ -230,22 +231,7 @@ header { -skrollr-animation-name: header; }
230231

231232
@-skrollr-keyframes scene3 {
232233
8999 { opacity: 0; }
233-
9000 {
234-
opacity: 1;
235-
-webkit-transform: none;
236-
}
237-
18500 { -webkit-transform: !translateZ(0); }
238-
}
239-
240-
@-skrollr-keyframes scene3-row {
241-
9000 {
242-
-webkit-backface-visibility: visible;
243-
-webkit-perspective: none;
244-
}
245-
18500 {
246-
-webkit-backface-visibility: hidden;
247-
-webkit-perspective: !1000;
248-
}
234+
9000 { opacity: 1; }
249235
}
250236

251237
@-skrollr-keyframes explanation {
@@ -276,10 +262,10 @@ header { -skrollr-animation-name: header; }
276262
@-skrollr-keyframes explanation-5 {
277263
20000 {
278264
opacity: 0;
279-
margin-left: 0em;
265+
transform: translate3d(0em, 0, 0);
280266
}
281267
30000 {
282-
margin-left: 155em;
268+
transform: translate3d(155em, 0, 0);
283269
opacity: 1;
284270
}
285271
}
@@ -304,76 +290,39 @@ header { -skrollr-animation-name: header; }
304290
18500 { display: block; }
305291
}
306292

293+
@-skrollr-keyframes signal-svg {
294+
18500 { width: 0em; margin-left: 0em; }
295+
23500 { width: 150em; margin-left: -75em; }
296+
}
297+
307298
@-skrollr-keyframes signal-1 {
308-
18500 {
309-
transform: scale(0);
310-
opacity: 1;
311-
}
312-
22500 {
313-
transform: scale(1);
314-
opacity: 0;
315-
}
299+
18500 { opacity: 1; }
300+
21500 { opacity: 0; }
316301
}
317302

318303
@-skrollr-keyframes signal-2 {
319-
19500 {
320-
width: 0em;
321-
height: 0em;
322-
margin-top: 0em;
323-
margin-left: 0em;
324-
opacity: 1;
325-
}
326-
23500 {
327-
width: 200em;
328-
height: 200em;
329-
margin-top: -100em;
330-
margin-left: -100em;
331-
opacity: 0;
332-
}
304+
19500 { opacity: 1; }
305+
22000 { opacity: 0; }
333306
}
334307

335308
@-skrollr-keyframes signal-3 {
336-
20500 {
337-
width: 0em;
338-
height: 0em;
339-
margin-top: 0em;
340-
margin-left: 0em;
341-
opacity: 1;
342-
}
343-
24500 {
344-
width: 200em;
345-
height: 200em;
346-
margin-top: -100em;
347-
margin-left: -100em;
348-
opacity: 0;
349-
}
309+
20500 {opacity: 1; }
310+
23000 { opacity: 0; }
350311
}
351312

352313
@-skrollr-keyframes signal-4 {
353-
21500 {
354-
width: 0em;
355-
height: 0em;
356-
margin-top: 0em;
357-
margin-left: 0em;
358-
opacity: 1;
359-
}
360-
25500 {
361-
width: 200em;
362-
height: 200em;
363-
margin-top: -100em;
364-
margin-left: -100em;
365-
opacity: 0;
366-
}
314+
21000 { opacity: 1; }
315+
23500 { opacity: 0; }
367316
}
368317

369318
@-skrollr-keyframes phone-column {
370-
20000 { margin-left: 0em; }
371-
30000 { margin-left: -150em; }
319+
20000 { transform: translate3d(0em, 0, 0); }
320+
30000 { transform: translate3d(-150em, 0, 0); }
372321
}
373322

374323
@-skrollr-keyframes lightbulb-column {
375-
20000 { margin-right[swing]: 0em; }
376-
30000 { margin-right[swing]: 150em; }
324+
20000 { transform[swing]: translate3d(0em, 0, 0); }
325+
30000 { transform[swing]: translate3d(-150em, 0, 0); }
377326
}
378327

379328
@-skrollr-keyframes scene4 {
@@ -395,12 +344,12 @@ header { -skrollr-animation-name: header; }
395344
}
396345

397346
@-skrollr-keyframes bios {
398-
30000 { transform: translateX(-300%); }
399-
32500 { transform: translateX(-297%); }
400-
33000 { transform: translateX(-200%); }
401-
35500 { transform: translateX(-197%); }
402-
36000 { transform: translateX(-100%); }
403-
38500 { transform: translateX(-97%); }
404-
39000 { transform: translateX(0%); }
405-
41500 { transform: translateX(3%); }
347+
30000 { transform: translate3d(-300%, 0, 0); }
348+
32500 { transform: translate3d(-297%, 0, 0); }
349+
33000 { transform: translate3d(-200%, 0, 0); }
350+
35500 { transform: translate3d(-197%, 0, 0); }
351+
36000 { transform: translate3d(-100%, 0, 0); }
352+
38500 { transform: translate3d(-97%, 0, 0); }
353+
39000 { transform: translate3d(0%, 0, 0); }
354+
41500 { transform: translate3d(3%, 0, 0); }
406355
}

0 commit comments

Comments
 (0)