<div id="canvas-content"><!-- [et_pb_line_break_holder] --><h1>Hooray! You’re now part of my community!</h1><!-- [et_pb_line_break_holder] --><p>I appreciate you signing up for my list! Look out for occasional news from me.</p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><p>I’m so glad you’re now a part of my community—drop me a line anytime!</p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><p style="color: #000000;"><strong>Lara</strong></p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><p><a href="/" class="button button-filled">Back to website »</a></p><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><canvas id="canvas"></canvas>
<script type="text/javascript"><!-- [et_pb_line_break_holder] --><!--<!-- [et_pb_line_break_holder] -->(function () {<!-- [et_pb_line_break_holder] --> // globals<!-- [et_pb_line_break_holder] --> var canvas;<!-- [et_pb_line_break_holder] --> var ctx;<!-- [et_pb_line_break_holder] --> var W;<!-- [et_pb_line_break_holder] --> var H;<!-- [et_pb_line_break_holder] --> var mp = 50; //max particles<!-- [et_pb_line_break_holder] --> var particles = [];<!-- [et_pb_line_break_holder] --> var angle = 0;<!-- [et_pb_line_break_holder] --> var tiltAngle = 0;<!-- [et_pb_line_break_holder] --> var confettiActive = true;<!-- [et_pb_line_break_holder] --> var animationComplete = true;<!-- [et_pb_line_break_holder] --> var deactivationTimerHandler;<!-- [et_pb_line_break_holder] --> var reactivationTimerHandler;<!-- [et_pb_line_break_holder] --> var animationHandler;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // objects<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var particleColors = {<!-- [et_pb_line_break_holder] --> colorOptions: ["lightblue","purple"],<!-- [et_pb_line_break_holder] --> colorIndex: 0,<!-- [et_pb_line_break_holder] --> colorIncrementer: 0,<!-- [et_pb_line_break_holder] --> colorThreshold: 10,<!-- [et_pb_line_break_holder] --> getColor: function () {<!-- [et_pb_line_break_holder] --> if (this.colorIncrementer >= 10) {<!-- [et_pb_line_break_holder] --> this.colorIncrementer = 0;<!-- [et_pb_line_break_holder] --> this.colorIndex++;<!-- [et_pb_line_break_holder] --> if (this.colorIndex >= this.colorOptions.length) {<!-- [et_pb_line_break_holder] --> this.colorIndex = 0;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> this.colorIncrementer++;<!-- [et_pb_line_break_holder] --> return this.colorOptions[this.colorIndex];<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function confettiParticle(color) {<!-- [et_pb_line_break_holder] --> this.x = Math.random() * W; // x-coordinate<!-- [et_pb_line_break_holder] --> this.y = (Math.random() * H) - H; //y-coordinate<!-- [et_pb_line_break_holder] --> this.r = RandomFromTo(10, 30); //radius;<!-- [et_pb_line_break_holder] --> this.d = (Math.random() * mp) + 10; //density;<!-- [et_pb_line_break_holder] --> this.color = color;<!-- [et_pb_line_break_holder] --> this.tilt = Math.floor(Math.random() * 10) - 10;<!-- [et_pb_line_break_holder] --> this.tiltAngleIncremental = (Math.random() * 0.07) + .05;<!-- [et_pb_line_break_holder] --> this.tiltAngle = 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.draw = function () {<!-- [et_pb_line_break_holder] --> ctx.beginPath();<!-- [et_pb_line_break_holder] --> ctx.lineWidth = this.r / 2;<!-- [et_pb_line_break_holder] --> ctx.strokeStyle = this.color;<!-- [et_pb_line_break_holder] --> ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);<!-- [et_pb_line_break_holder] --> ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));<!-- [et_pb_line_break_holder] --> return ctx.stroke();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> jQuery(document).ready(function () {<!-- [et_pb_line_break_holder] --> SetGlobals();<!-- [et_pb_line_break_holder] --> InitializeButton();<!-- [et_pb_line_break_holder] --> InitializeConfetti();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> jQuery(window).resize(function () {<!-- [et_pb_line_break_holder] --> W = window.innerWidth;<!-- [et_pb_line_break_holder] --> H = window.innerHeight;<!-- [et_pb_line_break_holder] --> canvas.width = W;<!-- [et_pb_line_break_holder] --> canvas.height = H;<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function InitializeButton() {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function SetGlobals() {<!-- [et_pb_line_break_holder] --> canvas = document.getElementById("canvas");<!-- [et_pb_line_break_holder] --> ctx = canvas.getContext("2d");<!-- [et_pb_line_break_holder] --> W = window.innerWidth;<!-- [et_pb_line_break_holder] --> H = window.innerHeight;<!-- [et_pb_line_break_holder] --> canvas.width = W;<!-- [et_pb_line_break_holder] --> canvas.height = H;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function InitializeConfetti() {<!-- [et_pb_line_break_holder] --> particles = [];<!-- [et_pb_line_break_holder] --> animationComplete = false;<!-- [et_pb_line_break_holder] --> for (var i = 0; i < mp; i++) {<!-- [et_pb_line_break_holder] --> var particleColor = particleColors.getColor();<!-- [et_pb_line_break_holder] --> particles.push(new confettiParticle(particleColor));<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> StartConfetti();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function Draw() {<!-- [et_pb_line_break_holder] --> ctx.clearRect(0, 0, W, H);<!-- [et_pb_line_break_holder] --> var results = [];<!-- [et_pb_line_break_holder] --> for (var i = 0; i < mp; i++) {<!-- [et_pb_line_break_holder] --> (function (j) {<!-- [et_pb_line_break_holder] --> results.push(particles[j].draw());<!-- [et_pb_line_break_holder] --> })(i);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> Update();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> return results;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function RandomFromTo(from, to) {<!-- [et_pb_line_break_holder] --> return Math.floor(Math.random() * (to - from + 1) + from);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function Update() {<!-- [et_pb_line_break_holder] --> var remainingFlakes = 0;<!-- [et_pb_line_break_holder] --> var particle;<!-- [et_pb_line_break_holder] --> angle += 0.01;<!-- [et_pb_line_break_holder] --> tiltAngle += 0.1;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> for (var i = 0; i < mp; i++) {<!-- [et_pb_line_break_holder] --> particle = particles[i];<!-- [et_pb_line_break_holder] --> if (animationComplete) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (!confettiActive && particle.y < -15) {<!-- [et_pb_line_break_holder] --> particle.y = H + 100;<!-- [et_pb_line_break_holder] --> continue;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> stepParticle(particle, i);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (particle.y <= H) {<!-- [et_pb_line_break_holder] --> remainingFlakes++;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> CheckForReposition(particle, i);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (remainingFlakes === 0) {<!-- [et_pb_line_break_holder] --> StopConfetti();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function CheckForReposition(particle, index) {<!-- [et_pb_line_break_holder] --> if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {<!-- [et_pb_line_break_holder] --> if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 20);<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> if (Math.sin(angle) > 0) {<!-- [et_pb_line_break_holder] --> //Enter from the left<!-- [et_pb_line_break_holder] --> repositionParticle(particle, -20, Math.random() * H, Math.floor(Math.random() * 10) - 20);<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> //Enter from the right<!-- [et_pb_line_break_holder] --> repositionParticle(particle, W + 20, Math.random() * H, Math.floor(Math.random() * 10) - 20);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function stepParticle(particle, particleIndex) {<!-- [et_pb_line_break_holder] --> particle.tiltAngle += particle.tiltAngleIncremental;<!-- [et_pb_line_break_holder] --> particle.y += (Math.cos(angle + particle.d) + 1.5 + particle.r / 2) / 2;<!-- [et_pb_line_break_holder] --> particle.x += Math.sin(angle);<!-- [et_pb_line_break_holder] --> particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {<!-- [et_pb_line_break_holder] --> particle.x = xCoordinate;<!-- [et_pb_line_break_holder] --> particle.y = yCoordinate;<!-- [et_pb_line_break_holder] --> particle.tilt = tilt;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function StartConfetti() {<!-- [et_pb_line_break_holder] --> W = window.innerWidth;<!-- [et_pb_line_break_holder] --> H = window.innerHeight;<!-- [et_pb_line_break_holder] --> canvas.width = W;<!-- [et_pb_line_break_holder] --> canvas.height = H;<!-- [et_pb_line_break_holder] --> (function animloop() {<!-- [et_pb_line_break_holder] --> if (animationComplete) return null;<!-- [et_pb_line_break_holder] --> animationHandler = requestAnimFrame(animloop);<!-- [et_pb_line_break_holder] --> return Draw();<!-- [et_pb_line_break_holder] --> })();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function ClearTimers() {<!-- [et_pb_line_break_holder] --> clearTimeout(reactivationTimerHandler);<!-- [et_pb_line_break_holder] --> clearTimeout(animationHandler);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function DeactivateConfetti() {<!-- [et_pb_line_break_holder] --> confettiActive = false;<!-- [et_pb_line_break_holder] --> ClearTimers();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function StopConfetti() {<!-- [et_pb_line_break_holder] --> animationComplete = true;<!-- [et_pb_line_break_holder] --> if (ctx == undefined) return;<!-- [et_pb_line_break_holder] --> ctx.clearRect(0, 0, W, H);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function RestartConfetti() {<!-- [et_pb_line_break_holder] --> ClearTimers();<!-- [et_pb_line_break_holder] --> StopConfetti();<!-- [et_pb_line_break_holder] --> reactivationTimerHandler = setTimeout(function () {<!-- [et_pb_line_break_holder] --> confettiActive = true;<!-- [et_pb_line_break_holder] --> animationComplete = false;<!-- [et_pb_line_break_holder] --> InitializeConfetti();<!-- [et_pb_line_break_holder] --> }, 100);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> window.requestAnimFrame = (function () {<!-- [et_pb_line_break_holder] --> return window.requestAnimationFrame || <!-- [et_pb_line_break_holder] --> window.webkitRequestAnimationFrame || <!-- [et_pb_line_break_holder] --> window.mozRequestAnimationFrame || <!-- [et_pb_line_break_holder] --> window.oRequestAnimationFrame || <!-- [et_pb_line_break_holder] --> window.msRequestAnimationFrame || <!-- [et_pb_line_break_holder] --> function (callback) {<!-- [et_pb_line_break_holder] --> return window.setTimeout(callback, 500 / 60);<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --> })();<!-- [et_pb_line_break_holder] -->})();<!-- [et_pb_line_break_holder] -->--><!-- [et_pb_line_break_holder] --></script>
error: Content is protected !!
Share This