A Pen by Stan Williams on CodePen.
Stan Williams stanwmusic
🏠
stanwmusic
/ fixed-sticky-header-when-scrolling.markdown
Created
April 8, 2022 07:08
Fixed sticky header when scrolling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.
This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock
A Pen by Stan Williams on CodePen.
A how-to for a countdown clock.
A Pen by Stan Williams on CodePen.
A Pen by Stan Williams on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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=" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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=" |
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.
Fully functional piano plays Ludovico Einaudi - Una Mattina. This is not an audio track! It plays live : )
If you know a webaudio library that reads notes with the correct timing please let me know. Original soundtrack here : https://www.youtube.com/watch?v=0Bvm9yG4cvs
A Pen by Stan Williams on CodePen.