Related
I have an Angular 7 app with a home page containing a large coloured block (enough to fill the page) at the top with a header and some images. I want to put some lava effect animations into the background similar to this
code in case link is removed:
HTML:
<canvas id="lamp-anim" class="lamp-anim" width="1034" height="613"></canvas>
CSS:
body {
background: #f857a6; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #ff5858, #f857a6); /* Chrome
10-25, Safari 5.1-6 */
background: linear-gradient(to top, #ff5858, #f857a6); /* W3C, IE 10+/
Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
JS:
window.lavaAnimation = function() {
"use strict";
var t, i = {
screen: {
elem: null,
callback: null,
ctx: null,
width: 0,
height: 0,
left: 0,
top: 0,
init: function(t, i, s) {
return this.elem = document.getElementById(t), this.callback = i || null, "CANVAS" == this.elem.tagName && (this.ctx = this.elem.getContext("2d")), window.addEventListener("resize", function() {
this.resize()
}.bind(this), !1), this.elem.onselectstart = function() {
return !1
}, this.elem.ondrag = function() {
return !1
}, s && this.resize(), this
},
resize: function() {
var t = this.elem;
for (this.width = t.offsetWidth, this.height = t.offsetHeight, this.left = 0, this.top = 0; null != t; t = t.offsetParent) this.left += t.offsetLeft, this.top += t.offsetTop;
this.ctx && (this.elem.width = this.width, this.elem.height = this.height), this.callback && this.callback()
}
}
},
s = function(t, i) {
this.x = t, this.y = i, this.magnitude = t * t + i * i, this.computed = 0, this.force = 0
};
s.prototype.add = function(t) {
return new s(this.x + t.x, this.y + t.y)
};
var h = function(t) {
var i = .1,
h = 1.5;
this.vel = new s((Math.random() > .5 ? 1 : -1) * (.2 + .25 * Math.random()), (Math.random() > .5 ? 1 : -1) * (.2 + Math.random())), this.pos = new s(.2 * t.width + Math.random() * t.width * .6, .2 * t.height + Math.random() * t.height * .6), this.size = t.wh / 15 + (Math.random() * (h - i) + i) * (t.wh / 15), this.width = t.width, this.height = t.height
};
h.prototype.move = function() {
this.pos.x >= this.width - this.size ? (this.vel.x > 0 && (this.vel.x = -this.vel.x), this.pos.x = this.width - this.size) : this.pos.x <= this.size && (this.vel.x < 0 && (this.vel.x = -this.vel.x), this.pos.x = this.size), this.pos.y >= this.height - this.size ? (this.vel.y > 0 && (this.vel.y = -this.vel.y), this.pos.y = this.height - this.size) : this.pos.y <= this.size && (this.vel.y < 0 && (this.vel.y = -this.vel.y), this.pos.y = this.size), this.pos = this.pos.add(this.vel)
};
var e = function(t, i, e, n, a) {
this.step = 5, this.width = t, this.height = i, this.wh = Math.min(t, i), this.sx = Math.floor(this.width / this.step), this.sy = Math.floor(this.height / this.step), this.paint = !1, this.metaFill = r(t, i, t, n, a), this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0], this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1], this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0], this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1], this.grid = [], this.balls = [], this.iter = 0, this.sign = 1;
for (var o = 0; o < (this.sx + 2) * (this.sy + 2); o++) this.grid[o] = new s(o % (this.sx + 2) * this.step, Math.floor(o / (this.sx + 2)) * this.step);
for (var l = 0; e > l; l++) this.balls[l] = new h(this)
};
e.prototype.computeForce = function(t, i, s) {
var h, e = s || t + i * (this.sx + 2);
if (0 === t || 0 === i || t === this.sx || i === this.sy) h = .6 * this.sign;
else {
h = 0;
for (var r, n = this.grid[e], a = 0; r = this.balls[a++];) h += r.size * r.size / (-2 * n.x * r.pos.x - 2 * n.y * r.pos.y + r.pos.magnitude + n.magnitude);
h *= this.sign
}
return this.grid[e].force = h, h
}, e.prototype.marchingSquares = function(t) {
var i = t[0],
s = t[1],
h = t[2],
e = i + s * (this.sx + 2);
if (this.grid[e].computed === this.iter) return !1;
for (var r, n = 0, a = 0; 4 > a; a++) {
var l = i + this.ix[a + 12] + (s + this.ix[a + 16]) * (this.sx + 2),
d = this.grid[l].force;
(d > 0 && this.sign < 0 || 0 > d && this.sign > 0 || !d) && (d = this.computeForce(i + this.ix[a + 12], s + this.ix[a + 16], l)), Math.abs(d) > 1 && (n += Math.pow(2, a))
}
if (15 === n) return [i, s - 1, !1];
5 === n ? r = 2 === h ? 3 : 1 : 10 === n ? r = 3 === h ? 0 : 2 : (r = this.mscases[n], this.grid[e].computed = this.iter);
var p = this.step / (Math.abs(Math.abs(this.grid[i + this.plx[4 * r + 2] + (s + this.ply[4 * r + 2]) * (this.sx + 2)].force) - 1) / Math.abs(Math.abs(this.grid[i + this.plx[4 * r + 3] + (s + this.ply[4 * r + 3]) * (this.sx + 2)].force) - 1) + 1);
return o.lineTo(this.grid[i + this.plx[4 * r] + (s + this.ply[4 * r]) * (this.sx + 2)].x + this.ix[r] * p, this.grid[i + this.plx[4 * r + 1] + (s + this.ply[4 * r + 1]) * (this.sx + 2)].y + this.ix[r + 4] * p), this.paint = !0, [i + this.ix[r + 4], s + this.ix[r + 8], r]
}, e.prototype.renderMetaballs = function() {
for (var t, i = 0; t = this.balls[i++];) t.move();
for (this.iter++, this.sign = -this.sign, this.paint = !1, o.fillStyle = this.metaFill, o.beginPath(), i = 0; t = this.balls[i++];) {
var s = [Math.round(t.pos.x / this.step), Math.round(t.pos.y / this.step), !1];
do s = this.marchingSquares(s); while (s);
this.paint && (o.fill(), o.closePath(), o.beginPath(), this.paint = !1)
}
};
var r = function(t, i, s, h, e) {
var r = o.createRadialGradient(t / 1, i / 1, 0, t / 1, i / 1, s);
return r.addColorStop(0, h), r.addColorStop(1, e), r
};
if (document.getElementById("lamp-anim")) {
var n = function() {
requestAnimationFrame(n), o.clearRect(0, 0, a.width, a.height), t.renderMetaballs()
},
a = i.screen.init("lamp-anim", null, !0),
o = a.ctx;
a.resize(), t = new e(a.width, a.height, 6, "#3494E6", "#EC6EAD")
}
return {
run: n
}
}();
if (document.getElementById('lamp-anim')) {
lavaAnimation.run();
}
setTimeout(function() {
$('.js-works-d-list').addClass('is-loaded');
}, 150);
Is it possible to convert/do this in angular animations? Are they flexible enough to do this sort of (what id call advanced) animation?
I think the question of 'can I convert this to Angular' is a bit off because Angular runs on Typescript, which is a language built from javascript. So, yes you can do all this in Angular or rather using Typescript within an Angular app.
We're always here to help once you get some code written in an Angular app! But in general, we are here to help you were you get stuck in code and help you solve the problem. It's a bit more challenging to say 'yes it will work' without seeing how you implement it in your project and can't really guide or help you until we see how your angular components are written.
Short answer: Yeah, I think it can work. But it also depends how you implement this code into your Angular app.
Does anybody know of a way to make an animated beacon with pure CSS just as on display here: https://codepen.io/rjerue/pen/xagoJG
(function (lib, img, cjs, ss, an) {
var p;
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
lib.ssMetadata = [];
lib.updateListCache = function (cacheList) {
for(var i = 0; i < cacheList.length; i++) {
if(cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function (textInst, cacheList) {
var cur = textInst;
while(cur != null && cur != exportRoot) {
if(cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if(cur != exportRoot) {
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while(cur2 != null && cur2 != cur) {
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
}
else {
cur = textInst;
while(cur != null && cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if(loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if(loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
(lib._3 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AipCqQhGhGAAhkQAAhiBGhHQBGhGBjAAQBkAABGBGQBGBHAABiQAABjhGBHQhGBGhkAAQhjAAhGhGgAiNiMQg6A6AABSQAABTA6A7QA7A6BSAAQBTAAA7g6QA6g7AAhTQAAhSg6g6Qg7g7hTAAQhSAAg7A7g");
this.shape.setTransform(24,24);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,48,48);
(lib._2 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AhwBxQgvguAAhDQAAhBAvgvQAvgvBBAAQBCAAAvAvQAvAvAABBQAABDgvAuQgvAvhCAAQhBAAgvgvgAhUhTQgjAiAAAxQAAAyAjAjQAjAjAxAAQAxAAAkgjQAjgjAAgyQAAgxgjgiQgkgkgxAAQgxAAgjAkg");
this.shape.setTransform(16,16);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,32,32);
(lib._1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#A72008").s().p("AgwAyQgVgVAAgdQAAgcAVgUQAUgVAcAAQAdAAAVAVQAUAUAAAcQAAAdgUAVQgVAUgdAAQgcAAgUgUg");
this.shape.setTransform(7,7);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,14,14);
// stage content:
(lib.Untitled1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// FlashAICB
this.instance = new lib._3("synched",0);
this.instance.parent = this;
this.instance.setTransform(102.5,96,1,1,0,0,0,24,24);
this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));
// Layer 2
this.instance_1 = new lib._2("synched",0);
this.instance_1.parent = this;
this.instance_1.setTransform(102.5,96,1,1,0,0,0,16,16);
this.timeline.addTween(cjs.Tween.get(this.instance_1).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));
// FlashAICB
this.instance_2 = new lib._1("synched",0);
this.instance_2.parent = this;
this.instance_2.setTransform(102.5,96,1,1,0,0,0,7,7);
this.timeline.addTween(cjs.Tween.get(this.instance_2).to({regX:7.1,scaleX:1.79,scaleY:1.79,x:102.7,alpha:0},24).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(178.5,172,48,48);
// library properties:
lib.properties = {
width: 200,
height: 200,
fps: 24,
color: "#000000",
opacity: 1.00,
webfonts: {},
manifest: [],
preloads: []
};
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
var lib, images, createjs, ss, AdobeAn;
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>concentric_circles</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="concentric_circles.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new lib.Untitled1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'both',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(0, 0, 0, 1.00); width:200px; height:200px">
<canvas id="canvas" width="200" height="200" style="position: absolute; display: block; background-color:rgba(0, 0, 0, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:200px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
I'm primarily trying to get it to work on one div that has an image inside of it. I'm primarily having difficulty with getting the concentric circles. I think that I can get away with just doing pules with shadow backgrounds, but this has 3 different circles. One in the middle, and then two along the outside. Would it be better to make it grow and then fade? Or would it make more sense to have shadows, borders, and size actually grow? Are there transform elements? Ideally, this would just be one CSS class that I can tack onto a div, but I could also use before and after pseudoclasses too
Thanks!
Using scss and radial-gradiant seems to have solved my animation woes:
#keyframes ripple {
#for $j from 0 through 100 {
$i: 100 - $j;
$percent: 0% + $j;
$factor: $j/100.0;
$opacity: 1.0 - ($j/100.0) ;
#{$percent} {
background: radial-gradient(rgba(255, 0, 0, $opacity) #{.8em * $factor}, transparent 0, transparent #{1.5em * $factor}, rgba(255, 0, 0, $opacity) 0, rgba(255, 0, 0, $opacity) #{2.5em * $factor}, transparent 0, transparent #{3.5em * $factor}, rgba(255, 0, 0, $opacity) 0, rgba(255, 0, 0, $opacity) #{4.5em * $factor}, transparent 0);
}
}
}
this allows for 1->100 to be nade for the radial gradient. Seems to work in Chrome, but that's what the client wants anyway!
I have a Highcharts component where the user can add comments to a graph, and the comment shows up as a dataLabel in a scatter series. However, I noticed that by default the allowOverlap just removes the dataLabels that collides, and my question to this is: would it be possible to make the colliding dataLabels stack on top of each other? I'm thinking that since the allowOverlap: true can detect which ones that are colliding, there might be a way to take advantage of this?
This is how my dataLabels look now:
This is my goal:
Hope that someone can help me with a clever solution, I sure know I am out of ideas!
By the way, right now the dataLabels gets their xAxis position by dividing the xAxis :{ max: value } by 1,5. This is just to position it equally on all my graphs, which all have different min and max values. Might be worth mentioning.
It is possible to override the funciton that should be hiding the overlapping labels and adjust position of the overlapping labels like this:
$(function() {
(function(H) {
var each = H.each,
UNDEFINED;
H.Chart.prototype.hideOverlappingLabels = function(labels, rerun) {
if (rerun === UNDEFINED ||
rerun < 10) //infinity loop limit
{
var doTheRerun = false,
len = labels.length,
label, i, j, label1, label2,
isIntersecting, pos1, pos2, parent1, parent2,
padding,
intersectRect = function(x1, y1, w1, h1, x2, y2, w2, h2) {
return !(
x2 > x1 + w1 ||
x2 + w2 < x1 ||
y2 > y1 + h1 ||
y2 + h2 < y1
);
};
for (i = 0; i < len; i++) {
label = labels[i];
if (label) {
label.oldOpacity = label.opacity;
label.newOpacity = 1;
}
}
labels.sort(function(a, b) {
return (b.labelrank || 0) - (a.labelrank || 0);
});
for (i = 0; i < len; i++) {
label1 = labels[i];
for (j = i + 1; j < len; ++j) {
label2 = labels[j];
if (label1 && label2 && label1.placed && label2.placed && label1.newOpacity !== 0 && label2.newOpacity !== 0) {
pos1 = label1.alignAttr;
pos2 = label2.alignAttr;
parent1 = label1.parentGroup; // Different panes have different positions
parent2 = label2.parentGroup;
padding = 2 * (label1.box ? 0 : label1.padding); // Substract the padding if no background or border (#4333)
isIntersecting = intersectRect(
pos1.x + parent1.translateX,
pos1.y + parent1.translateY,
label1.width - padding,
label1.height - padding,
pos2.x + parent2.translateX,
pos2.y + parent2.translateY,
label2.width - padding,
label2.height - padding
);
if (isIntersecting) {
(label1.labelrank < label2.labelrank ? label1 : label2).addHeightOffset = true;
}
}
}
}
each(labels, function(label) {
var complete,
newOpacity;
if (label) {
if (label.addHeightOffset && label.placed) {
label.alignAttr.y -= label.height;
label.addHeightOffset = false;
doTheRerun = true;
}
label['attr'](label.alignAttr);
}
});
if (doTheRerun) {
rerun = (rerun || 0) + 1;
H.Chart.prototype.hideOverlappingLabels(labels, rerun);
}
}
};
}(Highcharts))
$('#container').highcharts({
series: [{
dataLabels: {
enabled: true,
format: 'The value that is important for this point is: {y}'
},
data: [1, 2, 1, 1, 2, 2, 2]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Demo in JSFiddle: http://jsfiddle.net/ozLtvwke/1/
I am searching for a script that creates a glass break effect with text using CSS but I didn't find anything.
I used this but
// triangulation using https://github.com/ironwallaby/delaunay
// For more check out zachsaucier.com
const TWO_PI = Math.PI * 2;
var images = [],
imageIndex = 0;
var image,
imageWidth = 50,
imageHeight = 50;
var vertices = [],
indices = [],
prevfrag = [],
fragments = [];
var margin = 50;
var container = document.getElementById('container');
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
window.onload = function() {
TweenMax.set(container, {
perspective: 500
});
// images from http://www.hdwallpapers.in
var urls = [
'http://i.imgur.com/QddsEpk.jpg',
'http://i.imgur.com/OeDykaH.jpg',
'http://i.imgur.com/lLHspCj.jpg',
'http://i.imgur.com/tCz9GQS.jpg'
],
image,
loaded = 0;
// very quick and dirty hack to load and display the first image asap
images[0] = image = new Image();
image.onload = function() {
if (++loaded === 1) {
for (var i = 1; i < 4; i++) {
images[i] = image = new Image();
image.src = urls[i];
}
placeImage();
}
};
image.src = urls[0];
};
function placeImage(transitionIn) {
image = images[imageIndex];
if (++imageIndex === images.length) imageIndex = 0;
var num = Math.random();
if (num < .25) {
image.direction = "left";
} else if (num < .5) {
image.direction = "top";
} else if (num < .75) {
image.direction = "bottom";
} else {
image.direction = "right";
}
container.appendChild(image);
image.style.opacity = 0;
if (transitionIn !== false) {
triangulateIn();
}
}
function triangulateIn(event) {
var box = image.getBoundingClientRect(),
top = box.top,
left = box.left;
if (image.direction == "left") {
clickPosition[0] = 0;
clickPosition[1] = imageHeight / 2;
} else if (image.direction == "top") {
clickPosition[0] = imageWidth / 2;
clickPosition[1] = 0;
} else if (image.direction == "bottom") {
clickPosition[0] = imageWidth / 2;
clickPosition[1] = imageHeight;
} else if (image.direction == "right") {
clickPosition[0] = imageWidth;
clickPosition[1] = imageHeight / 2;
}
triangulate();
build();
}
function triangulate() {
for (var i = 0; i < 40; i++) {
x = -margin + Math.random() * (imageWidth + margin * 2);
y = -margin + Math.random() * (imageHeight + margin * 2);
vertices.push([x, y]);
}
vertices.push([0, 0]);
vertices.push([imageWidth, 0]);
vertices.push([imageWidth, imageHeight]);
vertices.push([0, imageHeight]);
vertices.forEach(function(v) {
v[0] = clamp(v[0], 0, imageWidth);
v[1] = clamp(v[1], 0, imageHeight);
});
indices = Delaunay.triangulate(vertices);
}
function build() {
var p0, p1, p2,
fragment;
var tl0 = new TimelineMax({
onComplete: buildCompleteHandler
});
for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
fragment = new Fragment(p0, p1, p2);
var dx = fragment.centroid[0] - clickPosition[0],
dy = fragment.centroid[1] - clickPosition[1],
d = Math.sqrt(dx * dx + dy * dy),
rx = 30 * sign(dy),
ry = 90 * -sign(dx),
delay = d * 0.003 * randomRange(0.9, 1.1);
fragment.canvas.style.zIndex = Math.floor(d).toString();
var tl1 = new TimelineMax();
if (image.direction == "left") {
rx = Math.abs(rx);
ry = 0;
} else if (image.direction == "top") {
rx = 0;
ry = Math.abs(ry);
} else if (image.direction == "bottom") {
rx = 0;
ry = -Math.abs(ry);
} else if (image.direction == "right") {
rx = -Math.abs(rx);
ry = 0;
}
tl1.from(fragment.canvas, 1, {
z: -50,
rotationX: rx,
rotationY: ry,
scaleX: 0,
scaleY: 0,
ease: Cubic.easeIn
});
tl1.from(fragment.canvas, 0.4, {
alpha: 0
}, 0.6);
tl0.insert(tl1, delay);
fragments.push(fragment);
container.appendChild(fragment.canvas);
}
}
function buildCompleteHandler() {
// add pooling?
image.style.opacity = 1;
image.addEventListener('transitionend', function catchTrans() {
fragments.forEach(function(f) {
container.removeChild(f.canvas);
});
fragments.length = 0;
vertices.length = 0;
indices.length = 0;
placeImage();
this.removeEventListener('transitionend', catchTrans, false);
}, false);
}
//////////////
// MATH UTILS
//////////////
function randomRange(min, max) {
return min + (max - min) * Math.random();
}
function clamp(x, min, max) {
return x < min ? min : (x > max ? max : x);
}
function sign(x) {
return x < 0 ? -1 : 1;
} < script >
//////////////
// FRAGMENT
//////////////
Fragment = function(v0, v1, v2) {
this.v0 = v0;
this.v1 = v1;
this.v2 = v2;
this.computeBoundingBox();
this.computeCentroid();
this.createCanvas();
this.clip();
};
Fragment.prototype = {
computeBoundingBox: function() {
var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),
xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),
yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),
yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);
this.box = {
x: Math.round(xMin),
y: Math.round(yMin),
w: Math.round(xMax - xMin),
h: Math.round(yMax - yMin)
};
},
computeCentroid: function() {
var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
this.centroid = [x, y];
},
createCanvas: function() {
this.canvas = document.createElement('canvas');
this.canvas.width = this.box.w;
this.canvas.height = this.box.h;
this.canvas.style.width = this.box.w + 'px';
this.canvas.style.height = this.box.h + 'px';
this.canvas.style.left = this.box.x + 'px';
this.canvas.style.top = this.box.y + 'px';
this.ctx = this.canvas.getContext('2d');
},
clip: function() {
this.ctx.save();
this.ctx.translate(-this.box.x, -this.box.y);
this.ctx.beginPath();
this.ctx.moveTo(this.v0[0], this.v0[1]);
this.ctx.lineTo(this.v1[0], this.v1[1]);
this.ctx.lineTo(this.v2[0], this.v2[1]);
this.ctx.closePath();
this.ctx.clip();
this.ctx.drawImage(image, 0, 0);
this.ctx.restore();
}
};
body {
background-color: #000;
margin: 0;
overflow: hidden;
}
canvas {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
img {
position: absolute;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
#container {
position: absolute;
width: 25px;
height: 25px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="container"></div>
Main code for this is from here but I want glassbreak like this using CSS
So while I don't have a specific example of glass breaking with CSS3, I do recommend this kind of effect would probably work very well with glass breaking:
http://www.species-in-pieces.com/
As you notice they use CSS3 polygons to render out shapes of animals. Here's an example snip from the site:
-webkit-clip-path: polygon(44.65% 39.571%, 35.85% 59.429%, 52.85% 50.857%);
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
transition-duration: .8s;
Essentially you'd define webkit transforms through each defined polygon for the effect. Drawbacks of using a feature like this is it's currently only supported in webkit browsers, but at the same time that kind of animation affect would be pretty hard to do cross browser support for in CSS.
If I have some time I'll come around and do a quick glass breaking fiddle tomorrow
i´m using Obout grid - Column Sets
There are two possibles scenarios.
1.- The Text Header moves when i scroll the grid and i set in the scrollingSetting
the property NumberOfFixedColumns to 0 , here everything works fine.
2.- The Text Header doesn´t moves when i scroll the grid and i set in the scrollingSetting
the property NumberOfFixedColumns different to 0
So i wanna use a fixed column but it doesn´t work properly.
The code use for this in the web page:
<link href="../App_Themes/Theme7/styles/oboutgrid/column-set.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
window.onload = function () {
//Grid1.addColumnSet(level, startColumnIndex, endColumnIndex, text);
grdCatalogo.addColumnSetScrollGrid(0, 0, 8, '');
grdCatalogo.addColumnSetScrollGrid(0, 9, 10, 'Cliente');
}
</script>
the code of the column-set.js:
oboutGrid.prototype.addColumnSetScrollGrid = function (level, startColumnIndex, endColumnIndex, text) {
if (typeof (this.GridColumnSetsContainer) == 'undefined') {
this.GridColumnSetsContainer = document.createElement('DIV');
this.GridColumnSetsContainer.className = 'ob_gCSContScroll';
this.GridColumnSetsContainer.style.width = this.GridMainContainer.style.width;
this.GridMainContainer.appendChild(this.GridColumnSetsContainer);
}
if (typeof (this.ColumnSets) == 'undefined') {
this.ColumnSets = new Array();
}
if (typeof (this.ColumnSets[level]) == 'undefined') {
this.ColumnSets[level] = new Array();
this.GridHeaderContainer.firstChild.style.marginTop = (level + 1) * 25 + 'px';
var levelContainer = document.createElement('DIV');
levelContainer.className = "ob_gCSContLevel";
levelContainer.style.width = this.GridHeaderContainer.firstChild.firstChild.offsetWidth + 'px';
this.GridColumnSetsContainer.appendChild(levelContainer);
}
// if ($(this.GridMainContainer).css('width') <= $(this.GridColumnSetsContainer).css('width')) {
// var newWidth = $(this.GridColumnSetsContainer).css('width') - $(this.GridMainContainer).css('width');
// $(this.GridColumnSetsContainer).css('width',newWidth);
// }
var columnSet = document.createElement('DIV');
columnSet.className = 'ob_gCSet';
this.GridColumnSetsContainer.childNodes[level].appendChild(columnSet);
//var position = this.GridHeaderContainer.position();
var position = this.GridHeaderContainer.getBoundingClientRect()
var top = position.top;
var left = position.left;
$(this.GridColumnSetsContainer).css({ "top": top });
$(this.GridColumnSetsContainer).css({ "margin-left": left });
var columnSetContent = document.createElement('DIV');
columnSetContent.innerHTML = text;
columnSet.appendChild(columnSetContent);
columnSet.style.width = columnSetWidth + 'px';
if (endColumnIndex < this.ColumnsCollection.length - 1) {
var tempLevel = level;
if (!(level == 0 || this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top)) {
tempLevel -= 1;
}
var newTop = (-1 - tempLevel) * (25);
this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top = newTop + 'px';
}
if (this.ColumnsCollection.lenght != 0) {
var columnSetWidth = 0;
for (var i = startColumnIndex; i <= endColumnIndex; i++) {
if (this.ColumnsCollection[i] != null && this.ColumnsCollection[i] != 'undefined' && this.ColumnsCollection[i].Visible) {
columnSetWidth += this.ColumnsCollection[i].Width;
}
}
}
columnSet.style.width = columnSetWidth + 'px';
var columnSetObject = new Object();
columnSetObject.Level = level;
columnSetObject.StartColumnIndex = startColumnIndex;
columnSetObject.EndColumnIndex = endColumnIndex;
columnSetObject.ColumnSet = columnSet;
this.ColumnSets[level].push(columnSetObject);
}
oboutGrid.prototype.resizeColumnSets = function () {
for (var level = 0; level < this.ColumnSets.length; level++) {
for (var i = 0; i < this.ColumnSets[level].length; i++) {
var columnSetWidth = 0;
for (var j = this.ColumnSets[level][i].StartColumnIndex; j <= this.ColumnSets[level] [i].EndColumnIndex; j++) {
if (this.ColumnsCollection[j].Visible) {
columnSetWidth += this.ColumnsCollection[j].Width;
}
}
this.ColumnSets[level][i].ColumnSet.style.width = columnSetWidth + 'px';
}
}
}
oboutGrid.prototype.resizeColumnOld = oboutGrid.prototype.resizeColumn;
oboutGrid.prototype.resizeColumn = function (columnIndex, amountToResize, keepGridWidth) {
this.resizeColumnOld(columnIndex, amountToResize, keepGridWidth);
this.resizeColumnSets();
}
oboutGrid.prototype.synchronizeBodyHorizontalScrollingOld = oboutGrid.prototype.synchronizeBodyHorizontalScrolling;
oboutGrid.prototype.synchronizeBodyHorizontalScrolling = function () {
this.synchronizeBodyHorizontalScrollingOld();
//this.GridColumnSetsContainer.style.marginLeft = -1 * this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridHeaderContainer.firstChild.style.marginLeft = -1 * this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridColumnSetsContainer.scrollLeft = this.GridBodyContainer.firstChild.scrollLeft;
}
The css file:
.ob_gCSContScroll
{
position: absolute !important;
/*top: 17px !important;*/
left: 0px !important;
right: 0px !important;
overflow: hidden;
width: 1179px;
margin-left: 47px;
}
/* A column set row (level) */
.ob_gCSContLevel
{
height: 25px !important;
background-image: url(column-set.png);
background-repeat: repeat-x;
background-color: #A8AEBD;
}
/* The column set for a number of columns */
.ob_gCSet
{
color: #01354D;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
float: left;
text-align: center;
}
/* The text of a column set */
.ob_gCSet div
{
margin-left: 20px;
margin-top: 3px;
}
/* The separator between two column sets */
.ob_gCSetSep
{
top: -25px !important;
}
.ob_gHCont, .ob_gHContWG
{
z-index: 10 !important;
}
.ob_gHICont
{
overflow: visible !important;
}
I have found the solution, i had to modify the next files:
1.- I had to add the next line in the method addColumnSet of the column-set.js file :
this.GridColumnSetsContainer.setAttribute("id","BarraScroll");
I added it just after this line:
this.GridColumnSetsContainer.className = 'ob_gCSCont';
2.- i had to modify the next function : oboutGrid.prototype.synchronizeFixedColumns that is in the oboutgrid_scrolling.js file, and the method with all the changes is the next one, this method is called every time that that the user scroll the grid and the property NumberOrFixedColumns of the tag ScrollSetting that is inside of the grids tag is different of zero:
oboutGrid.prototype.synchronizeFixedColumns = function() {
var b = this.HorizontalScroller.firstChild.scrollLeft;
if (this.PreviousScrollLeft == b) return;
else this.PreviousScrollLeft = b;
var g = parseInt(this.ScrollWidth);
if (this.FixedColumnsPosition == 1) {
for (var f = this.getVisibleColumnsWidth(false), c = false, a = this.NumberOfFixedColumns; a < this.ColumnsCollection.length - 1; a++)
if (f > g) {
if (this.ColumnsCollection[a].Visible)
if (b >= this.ScrolledColumnsWidth) {
this.hideColumn(a, false, false);
this.markColumnsAsScrolled(a);
f = this.getVisibleColumnsWidth(false);
document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
. c = true
} else break
} else break;
if (!c)
for (var a = this.ColumnsCollection.length - 2; a >= this.NumberOfFixedColumns; a--)
if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
if (b <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
document.getElementById("BarraScroll").scrollLeft = b;
this.showColumn(a, false, false);
this.unmarkColumnsAsScrolled(a)
} else break
} else {
for (var e = false, c = false, d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth, a = 1; a < this.ColumnsCollection.length - this.NumberOfFixedColumns; a++)
if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
if (b - d >= this.ScrolledColumnsWidth) {
document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
this.showColumn(a, false, false);
this.markColumnsAsScrolled(a);
e = true
} else break;
var h = false;
if (!e)
for (var a = this.ColumnsCollection.length - this.NumberOfFixedColumns - 1; a > 0; a--)
if (this.ColumnsCollection[a].Visible)
if (b - d <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
document.getElementById("BarraScroll").scrollLeft = b;
this.hideColumn(a, false, false);
this.unmarkColumnsAsScrolled(a);
d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth;
c = true
} else break;
if (e || c) {
this.rightAlignGridContent();
if (b == 0) {
this.PreviousFixedColumnsWidth = this.getFixedColumnsWidth();
this.ScrolledColumnsIndexes = ",";
this.updateScrolledColumnsWidth()
}
}
}
};