michael/web-advent-calendar
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implement snow canvas effect

Browse Source
This commit is contained in:
Michael Reber 2020-12-01 14:26:41 +01:00
parent aa1ec23625
commit 2979f53794
5 changed files with 160 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
adventCalendar.php
View File

@ -6,6 +6,7 @@ class adventCalendar {
private $calendarHeight; private $calendarHeight;
public $useModal; public $useModal;
public $showExtras; public $showExtras;
public $enableSnow;
private $entries; private $entries;
/** /**
@ -24,6 +25,7 @@ class adventCalendar {
$this->calendarHeight = $config['calendarHeight'] ? $config['calendarHeight'] : "840px"; $this->calendarHeight = $config['calendarHeight'] ? $config['calendarHeight'] : "840px";
$this->useModal = $config['useModal'] ? $config['useModal'] : "true"; $this->useModal = $config['useModal'] ? $config['useModal'] : "true";
$this->showExtras = $config['showExtras'] ? $config['showExtras'] : "false"; $this->showExtras = $config['showExtras'] ? $config['showExtras'] : "false";
$this->enableSnow = $config['enableSnow'] ? $config['enableSnow'] : "false";
} }
/** /**

3
calendar_dev.json
View File

@ -3,7 +3,8 @@
"calendarWidth": "472", "calendarWidth": "472",
"calendarHeight": "827", "calendarHeight": "827",
"useModal": "true", "useModal": "true",
"showExtras": "true" "showExtras": "true",
"enableSnow": "true"
}, },
"entries": [ "entries": [
{ {

3
calendar_prod.json
View File

@ -3,7 +3,8 @@
"calendarWidth": "472", "calendarWidth": "472",
"calendarHeight": "827", "calendarHeight": "827",
"useModal": "true", "useModal": "true",
"showExtras": "true" "showExtras": "true",
"enableSnow": "true"
}, },
"entries": [ "entries": [
{ {

6
css/main-adventskalender.css
View File

@ -20,6 +20,12 @@ a {
font-family: 'christmasFont'; font-family: 'christmasFont';
src: url('../fonts/Hello-Christmas.ttf') format('truetype') /* Safari, Android, iOS */ src: url('../fonts/Hello-Christmas.ttf') format('truetype') /* Safari, Android, iOS */
} }
.snow {
height: 100%;
position: absolute;
width: 100%;
z-index: 1000;
}
.modal, .jquery-modal { .modal, .jquery-modal {
z-index: 1040 !important; z-index: 1040 !important;
} }

159
index.php
View File

@ -1,6 +1,21 @@
<?php <?php
require "adventCalendar.php";
$dev = isset($_GET['dev']) ? $_GET['dev'] : false; $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
if ($dev) {
$config = file_get_contents("./calendar_dev.json");
} else {
$config = file_get_contents("./calendar_prod.json");
}
require "adventCalendar.php";
$calendar = new adventCalendar();
$calendar->load_from_json($config);
echo $calendar->showExtras;
echo $calendar->enableSnow;
$showExtras = ($calendar->showExtras == 'true') ? true : false;
$snow_enabled = ($calendar->enableSnow == 'true') ? true : false;
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
@ -48,22 +63,18 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
<?php } ?> <?php } ?>
</head> </head>
<body> <body>
<?php if ($snow_enabled) { ?>
<canvas class="snow" id="snow"></canvas>
<?php } ?>
<center> <center>
<p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p> <p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p>
<div class="mainCalendar"> <div class="mainCalendar">
<?php if ($dev) { <?php
$config = file_get_contents("./calendar_dev.json"); $calendar->render();
} else {
$config = file_get_contents("./calendar_prod.json");
}
$calendar = new adventCalendar();
$calendar->load_from_json($config);
$calendar->render();
?> ?>
</div> </div>
<?php if ($calendar->showExtras == "true") { ?> <?php if ($showExtras) { ?>
<hr> <hr>
<p style="color: white; font-family: christmasFont; font-size: 40px; margin: 16px 0px 20px 0px;">Zite wod nüt sötsch abmache :</p> <p style="color: white; font-family: christmasFont; font-size: 40px; margin: 16px 0px 20px 0px;">Zite wod nüt sötsch abmache :</p>
@ -74,6 +85,132 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
</ul> </ul>
<?php } ?> <?php } ?>
</center> </center>
<?php if ($snow_enabled) { ?>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script>
const Snow = (canvas, count, options) => {
const ctx = canvas.getContext('2d');
const snowflakes = [];
const add = item => snowflakes.push(item(canvas));
const update = () => _.forEach(snowflakes, el => el.update());
const resize = () => {
ctx.canvas.width = canvas.offsetWidth;
ctx.canvas.height = canvas.offsetHeight;
_.forEach(snowflakes, el => el.resized());
};
const draw = () => {
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
_.forEach(snowflakes, el => el.draw());
};
const events = () => {
window.addEventListener('resize', resize);
};
const loop = () => {
draw();
update();
animFrame(loop);
};
const init = () => {
_.times(count, () => add(canvas => SnowItem(canvas, null, options)));
events();
loop();
};
init(count);
resize();
return { add, resize };
};
const defaultOptions = {
color: 'orange',
radius: [0.5, 3.0],
speed: [1, 3],
wind: [-0.5, 3.0] };
const SnowItem = (canvas, drawFn = null, opts) => {
const options = { ...defaultOptions, ...opts };
const { radius, speed, wind, color } = options;
const params = {
color,
x: _.random(0, canvas.offsetWidth),
y: _.random(-canvas.offsetHeight, 0),
radius: _.random(...radius),
speed: _.random(...speed),
wind: _.random(...wind),
isResized: false };
const ctx = canvas.getContext('2d');
const updateData = () => {
params.x = _.random(0, canvas.offsetWidth);
params.y = _.random(-canvas.offsetHeight, 0);
};
const resized = () => params.isResized = true;
const drawDefault = () => {
ctx.beginPath();
ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
ctx.fillStyle = params.color;
ctx.fill();
ctx.closePath();
};
const draw = drawFn ?
() => drawFn(ctx, params) :
drawDefault;
const translate = () => {
params.y += params.speed;
params.x += params.wind;
};
const onDown = () => {
if (params.y < canvas.offsetHeight) return;
if (params.isResized) {
updateData();
params.isResized = false;
} else {
params.y = 0;
params.x = _.random(0, canvas.offsetWidth);
}
};
const update = () => {
translate();
onDown();
};
return {
update,
resized,
draw };
};
const el = document.querySelector('.container');
const wrapper = document.querySelector('body');
const canvas = document.getElementById('snow');
const animFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
Snow(canvas, 150, { color: 'white' });
</script>
<?php } ?>
</body> </body>
</html> </html>