Last active
May 14, 2024 12:54
-
-
Save gAlleb/8df10a0c40f461909f2a060abf945e1a to your computer and use it in GitHub Desktop.
Christmas Lights for Azuracast Public Page (quick and very dirty)
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
| .lightrope { | |
| text-align: center; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| position: absolute; | |
| z-index: 9999; | |
| margin: -17px 0 0 0; | |
| padding: 0; | |
| pointer-events: none; | |
| width: 100%; | |
| height: 65px; | |
| top:0; | |
| margin-top: -51px; | |
| } | |
| .lightrope li { | |
| position: relative; | |
| animation-fill-mode: both; | |
| animation-iteration-count: infinite; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: block; | |
| width: 9px; | |
| height: 13px; | |
| border-radius: 50%; | |
| margin: 19px; | |
| display: inline-block; | |
| background: rgba(0, 247, 165, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); | |
| animation-name: flash-1; | |
| animation-duration: 2s; | |
| } | |
| .lightrope li:nth-child(2n+1) { | |
| background: rgba(0, 255, 255, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5); | |
| animation-name: flash-2; | |
| animation-duration: 0.4s; | |
| } | |
| .lightrope li:nth-child(4n+2) { | |
| background: rgba(247, 0, 148, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); | |
| animation-name: flash-3; | |
| animation-duration: 1.1s; | |
| } | |
| .lightrope li:nth-child(odd) { | |
| animation-duration: 1.8s; | |
| } | |
| .lightrope li:nth-child(3n+1) { | |
| animation-duration: 1.4s; | |
| } | |
| .lightrope li:before { | |
| content: ""; | |
| position: absolute; | |
| /*** Change cap color if needed ***/ | |
| background: #2e2e2e; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 3px; | |
| top: -5px; | |
| left: 1px; | |
| } | |
| .lightrope li:after { | |
| content: ""; | |
| top: -15px; | |
| left: 3px; | |
| position: absolute; | |
| width: 50px; | |
| height: 18px; | |
| /*** Change wire color if needed ***/ | |
| border-bottom: solid #2e2e2e 2px; | |
| border-radius: 50%; | |
| } | |
| .lightrope li:last-child:after { | |
| content: none; | |
| } | |
| .lightrope li:first-child { | |
| margin-left: -40px; | |
| } | |
| @keyframes flash-1 { | |
| 0%, 100% { | |
| background: rgba(0, 247, 165, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); | |
| } | |
| 50% { | |
| background: rgba(0, 247, 165, 0.4); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2); | |
| } | |
| } | |
| @keyframes flash-2 { | |
| 0%, 100% { | |
| background: rgba(0, 255, 255, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1); | |
| } | |
| 50% { | |
| background: rgba(0, 255, 255, 0.4); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2); | |
| } | |
| } | |
| @keyframes flash-3 { | |
| 0%, 100% { | |
| background: rgba(247, 0, 148, 1); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); | |
| } | |
| 50% { | |
| background: rgba(247, 0, 148, 0.4); | |
| box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2); | |
| } | |
| } |
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
| lightrope_div = document.createElement( 'div' ); | |
| lightrope_div.classList.add("lightrope"); | |
| li_item = document.createElement( 'li' ); | |
| for(var i = 0; i < 50; i++){ | |
| lightrope_div.appendChild(li_item.cloneNode(true)); | |
| } | |
| document.body.appendChild(lightrope_div); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A lit bit of Xmas for your Azuracast Station public page (very dirty but quick ;) ).
Administration->Custom BrandingcssintoCustom CSS for Public Pagessection– if you need to change wire color and cap color of bulbs — change
backgroundcolor in.lightrope li:beforeand.lightrope li:afterjsintoCustom JS for Public PagessectionSpecial thanks to tobyj from codepen for initial scss styles :)