%###### HTML ######% <div class="stars-frame"> <div class="contents"> <div class="title-frame"> <div> <div class="title">AND KNOW MAGIC!</div> <div class="info-frame"> <div> If you don’t find exactly the block that you need to visualize your data, don't worry, that’s where the magic happens. Every team in Nitoku has the tools to create their own blocks for free. </div> </div> <div class="action-call-link"> [ Discover more about building your blocks : button] </div> </div> </div> </div> <div class="background"> <div class="landscape"></div> <canvas id="canvas"></canvas> </div> </div> %###### CSS #######% .stars-frame{ position: relative; } .contents{ position: absolute; width: 95%; z-index: 1; padding: 10px; padding-top:30px; } .action-call-link{ color: #ffffff; } .title-frame{ display: flex; justify-content: center; } .title{ font-size: 21px; color: #ffffff; box-sizing: border-box; font-weight: 600; letter-spacing: 0.533333px; line-height: 32px; text-rendering: optimizelegibility; } .info-frame { color: #ffffff; font-size: 18px; max-width: 400px; display: flex; justify-content: center; } .background{ z-index: 0; width: 100%; height: 400px; background: #15271c; background: linear-gradient(to bottom, #253039 0%, #619c85 100%); overflow: hidden; position: relative; } @keyframes colorChange { 0%, 100% { opacity: 0; } 50% { opacity: .9; } } .landscape { position :absolute; bottom: 0px; left: 0; width: 100%; height: 400px; /*background-image: url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);*/ background-image:url(https://i.imgur.com/ATFLxOV.png); background-size: 1000px 250px; background-repeat: repeat-x; background-position: center bottom; } %### JAVASCRIPT ###% function Star(id, x, y){ this.id = id; this.x = x; this.y = y; this.r = Math.floor(Math.random()*2)+1; var alpha = (Math.floor(Math.random()*10)+1)/10/2; this.color = "rgba(255,255,255,"+alpha+")"; } Star.prototype.draw = function() { ctx.fillStyle = this.color; ctx.shadowBlur = this.r * 2; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } Star.prototype.move = function() { this.y -= .15 + params.backgroundSpeed/100; if (this.y <= -10) this.y = HEIGHT + 10; this.draw(); } function Dot(id, x, y, r) { this.id = id; this.x = x; this.y = y; this.r = Math.floor(Math.random()*5)+1; this.maxLinks = 2; this.speed = .5; this.a = .5; this.aReduction = .005; this.color = "rgba(255,255,255,"+this.a+")"; this.linkColor = "rgba(255,255,255,"+this.a/4+")"; this.dir = Math.floor(Math.random()*140)+200; } Dot.prototype.draw = function() { ctx.fillStyle = this.color; ctx.shadowBlur = this.r * 2; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); } Dot.prototype.link = function() { if (this.id == 0) return; var previousDot1 = getPreviousDot(this.id, 1); var previousDot2 = getPreviousDot(this.id, 2); var previousDot3 = getPreviousDot(this.id, 3); if (!previousDot1) return; ctx.strokeStyle = this.linkColor; ctx.moveTo(previousDot1.x, previousDot1.y); ctx.beginPath(); ctx.lineTo(this.x, this.y); if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y); if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y); ctx.stroke(); ctx.closePath(); } function getPreviousDot(id, stepback) { if (id == 0 || id - stepback < 0) return false; if (typeof dots[id - stepback] != "undefined") return dots[id - stepback]; else return false;//getPreviousDot(id - stepback); } Dot.prototype.move = function() { this.a -= this.aReduction; if (this.a <= 0) { this.die(); return } this.color = "rgba(255,255,255,"+this.a+")"; this.linkColor = "rgba(255,255,255,"+this.a/4+")"; this.x = this.x + Math.cos(degToRad(this.dir))*(this.speed+params.dotsSpeed/100), this.y = this.y + Math.sin(degToRad(this.dir))*(this.speed+params.dotsSpeed/100); this.draw(); this.link(); } Dot.prototype.die = function() { dots[this.id] = null; delete dots[this.id]; } var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), WIDTH, HEIGHT, mouseMoving = false, mouseMoveChecker, mouseX, mouseY, stars = [], initStarsPopulation = 80, dots = [], dotsMinDist = 2, params = { maxDistFromCursor: 50, dotsSpeed: 0, backgroundSpeed: 0 }; function setCanvasSize() { WIDTH = document.documentElement.clientWidth, HEIGHT = document.documentElement.clientHeight; canvas.setAttribute("width", WIDTH); canvas.setAttribute("height", HEIGHT); } function init() { ctx.strokeStyle = "white"; ctx.shadowColor = "white"; for (var i = 0; i < initStarsPopulation; i++) { stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT)); //stars[i].draw(); } ctx.shadowBlur = 0; animate(); } function animate() { ctx.clearRect(0, 0, WIDTH, HEIGHT); for (var i in stars) { stars[i].move(); } for (var i in dots) { dots[i].move(); } drawIfMouseMoving(); requestAnimationFrame(animate); } window.onmousemove = function(e){ mouseMoving = true; mouseX = e.clientX; mouseY = e.clientY; clearInterval(mouseMoveChecker); mouseMoveChecker = setTimeout(function() { mouseMoving = false; }, 100); } function drawIfMouseMoving(){ if (!mouseMoving) return; if (dots.length == 0) { dots[0] = new Dot(0, mouseX, mouseY); dots[0].draw(); return; } var previousDot = getPreviousDot(dots.length, 1); var prevX = previousDot.x; var prevY = previousDot.y; var diffX = Math.abs(prevX - mouseX); var diffY = Math.abs(prevY - mouseY); if (diffX < dotsMinDist || diffY < dotsMinDist) return; var xVariation = Math.random() > .5 ? -1 : 1; xVariation = xVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1; var yVariation = Math.random() > .5 ? -1 : 1; yVariation = yVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1; dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation); dots[dots.length-1].draw(); dots[dots.length-1].link(); } //setInterval(drawIfMouseMoving, 17); function degToRad(deg) { return deg * (Math.PI / 180); } parent.postMessage("{'service':'@nitoku.public/blockApi','request':'set-full-width'}", "*"); parent.postMessage("{'service':'@nitoku.public/blockApi','request':{'set-height':'400'}}", "*"); setTimeout(function(){ setCanvasSize(); init(); }, 100); %#### SETTINGS ####% {"readOnly":false}
https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/code?tk=pu&us=pu