Difference between revisions of "Widget:Logo"
m (made snow 'special') |
m (color and draw instruction update) |
||
| Line 83: | Line 83: | ||
if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) ) | if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) ) | ||
| − | snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:[ | + | snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:[255,255,255] } ); |
oldTimestamp = _timestamp; | oldTimestamp = _timestamp; | ||
| Line 114: | Line 114: | ||
// Generate new flake | // Generate new flake | ||
| − | flake = { x: ( Math.random( ) * width ) | 0, y: 0, c:[ | + | flake = { x: ( Math.random( ) * width ) | 0, y: 0, c:[255,255,255] }; |
} | } | ||
| Line 339: | Line 339: | ||
return; | return; | ||
| − | if ( | + | if ( window.x === null ) |
| − | |||
| − | |||
| − | |||
{ | { | ||
| − | + | window.x = _event.offsetX; | |
| − | + | window.y = _event.offsetY; | |
| − | + | } | |
| + | |||
| + | // horizontal? | ||
| + | if ( Math.abs(window.x - _event.offsetX) > Math.abs(window.y - _event.offsetY) ) | ||
| + | { | ||
| + | var yInc = Math.abs(window.y - _event.offsetY) / Math.abs(window.x - _event.offsetX); | ||
| + | for ( ; window.x < _event.offsetX; ++window.x ) | ||
| + | { | ||
| + | window.y += yInc; | ||
| + | drawSnow( window.x, Math.round( window.y ) ) | ||
| + | } | ||
| + | window.y = Math.round( window.y ); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | var yInc = Math.abs(window.x - _event.offsetX) / Math.abs(window.y - _event.offsetY); | ||
| + | for ( ; window.y < _event.offsetY; ++window.y ) | ||
| + | { | ||
| + | window.x += xInc; | ||
| + | drawSnow( Math.round( window.x ), window.y ) | ||
| + | } | ||
| + | window.x = Math.round( window.x ); | ||
} | } | ||
}, false ); | }, false ); | ||
| Line 355: | Line 373: | ||
window.requestAnimationFrame( snowFall ); | window.requestAnimationFrame( snowFall ); | ||
setInterval( blink, 1500 ); | setInterval( blink, 1500 ); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function drawSnow( _x, _y ) | ||
| + | { | ||
| + | if ( dynamicImage.data[ ( _x + width * _y ) * 4 + 0 ] === 255 | ||
| + | && dynamicImage.data[ ( _x + width * _y ) * 4 + 1 ] === 255 | ||
| + | && dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] === 255 | ||
| + | && dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] === 255 ) | ||
| + | { | ||
| + | dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] = 0; | ||
| + | dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] = 220; | ||
} | } | ||
} | } | ||
window.addEventListener( "load", window_load, false ); | window.addEventListener( "load", window_load, false ); | ||
| + | window.x = window.y = null; | ||
}( )); | }( )); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Revision as of 14:05, 21 December 2017
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.
