(function () {
window.confettiKit = function (params) {
var app = this;
app.version = "1.1.0";
app.config = {
colors: [
'#a864fd',
'#29cdff',
'#78ff44',
'#ff718d',
'#fdff6a',
],
el: 'body',
elements: {
'confetti': {
direction: 'down',
rotation: true,
},
'star': {
count: 15,
direction: 'up',
rotation: true,
},
'ribbon': {
count: 10,
direction: 'down',
rotation: true,
},
},
confettiCount: 75,
x: 0,
y: 0,
angle: 90,
decay: 0.9,
spread: 45,
startVelocity: 45,
position: null,
}
// Extend defaults with parameters
for (var param in params) {
app.config[param] = params[param];
}
var config = app.config;
app.renderStar = function (width, color) {
return '';
}
app.renderRibbon = function (width, color) {
return '';
}
app.customRender = function (content, type, color, width, size) {
if (type == "text") {
return '' + content + '
';
} else if (type == "svg") {
return '' + content + '';
} else if (type == "image") {
return '
';
}
}
app.createElements = function (root, elementCount) {
var starCount = config.elements["star"] ? config.elements["star"].count : 0;
var ribbonCount = config.elements["ribbon"] ? config.elements["ribbon"].count : 0;
//var customCount = config.elements["custom"] ? config.elements["custom"].count : 0;
var customCount = [];
if (config.elements["custom"] && config.elements["custom"].length > -1) {
console.log(config.elements["custom"].length)
for (var i = 0; i <= config.elements["custom"].length; i++) {
if (config.elements["custom"][i]) {
customCount.push({
'count': config.elements["custom"][i]['count']
})
}
}
}
var cl = 0;
var all = []
for (var index = 0; index <= elementCount; index++) {
var element = document.createElement('div');
element.classList = ['fetti'];
var color = config.colors[index % config.colors.length];
var w = Math.floor((Math.random() * 10) + 1) + 'px';
var h = Math.floor((Math.random() * 10) + 1) + 'px';
element.style.width = w;
element.style.height = h;
element.style.position = 'fixed';
element.style.zIndex = "999999";
if (config.elements["star"] && starCount > 0) {
var s = starCount - 1
if (s <= config.elements["star"].count && s >= 0) {
element.style['background-color'] = "";
element.innerHTML = app.renderStar(25, color);
element.direction = config.elements["star"].direction;
element.rotation = config.elements["star"].rotation;
starCount = s
}
} else if (config.elements["ribbon"] && ribbonCount > 0) {
var r = ribbonCount - 1
if (r <= config.elements["ribbon"].count && r >= 0) {
element.style['background-color'] = "";
element.innerHTML = app.renderRibbon(30, color);
element.direction = config.elements["ribbon"].direction;
element.rotation = config.elements["ribbon"].rotation;
ribbonCount = r
}
}
else if (config.elements["custom"] && config.elements["custom"].length > -1 && customCount[cl]) {
if (customCount[cl]) {
var c = customCount[cl].count - 1
if (c <= customCount[cl].count) {
if (c <= customCount[cl].count && c >= 0) {
element.style['background-color'] = "";
var type = config.elements["custom"][cl].contentType;
var content = config.elements["custom"][cl].content;
var width = config.elements["custom"][cl].width;
var textSize = config.elements["custom"][cl].textSize;
element.innerHTML = app.customRender(content, type, color, width, textSize);
element.direction = config.elements["custom"][cl].direction;
element.rotation = config.elements["custom"][cl].rotation;
customCount[cl].count = c
if (customCount[cl].count == 0) {
cl++;
}
}
}
}
}
else {
if (w == h) {
element.style['background-color'] = color;
element.style.borderRadius = "50%";
} else {
element.style['background-color'] = color;
}
element.direction = config.elements["confetti"] ? (config.elements["confetti"].direction ? config.elements["confetti"].direction : 'down') : 'down';
element.rotation = config.elements["confetti"] ? (config.elements["confetti"].rotation ? config.elements["confetti"].rotation : true) : true;
}
//root.prepend(element);
root.insertBefore(element, root.firstChild); //older browser
all.push(element)
}
return all;
}
app.randomPhysics = function (x, y, angle, spread, startVelocity) {
var radAngle = angle * (Math.PI / 180);
var radSpread = spread * (Math.PI / 180);
return {
x: x,
y: y,
wobble: Math.random() * 10,
velocity: (startVelocity * 0.3) + (Math.random() * startVelocity),
angle2D: -radAngle + ((0.3 * radSpread) - (Math.random() * radSpread)),
angle3D: -(Math.PI / 4) + (Math.random() * (Math.PI / 2)),
tiltAngle: Math.random() * Math.PI
};
}
app.updateFetti = function (fetti, progress, decay) {
fetti.physics.x += Math.cos(fetti.physics.angle2D) * fetti.physics.velocity;
fetti.physics.y += Math.sin(fetti.physics.angle2D) * fetti.physics.velocity;
fetti.physics.z += Math.sin(fetti.physics.angle3D) * fetti.physics.velocity;
fetti.physics.wobble += 0.1;
fetti.physics.velocity *= decay;
if (fetti.element.direction == "up") {
fetti.physics.y -= 3;
} else {
fetti.physics.y += 3;
}
fetti.physics.tiltAngle += 0.1;
var x = fetti.physics.x,
y = fetti.physics.y,
tiltAngle = fetti.physics.tiltAngle,
wobble = fetti.physics.wobble;
var wobbleX = x + (10 * Math.cos(wobble));
var wobbleY = y + (10 * Math.sin(wobble));
var transform;
if (fetti.element.rotation) {
transform = 'translate3d(' + wobbleX + 'px, ' + wobbleY + 'px, 0) rotate3d(1, 1, 1, ' + tiltAngle + 'rad)';
} else {
transform = 'translate3d(' + wobbleX + 'px, ' + wobbleY + 'px, 0)';
}
fetti.element.style.transform = transform;
fetti.element.style.opacity = 1 - progress;
}
app.animate = function (root, fettis, decay) {
var totalTicks = 200;
var tick = 0;
function update() {
fettis.forEach(function (fetti) {
app.updateFetti(fetti, tick / totalTicks, decay);
});
tick += 1;
if (tick < totalTicks) {
requestAnimationFrame(update);
} else {
fettis.forEach(function (fetti) {
root.removeChild(fetti.element);
});
}
}
requestAnimationFrame(update);
}
app.confetti = function (root, x, y) {
angle = config.angle,
decay = config.decay,
spread = config.spread,
startVelocity = config.startVelocity,
elementCount = config.confettiCount
var elements = app.createElements(root, elementCount);
var fettis = [];
elements.map(function (element) {
var s = {
'element': element,
'physics': app.randomPhysics(x, y, angle, spread, startVelocity)
}
fettis.push(s);
});
app.animate(root, fettis, decay);
}
var attach = document.querySelector(config.el)
if (config.position != null) {
if (config.position == "bottomLeftRight") {
config.angle = 45;
app.confetti(attach, 0, window.innerHeight - 200);
var rightConfig = params;
rightConfig['position'] = null;
rightConfig['angle'] = 135;
rightConfig['x'] = window.innerWidth;
rightConfig['y'] = window.innerHeight - 200;
new confettiKit(rightConfig);
} else if (config.position == "topLeftRight") {
config.angle = 340;
app.confetti(attach, 0, 0);
var rightConfig = params;
rightConfig['position'] = null;
rightConfig['angle'] = 190;
rightConfig['x'] = window.innerWidth;
rightConfig['y'] = 0;
new confettiKit(rightConfig);
}
} else {
app.confetti(attach, config.x, config.y);
}
};
})();
Hooghe Beer 20
2295 MX Kwintsheul
06-22891150
Whatsapp via icoon
[email protected]
Binnen een dag antwoord