narrowcasting: add some fun extensions/examples - jscancer - Javascript crap (relatively small)
HTML git clone git://git.codemadness.org/jscancer
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit db8eeb55c0f54f14a83bf10b4276c8063bd491dc
DIR parent 908a85083071d1f8b4559e48f276b1a837f13e81
HTML Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Wed, 20 Aug 2025 20:18:26 +0200
narrowcasting: add some fun extensions/examples
- Gary the Snail (from Spongebob) animation for the progress bar, meow.
- Bouncing soccerball (used for euro- and world cup).
- snow: snow effect, for winter times.
- santa on his sled for the progress bar.
Diffstat:
A narrowcasting/fun/progressbar/gary… | 0
A narrowcasting/fun/progressbar/gary… | 2 ++
A narrowcasting/fun/progressbar/sant… | 2 ++
A narrowcasting/fun/progressbar/sant… | 0
A narrowcasting/fun/progressbar/styl… | 45 +++++++++++++++++++++++++++++++
A narrowcasting/fun/snow/snippet.html | 10 ++++++++++
A narrowcasting/fun/snow/snow.css | 64 +++++++++++++++++++++++++++++++
A narrowcasting/fun/soccer/ball.svg | 18 ++++++++++++++++++
A narrowcasting/fun/soccer/snippet.h… | 4 ++++
A narrowcasting/fun/soccer/soccer.js | 72 +++++++++++++++++++++++++++++++
M narrowcasting/index.html | 26 +++++++++++++++++++++++++-
M narrowcasting/sfeed/update.sh | 0
M narrowcasting/style.css | 46 +++++++++++++++++++++++++++++++
13 files changed, 288 insertions(+), 1 deletion(-)
---
DIR diff --git a/narrowcasting/fun/progressbar/gary-optimized.png b/narrowcasting/fun/progressbar/gary-optimized.png
Binary files differ.
DIR diff --git a/narrowcasting/fun/progressbar/gary.html b/narrowcasting/fun/progressbar/gary.html
@@ -0,0 +1 @@
+<div class="progressbar"><img class="gary" src="gary-optimized.png" alt="" /></div>
+\ No newline at end of file
DIR diff --git a/narrowcasting/fun/progressbar/santa.html b/narrowcasting/fun/progressbar/santa.html
@@ -0,0 +1 @@
+<div class="progressbar"><img class="santa" src="santa.png" alt="" /></div>
+\ No newline at end of file
DIR diff --git a/narrowcasting/fun/progressbar/santa.png b/narrowcasting/fun/progressbar/santa.png
Binary files differ.
DIR diff --git a/narrowcasting/fun/progressbar/style-snippet.css b/narrowcasting/fun/progressbar/style-snippet.css
@@ -0,0 +1,44 @@
+.progressbar {
+ background: none;
+ text-align: right;
+ vertical-align: bottom;
+ height: 32px;
+}
+
+@keyframes move-snail {
+ 0% {
+ padding-left: -4px;
+ }
+ 20% {
+ padding-left: -4px;
+ }
+ 40% {
+ padding-left: 30px;
+ }
+ 60% {
+ padding-left: 20px;
+ }
+ 80% {
+ padding-left: 0px;
+ }
+ 100% {
+ padding-left: -4px;
+ }
+}
+
+/* gary moves like a snail */
+.gary {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+
+ animation: linear move-snail 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+}
+
+.santa {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+}
+\ No newline at end of file
DIR diff --git a/narrowcasting/fun/snow/snippet.html b/narrowcasting/fun/snow/snippet.html
@@ -0,0 +1,10 @@
+<head>
+<link rel="stylesheet" type="text/css" href="snow.css" />
+</head>
+<body>
+
+<div class="snow_wrap">
+<div class="snow"></div>
+</div>
+
+</body>
DIR diff --git a/narrowcasting/fun/snow/snow.css b/narrowcasting/fun/snow/snow.css
@@ -0,0 +1,64 @@
+*,*::after,*::before {
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing:border-box;
+ -moz-box-sizing: border-box;
+}
+body {
+ font-family: arial;
+ font-size: 16px;
+ margin: 0;
+ background: #fff;
+ color: #000;
+}
+.snow_wrap {
+ height: 100vh;
+ width: 100%;
+ background-size: cover;
+ background-position: center bottom;
+ position: relative;
+ overflow: hidden;
+ z-index: 999999;
+}
+.snow,.snow:after,.snow::before {
+ content: '';
+ position: absolute;
+ top: -650px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-image: radial-gradient(4px 4px at 100px 50px,#fff,transparent),
+ radial-gradient(6px 6px at 200px 150px, #fff,transparent),
+ radial-gradient(3px 3px at 300px 250px,#fff,transparent),
+ radial-gradient(4px 4px at 400px 350px,#fff,transparent),
+ radial-gradient(6px 6px at 500px 100px,#fff,transparent),
+ radial-gradient(3px 3px at 50px 200px,#fff,transparent),
+ radial-gradient(4px 4px at 150px 300px,#fff,transparent),
+ radial-gradient(6px 6px at 250px 400px,#fff,transparent),
+ radial-gradient(3px 3px at 350px 500px,#fff,transparent),
+ radial-gradient(4px 4px at 550px 550px,#fff,transparent);
+ background-size: 650px 650px;
+ animation: SnowAnim 3s linear infinite;
+}
+.snow:after {
+ margin-left: -250px;
+ opacity: 0.5;
+ filter: blur(2px);
+ animation-direction: reverse;
+ animation-duration: 6s;
+}
+.snow::before {
+ margin-left: -350px;
+ opacity: 0.7;
+ filter: blur(1px);
+ animation-direction: reverse;
+ animation-duration: 9s;
+}
+@keyframes SnowAnim {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(650px);
+ }
+}
DIR diff --git a/narrowcasting/fun/soccer/ball.svg b/narrowcasting/fun/soccer/ball.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+ <title>ball</title>
+ <desc>Created with Sketch.</desc>
+ <defs/>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="ball" sketch:type="MSLayerGroup">
+ <g id="Page-1" sketch:type="MSShapeGroup">
+ <circle id="Oval-1" fill="#FFFFFF" cx="20" cy="20" r="20"/>
+ <g id="noun_52564_cc" fill="#000000">
codemadness.org:70 /git/jscancer/commit/db8eeb55c0f54f14a83bf10b4276c8063bd491dc.gph:188: line too long