console
var accuracy = 5
var total = accuracy * 200
canvas = document.getElementById('main');
ctx = canvas.getContext('2d')
int = 0;
create_canvas = function(canvas_id, url) {
var t = this;
this.canvas_name = document.getElementById(canvas_id);
this.canvas_ctx = this.canvas_name.getContext('2d');
this.url = url;
this.canvas_image = new Image();
this.canvas_image.src = this.url + '?' + new Date().getTime();
this.canvas_image.setAttribute('crossOrigin', '');
this.pixel_data = new Array();
this.canvas_image.onload = function() {
console.log(int)
int++;
if (int == 4) {
$('.l').fadeOut(100);
setTimeout(function() {
$('.bar').fadeIn(200);
}, 100)
}
t.canvas_ctx.drawImage(t.canvas_image, 0, 0, t.canvas_ctx.canvas.width, t.canvas_ctx.canvas.height);
get_image_data(t.canvas_ctx, t.pixel_data);
}
this.animate_to_image = function() {
if (this.pixel_data.length == 0) {
setTimeout(function() {
t.animate_to_image();
}, 500);
}
for (i in pixels) {
pixels[i].resetPixel();
}
for (i in t.pixel_data) {
if (pixels[i]) {
pixels[i].x = t.pixel_data[i].x;
pixels[i].y = t.pixel_data[i].y;
pixels[i].r = t.pixel_data[i].r;
pixels[i].g = t.pixel_data[i].g;
pixels[i].b = t.pixel_data[i].b;
pixels[i].a = t.pixel_data[i].a;
pixels[i].size = t.pixel_data[i].size;
}
}
animate(pixels);
}
}
var def = new create_canvas('def', '/uploads/161101/morph1.png');
var statistics = new create_canvas('statistics', '/uploads/161101/morph2.png');
var security = new create_canvas('security', '/uploads/161101/morph3.png');
var notifications = new create_canvas('notifications', '/uploads/161101/morph4.png');
var users = new create_canvas('users', '/uploads/161101/morph5.png');
def.animate_to_image();
function get_image_data(obj, arr) {
for (var x = 0; x < obj.canvas.width; x += accuracy) {
for (var y = 0; y < obj.canvas.height; y += accuracy) {
var pix = obj.getImageData(x, y, 1, 1).data;
var r = pix[0];
var g = pix[1];
var b = pix[2];
var a = pix[3]
var pixel_data = {
x: x,
y: y,
r: r,
g: g,
b: b,
a: a,
size: 2
}
if (pixel_data.r != 0 && pixel_data.g != 0 && pixel_data.b != 0) {
arr.push(pixel_data);
}
}
}
}
var pixel = function() {
this.from_x = ctx.canvas.width / 2;
this.from_y = ctx.canvas.width / 2;
this.from_r = Math.floor(Math.random() * 255);
this.from_g = Math.floor(Math.random() * 255);
this.from_b = Math.floor(Math.random() * 255);
this.x = 0;
this.y = 0;
this.size = 4;
this.r = Math.floor(Math.random() * 255);
this.g = Math.floor(Math.random() * 255);
this.b = Math.floor(Math.random() * 255);
this.resetPixel = function() {
this.x = ctx.canvas.width / 2;
this.y = ctx.canvas.height / 2;
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 0;
this.size = 0;
}
}
var pixels = [];
for (var i = 0; i < total; i++) {
pixels.push(new pixel())
}
function animate(obj) {
if (obj) {
obj.sort(function() {
return 0.5 - Math.random()
});
for (var i in obj) {
TweenLite.fromTo(obj[i], 1.78, {
r: obj[i].from_r,
g: obj[i].from_g,
b: obj[i].from_b,
a: obj[i].from_a,
x: obj[i].from_x,
y: obj[i].from_y,
}, {
x: obj[i].x,
y: obj[i].y,
r: obj[i].r,
g: obj[i].g,
a: obj[i].a,
b: obj[i].b,
ease: Elastic.easeOut.config(1.2, .35),
onUpdate: drawImage,
onUpdateParams: [obj[i], i],
delay: .0002 * i
});
}
}
}
function drawImage(obj, index) {
if (index == 0) {
}
ctx.beginPath();
ctx.arc(obj.x, obj.y, obj.size, 0, 2 * Math.PI, false);
ctx.shadowColor = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
ctx.lineWidth = 2;
ctx.fill();
obj.from_x = obj.x;
obj.from_y = obj.y;
obj.from_r = obj.r;
obj.from_g = obj.g;
obj.from_b = obj.b;
obj.from_a = obj.a;
}
$('.bar_item').mouseenter(function() {
ctx.clearRect(0, 0, 500, 500);
var t = $(this).data('canvas');
var c = $(this).data('color')
eval(t).animate_to_image();
TweenLite.to('.overlay', 1, {
backgroundColor: c,
opacity: 1,
backgroundPosition: Math.random() * 600 + 100 + "px " + Math.random() * 600 + 100 + "px",
ease: Power3.easeOut
});
TweenLite.fromTo('.buy', .14, {
right: '-20px',
opacity: 1
}, {
right: '-100px',
opacity: 0
})
setTimeout(function() {
TweenLite.fromTo('.buy', .14, {
right: '-100px',
opacity: 0
}, {
right: '-20px',
opacity: 1
})
}, 140)
})
$('.bar_item').mouseout(function() {
})
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div class='overlay'></div>
<div class='c'>
<div class='i'>
<canvas height='350' id='main' width='350'></canvas>
<canvas height='350' id='def' width='350'></canvas>
<canvas height='350' id='statistics' width='350'></canvas>
<canvas height='350' id='security' width='350'></canvas>
<canvas height='350' id='notifications' width='350'></canvas>
<canvas height='350' id='users' width='350'></canvas>
<div class='buy'>
Buy Now
</div>
<div class='l'>
loading...
</div>
<div class='bar'>
<div class='bar_item' data-canvas='statistics' data-color='#E58471'>
My Teddy Bear
<span>Super cute teddy</span>
</div>
<div class='bar_item' data-canvas='security' data-color='#F4E1B0'>
My Dinosaur Bear
<span>Baby Dinosaur Teddy</span>
</div>
<div class='bar_item' data-canvas='notifications' data-color='#5D99A8'>
My Robert Robot
<span>Beep boop bop</span>
</div>
<div class='bar_item' data-canvas='users' data-color='#876869'>
My Bunny Teddy
<span>Ahhhh, what's up doc?</span>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
#def,
#statistics,
#security,
#notifications,
#users {
display: none;
}
* {
box-sizing: border-box;
}
.i {
background: white;
height: 100px;
position: absolute;
top: 50%;
height: 250px;
width: 100%;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
z-index: 2;
border-radius: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #a98578;
}
body {
color: White;
font-family: 'Indie Flower', cursive;
font-weight: 900;
margin: 0;
padding: 0;
}
#main {
position: absolute;
right: -30px;
z-index: 10;
top: 50%;
margin: auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #a75b38;
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png");
z-index: 2;
pointer-events: none;
background-size: 230px;
background-blend-mode: multiply;
}
.l {
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c {
width: 450px;
height: 100vh;
margin: 0 auto;
position: relative;
}
.buy {
position: absolute;
right: -20px;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
padding: 10px 30px;
bottom: -24px;
opacity: 0;
z-index: 11;
background: #b8e057;
color: #7a923f;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.18);
}
.bar {
display: none;
margin-top: 12px;
position: absolute;
bottom: 60px;
width: 200px;
height: 250px;
z-index: 2;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.bar_item {
display: block;
text-align: left;
margin-right: -3px;
cursor: pointer;
font-weight: 200;
padding: 8px 28px;
font-size: 15px;
-webkit-transition: all .3s;
transition: all .3s;
}
.bar_item span {
display: block;
font-size: 10px;
opacity: 0.7;
margin-top: 4px;
}
.bar_item:nth-of-type(1):hover {
color: #d44473;
}
.bar_item:nth-of-type(2):hover {
color: #fbd05f;
}
.bar_item:nth-of-type(3):hover {
color: #5bb3ca;
}
.bar_item:nth-of-type(4):hover {
color: #e6a13b;
}