title : <br>Bienvenidos a Nitoku image : https://www.nitoku.com/file/@nitoku_es.público/nitoku.public-files/qqrvgkv7a3k2ak8.png color : #52977b image-height : 50px color : #52977b font-size: 40px
https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/title?tk=pu&us=pu
%###### HTML ######% <div class="stars-frame"> <div class="message"> <div class="message-details"> <p>La mejor plataforma para para crear, visualizar y compartir nuevas ideas</p> <p> Este equipo, @nitoku_es.público, será nuestro canal oficial para distribuir toda la información en español acerca de nuestra plataforma.</p> <p><a href='https://www.nitoku.com/@nitoku_es.p%C3%BAblico/Documentaci%C3%B3n#datapage' class="buttom">Empezar ahora</a></p> </div> </div> <div class="background"> <div class="landscape"></div> <canvas id="canvas"></canvas> </div> </div> %###### CSS #######% .stars-frame{ position: relative; } .stars-frame p{ margin:0px; padding:8px; } .background{ z-index: 0; width: 100%; height: 500px; background: #ffffff; background: linear-gradient(to bottom, #ffffff 0%, #ceced4 100%); overflow: hidden; position: relative; } @keyframes colorChange { 0%, 100% { opacity: 0; } 50% { opacity: .9; } } .landscape { position :absolute; bottom: 0px; left: 0; width: 100%; height: 500px; /*background-image: url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);*/ background-image:url(https://i.imgur.com/FCAlCQ2.png); background-size: 1000px 500px; background-repeat: repeat-x; background-position: center bottom; } /** message **/ .message { position : absolute; width: 95%; z-index: 1; } .message-details { max-width : 600px; color: #676a6c; margin-left: auto; margin-right: auto; margin-top: 50px; font-size: 18px; font-weight: 600; } .buttom{ -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025); box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025); white-space: nowrap; display: inline-block; height: 40px; line-height: 40px; padding: 0 14px; border-radius: 4px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; text-decoration: none; -webkit-transition: all .15s ease; transition: all .15s ease; margin-right: 23px; margin-top: 30px; color: #fff; background: #52977b; text-shadow: 0 1px 3px rgba(36,180,126,.4); } %### JAVASCRIPT ###% function Star(id, x, y){ this.id = id; this.x = x; this.y = y; this.r = Math.floor(Math.random()*2)+3; //var alpha = (Math.floor(Math.random()*10)+1)/10/2; //this.color = "rgba(255,255,255,"+alpha+")"; this.color = "#ffffff"; } 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.color = "#ffffff"; //this.linkColor = "rgba(255,255,255,"+this.a/4+")"; //this.linkColor = "rgba(255,255,255,"+this.a/2+")"; this.linkColor = "#ffffff"; 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); ctx.lineWidth = 2; 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.color = "#ffffff"; //this.linkColor = "rgba(255,255,255,"+this.a/2+")"; this.linkColor = "#ffffff"; 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 = 60, dots = [], dotsMinDist = 5, params = { maxDistFromCursor: 100, 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":true}
https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku.public/code?tk=pu&us=pu
https://p101007003-dot-nitokucom.uc.r.appspot.com/frame/@nitoku_es.diseño/footerES?tk=pu&us=pu