<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container hero">
<div class="inner">
<h1>We all need a hero</h1>
<p>
Quick animation prototype to explore an idea for the hero of my personal portfolio.</br>
This was created using a canvas as a background where the triangles are drawn and animates with a overlay gradient on top of the canvas.
</p>
<p>
Feel free to share and use it as inspiration for any of you projects, and if you like it show some love by following me on:
</p>
<p>
<span><a href="https://dribbble.com/MDesignsuk"><i class="fa fa-dribbble" aria-hidden="true"></i></a></span>
<span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>
<span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>
<span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
<span><a href="https://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>
</p>
<p class="small">by: Mario Duarte</p>
</div>
<div class="overlay"></div>
<div class="background">
<canvas id="hero-canvas" width="1920" height="1080"></canvas>
</div>
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'helvetica', sans-serif;
}
.hero {
background-color: #EEEEEE;
width: 100%;
height: 100%;
max-height: calc(100% - 50px);
}
.hero .inner {
position: relative;
max-width: 960px;
height: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 40px;
box-sizing: padding-box;
z-index: 4;
}
.hero .inner h1 {
color: rgba(163, 32, 109, 0.6);
font-weight: 300;
text-transform: uppercase;
margin-bottom: 0;
border-bottom: 2px rgba(163, 32, 109, 0.6) dashed;
}
.hero .inner p {
color: #999999;
margin-bottom: 0;
font-size: 13px;
line-height: 150%;
max-width: 550px;
}
.hero .inner p.small {
font-size: 12px;
}
.hero .inner p a {
display: inline-block;
font-size: 22px;
color: rgba(163, 32, 109, 0.4);
margin: 0 10px;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: color 0.2s linear, -webkit-transform 0.2s ease-in-out;
transition: color 0.2s linear, -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, color 0.2s linear;
transition: transform 0.2s ease-in-out, color 0.2s linear, -webkit-transform 0.2s ease-in-out;
}
.hero .inner p a:hover {
color: rgba(163, 32, 109, 0.8);
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transition: color 0.4s linear, -webkit-transform 0.6s ease-in-out;
transition: color 0.4s linear, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, color 0.4s linear;
transition: transform 0.6s ease-in-out, color 0.4s linear, -webkit-transform 0.6s ease-in-out;
}
.hero .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
background: -webkit-linear-gradient(top, rgba(114, 81, 109, 0.2) 0%, #eeeeee 100%);
background: linear-gradient(to bottom, rgba(114, 81, 109, 0.2) 0%, #eeeeee 100%);
z-index: 3;
}
.hero .background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #EEEEEE;
z-index: 1;
}
.hero .background #hero-canvas {
width: 100%;
height: 100%;
position: relative;
}
/*
\ | _ \ _)
|\/ | | | -_) (_-< | _` | \ (_-<
_| _| ___/ \___| ___/ _| \__, | _| _| ___/
____/
*/
// ===========================================
// Hero Animated Canvas Background
// by Mário Duarte
// (╭☞ ͡ ͡°͜ ʖ ͡ ͡°)╭☞
// Thanks for stoping by, don't forget to like
// and follow to stay up to date with new
// doodles and cools stuff
// Twitter: https://twitter.com/MDesignsuk
// (づ｡◕‿‿◕｡)づ
// ===========================================
let ww = $(window).width();
let wh = $(window).height();
// pure javascrip random function ============
function random(min, max) {
return Math.random() * (max - min) + min;
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
function init() {} //end init
function animate() {
requestAnimFrame(animate);
draw();
}
function draw() {
//setup canvas enviroment
let time = new Date().getTime() * 0.002;
//console.log(time);
const color1 = "rgba(163,32,109,0.3)";
const color2 = "rgba(154,25,172,0.4)";
let canvas = document.getElementById("hero-canvas");
let ctx = document.getElementById("hero-canvas").getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
// random float to be used in the sin & cos
let randomX = random(.2, .9);
let randomY = random(.1, .2);
// sin & cos for the movement of the triangles in the canvas
let rectX = Math.cos(time * 1) * 1.5 + randomX;
let rectY = Math.sin(time * 1) * 1.5 + randomY;
let rectX2 = Math.cos(time * .7) * 3 + randomX;
let rectY2 = Math.sin(time * .7) * 3 + randomY;
let rectX3 = Math.cos(time * 1.4) * 4 + randomX;
let rectY3 = Math.sin(time * 1.4) * 4 + randomY;
//console.log(rectX + '-' + rectY + '-' + rectX2 + '-' + rectY2 + '-' + rectX3 + '-' + rectY3);
//triangle gradiente ==========================================
var triangle_gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
triangle_gradient.addColorStop(0, color1);
triangle_gradient.addColorStop(1, color2);
//triangle group 1 ===========================================
// triangle 1.1
ctx.beginPath();
ctx.moveTo(rectX2 + 120, rectY2 - 100);
ctx.lineTo(rectX2 + 460, rectY2 + 80);
ctx.lineTo(rectX2 + 26, rectY2 + 185);
ctx.fillStyle = triangle_gradient;
ctx.fill();
//triangle 1.2
ctx.beginPath();
ctx.moveTo(rectX - 50, rectY - 25);
ctx.lineTo(rectX + 270, rectY + 25);
ctx.lineTo(rectX - 50, rectY + 195);
ctx.fillStyle = triangle_gradient;
ctx.fill();
//triangle 1.3
ctx.beginPath();
ctx.moveTo(rectX3 - 140, rectY3 - 150);
ctx.lineTo(rectX3 + 180, rectY3 + 210);
ctx.lineTo(rectX3 - 225, rectY3 - 50);
ctx.fillStyle = triangle_gradient;
ctx.fill();
//triangle group 2 ===========================================
// triangle 2.1
ctx.beginPath();
ctx.moveTo(rectX + (canvas.width - 40), rectY - 30);
ctx.lineTo(rectX + (canvas.width + 40), rectY + 190);
ctx.lineTo(rectX + (canvas.width - 450), rectY + 120);
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 2.2
ctx.beginPath();
ctx.moveTo(rectX3 + (canvas.width - 200), rectY3 - 240);
ctx.lineTo(rectX3 + (canvas.width + 80), rectY3 - 240);
ctx.lineTo(rectX3 + (canvas.width - 50), rectY3 + 460);
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 2.3
ctx.beginPath();
ctx.moveTo(rectX2 + (canvas.width - 400), rectY2 + 140);
ctx.lineTo(rectX2 + (canvas.width + 20), rectY2 + 200);
ctx.lineTo(rectX2 + (canvas.width - 350), rectY2 + 370);
ctx.fillStyle = triangle_gradient;
ctx.fill();
//triangle group 3 ===========================================
// triangle 3.1
ctx.beginPath();
ctx.moveTo(rectX3 - 50, rectY3 + (canvas.height - 350));
ctx.lineTo(rectX3 + 350, rectY3 + (canvas.height - 220));
ctx.lineTo(rectX3 - 100, rectY3 + (canvas.height - 120));
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 3.2
ctx.beginPath();
ctx.moveTo(rectX + 100, rectY + (canvas.height - 380));
ctx.lineTo(rectX + 320, rectY + (canvas.height - 180));
ctx.lineTo(rectX - 275, rectY + (canvas.height + 150));
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 3.3
ctx.beginPath();
ctx.moveTo(rectX2 - 230, rectY2 + (canvas.height - 50));
ctx.lineTo(rectX2 + 215, rectY2 + (canvas.height - 110));
ctx.lineTo(rectX2 + 250, rectY2 + (canvas.height + 130));
ctx.fillStyle = triangle_gradient;
ctx.fill();
//triangle group 4 ===========================================
// triangle 4.1
ctx.beginPath();
ctx.moveTo(rectX3 + (canvas.width - 80), rectY3 + (canvas.height - 320));
ctx.lineTo(rectX3 + (canvas.width + 250), rectY3 + (canvas.height + 220));
ctx.lineTo(rectX3 + (canvas.width - 200), rectY3 + (canvas.height + 140));
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 4.2
ctx.beginPath();
ctx.moveTo(rectX + (canvas.width - 100), rectY + (canvas.height - 160));
ctx.lineTo(rectX + (canvas.width - 30), rectY + (canvas.height + 90));
ctx.lineTo(rectX + (canvas.width - 420), rectY + (canvas.height + 60));
ctx.fillStyle = triangle_gradient;
ctx.fill();
// triangle 4.3
ctx.beginPath();
ctx.moveTo(rectX2 + (canvas.width - 320), rectY2 + (canvas.height - 200));
ctx.lineTo(rectX2 + (canvas.width - 50), rectY2 + (canvas.height - 20));
ctx.lineTo(rectX2 + (canvas.width - 420), rectY2 + (canvas.height + 120));
ctx.fillStyle = triangle_gradient;
ctx.fill();
ctx.restore();
} //end function draw
//call init
init();
animate();
