Canvas animation as div background - EaselJS - javascript

First, I'm sorry for my bad english ^^
I'm working on my web site and I would like to put my canvas animation (created with easelJS framework) in my div background.
I tried something like this :
.canvas-bg {
background: -webkit-canvas(animation);
}
var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
It work on safari (but the animation is paused when I refresh the page) and not working at all on chrome...
So, have you any way to make an animated canvas as div background ?
Like the blue banner of this web site for example : http://www.createjs.com/easeljs
Thanks a lot !
Julien.

You can include the canvas in your DIV, and then set it's position as absolute. Other content in the DIV will sit on top.
#canvas {
position: absolute;
display: inline;
}
Here is a quick sample:
http://jsfiddle.net/obcv1rex/1/
You can add text to the first DIV to see it scroll. I set the size to 1000x1000, but to make it more dynamic you would want to size the canvas with JavaScript (using CSS will scale the contents).

Related

Background Image is cropped when it is scaled - Is there a way to avoid the image from getting cropped?

I am currently working on a use case where I set a map as background to canvas and draw over it with zoom option also integrated to it. I am using scale to zoom in and after zoom left and top of the image is getting cropped which is eventually visible after zoom out.
I am loading canvas into a DIV with scroll and the expectation is to avoid image from getting cropped after scale in and scroll should dynamically increase during scale in.
Below is the sample snippet which I have written in plain HTML and JS. In case if anyone has the solution or workaround for the same, please help . Thanks in Advance
NOTE: Even if there is any plugin available in Angular, please comment, as I am using Angular real time and I have created a simple project to test the functionality
<html>
<head>
<style>
#canvasId{
background-image:url('https://www.hauteresidence.com/wp-content/uploads/2013/04/1049-Fifth-Avenue-PH3-floor-plan-high-res-e1366734485238-1024x792.jpg');
width: 1300px;
height:1300px;
background-repeat:no-repeat;
overflow : auto;
}
</style>
<script>
function myFunction(eventObj) {
var scale =document.getElementById("canvasId").getAttribute("scl");
if(scale==undefined)
scale = 0;
else
scale = parseInt(scale);
scale += eventObj.deltaY * -0.01;
scale = Math.min(Math.max(.125,scale),5);
document.getElementById("canvasId").setAttribute("scl",scale);
var check =document.getElementById("canvasId").getAttribute("scl");
if(scale>=1)
document.getElementById("canvasId").style.transform = "scale("+scale+","+scale+")";
}
</script>
<body>
<div style="width:700px;height:400px;overflow:scroll">
<canvas id ="canvasId" onWheel="myFunction(event)">
</canvas>
</div>
</body>
</html>
Temani's suggestion of transform-origin is exactly what i needed to solve the 'cropping' behavior.
By default, the transform-origin value is set to '50% 50% 0', or 'center center'. This means that the scaling or Zoom effect we apply emanates from the center of the target(image) and 'bleeds' over the left side of the div more and more.. it becomes unreachable by scrolling and seems 'cropped'.
Setting the transform-origin to:
transform-origin: 0% 0% 0px;
or transform-origin: top left 0px;
changes the anchor point from where the transform/scaling begins, so that it always scales from the left to right and the entire image remains viewable with scrolling.
i made a fiddle showing my result here...
https://jsfiddle.net/trentHarlem/hc5gs3nx/31/
and these were helpful with visualizing whats happening
https://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm
https://css-tricks.com/almanac/properties/t/transform-origin/

Hiding an embedded aframe scene

I want to programmatically hide and show my embedded aframe scene. The scene is hidden when the website is loaded, however I only get it to work with a delay like this:
window.onload = function () {
setTimeout(function() { document.getElementById("scene-page").setAttribute("hidden", ""); }, 500);
}
When I don't add this delay, the scene remains hidden, even after setting it to 'visible' again. Specifically, the size of the canvas seems to be resized to 0px:
<canvas class="a-canvas a-grab-cursor" data-aframe-canvas="true" width="0" height="0" style="width: 0px; height: 0px;"></canvas>
The only way to make it visible then is to resize the browser window, which then seems to resize the canvas.
Is there a better way to hide the scene without the delay?
From what i see (posts like here, or here), if you set display: none before the entire canvas loads, the canvas / renderer / camera properties won't set up properly.
I tried waiting for the a-scene's loaded/renderstart event, window.onload, and the internal entities, still it seems to mess up the canvas settings.
The reason why it's working when you resize the window is because the scene has a listener for resize which updates all of these accordingly with the canvas width / height. I'm not sure if its possible to call the resize manually.
Check it out here -> just search for this.resize, there are 3 hits, one in the a-scene.
It seems easier and safer to place a blank <div> if front of the a-frame canvas with a fixed position, which will be switched from display: none to block. live fiddle here !
Once the scene is up and running, You can toggle its display all you want though! live fiddle here !

Change background image smoothly

I tried to make changing background effect append to the body when page scrolls within specific amount which scroll at 50%,20%,10% rate of page
Here is what i got so far Full Screen Fiddle
Below is the sample code :
HTML :
<div>
<p>...</p>
<!-- more <p> elements below -->
</div>
And the script :
jQuery(window).scroll(function () {
var JarakScroll = 200; // jarak scrol
var JumlahJarakPasScroll = jQuery(window).scrollTop();
if (JumlahJarakPasScroll > JarakScroll) {
jQuery('html').addClass('scrolled');
} else {
jQuery('html').removeClass('scrolled');
}
});
The background was changing but with no effect, anyone can help applying nice effect ?
If you want the background image to change with a nice effect it might be better if you have the background images applied to two divs that have 100% width and 100%height of the body and are placed correctly with z-index.
More specifically, place the first div on top of the second div and when you want the background image to change, fadeOut the first div. That'll be a neat effect. I'm assuming you can code this on your ownn.

JQuery UI resizable/draggable loses 'grip' when moving on top of video element

I have a page with an embedded youtube video, and I'm trying to implement a custom overlay where you can define areas using a resizable and draggable <div> (using JQuery UI).
When dragging the <div> in other areas of the screen, it's perfectly responsive, but when over the video (embedded using the IFrame API, incase it matters), if you move the mouse at anything other than a crawl, it will regularly 'lose its grip' on the resize handles or the move handle. This is the case in both IE and Chrome.
JSFiddle here: http://jsfiddle.net/MfZes/1/ (draggable box is below the youtube frame)
Does anyone know why this is, or if it's avoidable?
Thanks in advance.
I've done this before.
You can hook onto the dragstart, resizestart, dragstop and resizestop events of jquery ui's resizeable and draggable plugins.
Put the video in a container div. Alongside the video, insert another div which will act as an overlay. Set the width and height to 100%, position it absolutely and set the display to hidden.
When the resize/drag start events fire, show the overlay div. When they stop, hide it. (You need to hide it as you still want to be able to interact with the video when you're not resizing or dragging.
I had the same problem but with hover on canvas:
$('.DraggableDiv').draggable({
start : function() {
var d = document.createElement('div');
$(d).addClass('canvas_shadow');
$('.canvasContainer').append(d);
},
stop : function() {
$( ".canvas_shadow" ).remove();
});
add css for .canvas_shadow:
.canvas_shadow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.1;
z-index: 80;
}

Can this Flash effect be receated with JS and css?

take a look at the first panel (in red) on the homepage.
http://www.boomtown.co.za/
I'd like to do something like this with an invisible image and only reveal parts of it as the mouse tracks over. Is this possible without using Flash?
This can be done quite easily using some css and background positioning with javascript. Here's 2 examples : http://jsbin.com/ococal/3
The source code is quite easy to understand and you can start working out with this.
You could do it by using a transparent png image that was a radial fade from transparent in the centre to semi-transparent at the edges and making it follow the mouse.
document.onmousemove=mousefollower
function mousefollower(e){
x = (!document.all)? e.pageX : event.x+document.body.scrollLeft;
y = (!document.all)? e.pageY : event.y+document.body.scrollTop;
document.getElementById('myImage').style.left = x + 'px';
document.getElementById('myImage').style.top = y + 'px';
}
Obviously you can use jQuery for this too, and set the mousemove function to occur only over a specific div. Also make sure the image you use is large enough (at least twice the size) so that the edges don't show up when you move to the far sides of the div (this means that for large areas you will need a huge image so it may get a big laggy). Put the image in the div and set overflow to none to clip anything that falls outside of the area.
It is possible yes, but only in modern browsers (chrome, safari, firefox, opera).
You would need to have two <div>'s
like so..
<div class="container">
<div class="revealer"></div>
</div>
and CSS like so
.container {
position: relative;
background: url("images/your-background.jpg");
}
.revealer {
position: absolute;
//set the mask size to be the size of the container
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url("images/your-background-over-state.jpg");
//css3 image masks, this is not cross browser, see the demo for
// cross browser syntax
mask: url("images/mask-shape.png") no-repeat;
//make sure the mask is off screen at first, by setting the mask position
//to minus the width and height of your mask image
mask-position: -300px -300px
}
And the JS
window.addEventListener('load',function(){
var background = document.querySelector('.container'),
revealer = document.querySelector('.revealer');
background.addEventListener('mousemove', function(e){
//the minus represents the half the width/height of your mask image
// to make the reveal centred to the mouse.
var x = e.offsetX - 150,
y = e.offsetY - 150;
// move the position of the mask to match the mouse offsets
revealer.style.maskPosition = x+'px '+y+'px';
return false;
});
});
Because of the way this works you need to ensure that any other content in the .container has a higher z-index than the mask to ensure the content is not masked. To do this add relative positioning to the elements in the container
like so
.container *:not(.revealer) {
position: relative;
z-index: 2;
}
Images used in masks are images where the solid colours create the visible or fill area, and the transparent areas are the mask or cut out.
Demo with cross browser code

Categories