javascript - Background triangle instead of circle JS -
i trying implement following effect on site: animatedheaderbackgrounds
but instead of circles want triangles go upwards. have searched stack overflow , tried couple things, did not quite work.
(function() { var width, height, largeheader, canvas, ctx, triangles, target, animateheader = true; var colors = ['72,35,68', '43,81,102', '66,152,103', '250,178,67', '224,33,48']; // main initheader(); addlisteners(); function initheader() { width = window.innerwidth; height = window.innerheight; target = {x: 0, y: height}; largeheader = document.getelementbyid('large-header'); largeheader.style.height = height+'px'; canvas = document.getelementbyid('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getcontext('2d'); // create particles triangles = []; for(var x = 0; x < width*0.5; x++) { var c = new triangle(); triangles.push(c); } animate(); } // event handling function addlisteners() { window.addeventlistener('scroll', scrollcheck); window.addeventlistener('resize', resize); } function scrollcheck() { if(document.body.scrolltop > height) animateheader = false; else animateheader = true; } function resize() { width = window.innerwidth; height = window.innerheight; largeheader.style.height = height+'px'; canvas.width = width; canvas.height = height; } function animate() { if(animateheader) { ctx.clearrect(0,0,width,height); for(var in triangles) { triangles[i].draw(); } } requestanimationframe(animate); } // canvas manipulation function triangle() { var _this = this; // constructor (function() { _this.coords = [{},{},{}]; _this.pos = {}; init(); })(); function init() { _this.pos.x = math.random()*width; _this.pos.y = height+math.random()*100; _this.alpha = 0.1+math.random()*0.3; _this.scale = 0.1+math.random()*0.3; _this.velocity = math.random(); } this.draw = function() { if(_this.alpha >= 0.005){ _this.alpha -= 0.005; } else { _this.alpha = 0; } ctx.beginpath(); ctx.moveto(_this.coords[0].x+_this.pos.x, _this.coords[0].y+_this.pos.y); ctx.lineto(_this.coords[1].x+_this.pos.x, _this.coords[1].y+_this.pos.y); ctx.lineto(_this.coords[2].x+_this.pos.x, _this.coords[2].y+_this.pos.y); ctx.closepath(); ctx.fillstyle = 'rgba('+_this.color+','+ _this.alpha+')'; ctx.fill(); }; this.init = init; } })();ive checked stackoverflow: create equilateral triangle in middle of canvas?
here full snippet:
(function() { var width, height, largeheader, canvas, ctx, circles, target, animateheader = true; // main initheader(); addlisteners(); function initheader() { width = window.innerwidth; height = window.innerheight; target = {x: 0, y: height}; largeheader = document.getelementbyid('large-header'); largeheader.style.height = height+'px'; canvas = document.getelementbyid('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getcontext('2d'); // create particles circles = []; for(var x = 0; x < width*0.5; x++) { var c = new circle(); circles.push(c); } animate(); } // event handling function addlisteners() { window.addeventlistener('scroll', scrollcheck); window.addeventlistener('resize', resize); } function scrollcheck() { if(document.body.scrolltop > height) animateheader = false; else animateheader = true; } function resize() { width = window.innerwidth; height = window.innerheight; largeheader.style.height = height+'px'; canvas.width = width; canvas.height = height; } function animate() { if(animateheader) { ctx.clearrect(0,0,width,height); for(var in circles) { circles[i].draw(); } } requestanimationframe(animate); } // canvas manipulation function circle() { var _this = this; // constructor (function() { _this.pos = {}; init(); console.log(_this); })(); function init() { _this.pos.x = math.random()*width; _this.pos.y = height+math.random()*100; _this.alpha = 0.1+math.random()*0.3; _this.scale = 0.1+math.random()*0.3; _this.velocity = math.random(); } this.draw = function() { if(_this.alpha <= 0) { init(); } _this.pos.y -= _this.velocity; _this.alpha -= 0.0005; ctx.beginpath(); ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * math.pi, false); ctx.fillstyle = 'rgba(255,255,255,'+ _this.alpha+')'; ctx.fill(); }; } })();if know solution.. in advance :)
(function() { var width, height, largeheader, canvas, ctx, circles, target, animateheader = true; // main initheader(); addlisteners(); function initheader() { width = window.innerwidth; height = window.innerheight; target = {x: 0, y: height}; largeheader = document.getelementbyid('large-header'); largeheader.style.height = height+'px'; canvas = document.getelementbyid('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getcontext('2d'); // create particles circles = []; for(var x = 0; x < 100; x++) { var c = new circle(); circles.push(c); } animate(); } // event handling function addlisteners() { window.addeventlistener('scroll', scrollcheck); window.addeventlistener('resize', resize); } function scrollcheck() { animateheader = document.body.scrolltop < height; } function resize() { width = window.innerwidth; height = window.innerheight; largeheader.style.height = height+'px'; canvas.width = width; canvas.height = height; } function animate() { if(animateheader) { ctx.clearrect(0,0,width,height); for(var in circles) { circles[i].draw(); } } requestanimationframe(animate); } // canvas manipulation function circle() { var _this = this; // constructor (function() { _this.pos = {}; init(); //console.log(_this); })(); function init() { _this.pos.x = math.random()*width; _this.pos.y = height+math.random()*100; _this.alpha = 0.1+math.random()*0.3; _this.height = 10+math.random()*0.3; _this.width = 10+math.random()*0.3; _this.velocity = math.random(); } this.draw = function() { if(_this.alpha <= 0) { init(); } _this.pos.y -= _this.velocity; _this.alpha -= 0.0005; ctx.beginpath(); ctx.moveto(_this.pos.x, _this.pos.y); ctx.lineto(_this.pos.x - (_this.width/2) , _this.pos.y + _this.height); ctx.lineto(_this.pos.x + (_this.width/2) , _this.pos.y + _this.height); ctx.fillstyle = 'rgba(255,255,255,'+ _this.alpha+')'; ctx.fill(); }; } })();body { overflow-x: hidden; } #large-header, #demo-canvas { background: #333; } #content { position: absolute; top: 100%; padding: 10px; }<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <div id="large-header"> <canvas id="demo-canvas"></canvas> </div> <div id="content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </body> </html>
Comments
Post a Comment