HTML-GL/demo/basic-webgl.html at master · PixelsCommander/HTML-GL · GitHub

History

59 lines (55 loc) · 1.89 KB

Raw

<!DOCTYPE html>

<html>

</head>

<html-gl>

This layer is rendered in <h1>WebGL</h1> <span style="color: red;">because</span> it have tag name <b>html-gl</b>

</html-gl>

<button onclick="window.animate()">Animate WebGL layer</button>

<button onclick="window.changeNodeContent()">Change layer content</button>

<button onclick="window.changeNodeTransform()">Simply change layer`s style.transform</button>

<h2>

TODO

</h2>

<ul>

<li>Add more effects presets</li>

</ul>

window.changeNodeContent = function () {

document.getElementsByTagName('html-gl')[0].textContent = 'Animation was smooth, was not it? This is a new content. It is still visible in dev tools, affects HTML layout and is rendered via WebGL.';

}

window.changeNodeTransform = function () {

var element = document.getElementsByTagName('html-gl')[0];

element.style.webkitTransform = 'translateX(400px) translateY(100px)';

element.style.transform = 'translateX(400px) translateY(100px)';

}

document.addEventListener('keydown', function(){

window.devicePixelRatio = window.devicePixelRatio === 1 ? 2 : 1;

HTMLGL.context.resizeViewer();

});

window.animate = function () {

var element = document.getElementsByTagName('html-gl')[0];

var v = Velocity(element, {

translateX: 100,

translateY: 100,

scaleX: 4,

scaleY: 4,

rotateZ: "360deg"

}, {duration: 5000}).then(function () {

Velocity(element, {

translateX: 0,

translateY: 0,

scaleX: 1,

scaleY: 1,

rotateZ: "0"

}, {duration: 5000});

});

}

</script>

</body>

</html>

HTML-GL/demo/basic-webgl.html at master · PixelsCommander/HTML-GL · GitHub

Expand file tree

Breadcrumbs

basic-webgl.html

Latest commit

History

Breadcrumbs

basic-webgl.html

File metadata and controls