Анимированный холст Счастливых праздников
Когда человек действительно хочет чего-то, вся Вселенная вступает в сговор, чтобы помочь этому человеку осуществить свою мечту.
21-декабря-2023, 22:43 1 0
Рождество может стать прекрасным временем для экспериментов с новыми вещами, как это сделал разработчик в этом коде, используя холст HTML5 в качестве анимированного фона. Холст располагается перед содержимым (С праздником!) в HTML-файле и устанавливается в качестве фона с помощью умного позиционирования CSS.
HTML
<!-- Life's Not Complete Without Art. (expand your editor ;)
|
\ ' /
-- (*) --
>*<
>0<@<
>>>@<<*
>@>*<0<<<
>*>>@<<<@<<
>@>>0<<<*<<@<
>*>>0<<@<<<@<<<
>@>>*<<@<>*<<0<*<
\*/ >0>>*<<@<>0><<*<@<<
___\\U//___ >*>>@><0<<*>>@><*<0<<
|\\ | | \\| >@>>0<*<0>>@<<0<<<*<@<<
| \\| | _(UU)_ >((*))_>0><*<0><@<<<0<*<
|\ \| || / //||.*.*.*.|>>@<<*<<@>><0<<<
|\\_|_|&&_// ||*.*.*.*|_\\db//_
""""|'.'.'.|~~|.*.*.*| ___|___
|'.'.'.| ^^^^^^|____|>>TMR>>|
~~~~~~~~ '""""`-------'
|X-Mas Tree & Presents|
!-->
<body>
<div id="bgContainer">
<canvas id="canvasBG" width="800" height="500"></canvas>
<div>
<div id="main_body">
<div class="page">
<div class="content">
<p>Happy Holidays!<br />
</p>
</div>
</div>
</div>
</body>
CSS
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);
body {
margin: 0;
padding: 0;
font-family: 'Mountains of Christmas', cursive;
font-weight:bold;
font-size:4vw;
color: #fff;
width:100%;
}
canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#bgContainer {
position: absolute;
height: 100%;
width: 100%;
background-color: #999;
overflow: hidden;
}
#main_body {
position: absolute;
top: 0;
width: 100%;
overflow: auto;
max-height: 100%;
left:50%;
top:50%;
transform:translate(-50%, -50%);
overflow: hidden;
}
p {
line-height: 1.5em;
letter-spacing:2px;
text-align:center;
text-shadow: 0 3px 0 #ccc,
0 4px 0 #c9c9c9,
0 5px 0 #bbb,
0 6px 0 #b9b9b9,
0 7px 0 #aaa,
0 8px 4px rgba(0,0,0,.1),
0 0 8px rgba(0,0,0,.1),
0 4px 6px rgba(0,0,0,.3),
0 6px 8px rgba(0,0,0,.2),
0 8px 13px rgba(0,0,0,.25),
0 13px 13px rgba(0,0,0,.2),
0 22px 22px rgba(0,0,0,.15);
}
.page {
width:100%;
margin: 0 auto;
}
.content {
font-size:2.5em;
opacity:0.5;
filter:alpha(opacity=60);
border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 5px;
}JS
//call AnimateBG();
$(document).ready(function() {
new AnimateBG("canvasBG", "http://sd.uploads.im/t/z7xY4.png").start();
});
//the canvas background animation script (animatebg.js) is included as a seperate file -->
//URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/animatebg.js
//the image used is for the static snowflakes. The js animates the canvas backgroundСниппет также использует сценарий фоновой анимации , включенный в отдельный файл jаvascript.
/*
Animatebg.js for CodePen Demo: http://codepen.io/tmrDevelops/pen/EaKZKL
*/
var BAR_WIDTH = 30;
var BAR_SPEED = 0.5;
var MAX_ANGLE = Math.PI / 32;
var COLOR_STEP = 0.01;
function AnimateBG(canvasId, bgImg) {
var c = document.getElementById(canvasId);
var bgImgReady = false;
var backgroundImage = new Image();
backgroundImage.onload = imageLoaded;
backgroundImage.src = bgImg;
var colors = new Array();
colors.push(new Color(200, 160, 150));
colors.push(new Color(230, 160, 90));
colors.push(new Color(230, 240, 90));
colors.push(new Color(100, 240, 190));
colors.push(new Color(100, 170, 220));
colors.push(new Color(200, 100, 220));
var nextColorIndex = 0;
var activeColor = colors[nextColorIndex++];
var leftOffset = 0 - BAR_WIDTH;
var angle = MAX_ANGLE;
var angleAdjust = Math.PI / 3600;
this.start = function() {
backgroundImageReady();
}
function imageLoaded() {
bgImgReady = true;
}
function backgroundImageReady() {
if (!bgImgReady) {
setTimeout(backgroundImageReady,100);
} else {
beginAnimateBackground();
}
}
function beginAnimateBackground() {
var $ = c.getContext('2d');
$.drawImage(backgroundImage, 0, 0, c.width, c.height);
if (activeColor.fadeTo(colors[nextColorIndex])) {
activeColor = colors[nextColorIndex++];
if (nextColorIndex >= colors.length) {
nextColorIndex = 0;
}
}
$.globalAlpha = 0.6;
$.fillStyle = 'rgb(' + activeColor.getRGB() + ')';
$.fillRect(0, 0, c.width, c.height);
$.save();
$.globalAlpha = 0.25;
$.translate(c.width / 2, c.height / 2);
$.rotate(angle += angleAdjust);
for (var i = leftOffset; i < c.width + 600; i += (BAR_WIDTH * 2)) {
$.fillRect(i - (c.width / 2), 0 - (c.height / 2) - 200, BAR_WIDTH, c.height + 400);
}
if (angle > MAX_ANGLE || angle < 0 - MAX_ANGLE) {
angleAdjust = 0 - angleAdjust;
}
leftOffset -= BAR_SPEED;
if (leftOffset + BAR_WIDTH * 2 + 300 < 0) {
leftOffset += BAR_WIDTH * 2;
}
$.restore();
setTimeout(beginAnimateBackground,0);
}
}
function Color(r,g,b) {
this.r = r;
this.g = g;
this.b = b;
this.step = COLOR_STEP;
this.fadeTo = function(color) {
this.r = this.r + ((color.r - this.r) * this.step);
this.g = this.g + ((color.g - this.g) * this.step);
this.b = this.b + ((color.b - this.b) * this.step);
this.step += COLOR_STEP;
if (this.r == color.r &&
this.g == color.g &&
this.b == color.b) {
this.step = COLOR_STEP;
return true;
}
return false;
}
this.getRGB = function() {
return Math.round(this.r) + "," +
Math.round(this.g) + "," +
Math.round(this.b);
}
}
