Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
View GitHub Profile
View css3-working-clock.markdown
@stanwmusic
stanwmusic / index.html
Created Apr 8, 2022
Parallax scroll animation
View index.html
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice">
<defs>
<!-- Scene 1 Gradient -->
<linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3"
gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse">
<stop offset="0.07" stop-color="#9c536b" />
<stop offset="0.98" stop-color="#d98981" />
</linearGradient>
<radialGradient id="bg_grad" cx="375" cy="-35" r="318.69" gradientUnits="userSpaceOnUse">
<stop offset="0.1" stop-color="#F5C54E" id="sun" />
@stanwmusic
stanwmusic / index.html
Created Feb 28, 2022
Javascript Clock with Milliseconds
View index.html
<body onLoad="initClock()">
<div id="timedate">
<a id="mon">January</a>
<a id="d">1</a>,
<a id="y">0</a><br />
<a id="h">12</a> :
<a id="m">00</a>:
<a id="s">00</a>:
<a id="mi">000</a>
View css3-working-clock.markdown
View countdown-timer.markdown
@stanwmusic
stanwmusic / index.html
Created Feb 24, 2022
Interactive / Selectable Map
View index.html
<input id="hi" value="hi" name="state" style="display: none;"><input id="ak" value="ak" name="state" style="display: none;"><input id="fl" value="fl" name="state" style="display: none;"><input id="sc" value="sc" name="state" style="display: none;"><input id="ga" value="ga" name="state" style="display: none;"><input id="al" value="al" name="state" style="display: none;"><input id="nc" value="nc" name="state" style="display: none;"><input id="tn" value="tn" name="state" style="display: none;"><input id="ri" value="ri" name="state" style="display: none;"><input id="ct" value="ct" name="state" style="display: none;"><input id="ma" value="ma" name="state" style="display: none;"><input id="me" value="me" name="state" style="display: none;"><input id="nh" value="nh" name="state" style="display: none;"><input id="vt" value="vt" name="state" style="display: none;"><input id="ny" value="ny" name="state" style="display: none;"><input id="nj" value="nj" name="state" style="display: none;"><input id="pa" value="pa" name="
@stanwmusic
stanwmusic / index.html
Created Feb 24, 2022
Interactive / Selectable Map
View index.html
<input id="hi" value="hi" name="state" style="display: none;"><input id="ak" value="ak" name="state" style="display: none;"><input id="fl" value="fl" name="state" style="display: none;"><input id="sc" value="sc" name="state" style="display: none;"><input id="ga" value="ga" name="state" style="display: none;"><input id="al" value="al" name="state" style="display: none;"><input id="nc" value="nc" name="state" style="display: none;"><input id="tn" value="tn" name="state" style="display: none;"><input id="ri" value="ri" name="state" style="display: none;"><input id="ct" value="ct" name="state" style="display: none;"><input id="ma" value="ma" name="state" style="display: none;"><input id="me" value="me" name="state" style="display: none;"><input id="nh" value="nh" name="state" style="display: none;"><input id="vt" value="vt" name="state" style="display: none;"><input id="ny" value="ny" name="state" style="display: none;"><input id="nj" value="nj" name="state" style="display: none;"><input id="pa" value="pa" name="
View analog-clock.markdown

Analog Clock

For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there.

A Pen by Stan Williams on CodePen.

License.