Difference between revisions of "Widget:Logo"
m (added date info (winter and holiday mode)) |
m (removed 5 year anniversary (and confetti), made code a bit smaller) |
||
Line 67: | Line 67: | ||
var nToggle = 0; | var nToggle = 0; | ||
var treeLights = [ | var treeLights = [ | ||
− | { | + | { x: 84, y: 16, c: "red", on: false }, |
− | { | + | { x: 101, y: 40, c: "orange", on: false }, |
− | { | + | { x: 87, y: 60, c: "pink", on: false }, |
− | { | + | { x: 64, y: 79, c: "#36f", on: false }, |
− | { | + | { x: 119, y: 91, c: "yellow", on: false } |
]; | ]; | ||
Line 83: | Line 83: | ||
if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) ) | if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) ) | ||
− | snowFlakes.push( { | + | snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c: "#fff" } ); |
oldTimestamp = _timestamp; | oldTimestamp = _timestamp; | ||
Line 114: | Line 114: | ||
// Generate new flake | // Generate new flake | ||
− | flake = { | + | flake = { x: ( Math.random( ) * width ) | 0, y: 0, c: "#fff" }; |
} | } | ||
Line 156: | Line 156: | ||
ctx.stroke(); | ctx.stroke(); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
// Draw all tree lights overlay: either on or off | // Draw all tree lights overlay: either on or off | ||
Line 204: | Line 190: | ||
function drawTreeLight( _treeLight, _glow ) | function drawTreeLight( _treeLight, _glow ) | ||
{ | { | ||
− | ctx.strokeStyle = ctx.shadowColor = _treeLight. | + | ctx.strokeStyle = ctx.shadowColor = _treeLight.c; |
if ( !_glow ) | if ( !_glow ) | ||
Line 291: | Line 277: | ||
return null; | return null; | ||
− | var newFlake = { | + | var newFlake = { x: _flake.x + _x, y: _flake.y + _y, c: _flake.c }; |
// Check the alpha channel (apparently, our logo has opacity < 250) | // Check the alpha channel (apparently, our logo has opacity < 250) |
Revision as of 11:39, 7 November 2016
This widget creates an animated themed ACKspace logo.
Created by xopr
Using this widget
To insert this widget, use the following code:
{{#widget:Logo |image=/w/images/e/e9/ACKsmass_logo.png |width=600px |height=200px |padding=8px |float=right }}
This will give the following result:
Notes
- it will display snow in December - March and will show Christmas lights between 7 December and 7 January
- image is mandatory, the rest is optional.
- it also must be written without protocol since colon (:) is not allowed, and may be relative, for example: //ackspace.nl/w/images/e/e9/ACKsmass_logo.png or /w/images/e/e9/ACKsmass_logo.png
- You must provide a unit for the sizes (i.e. px, %, etc.)
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Logo article.