How to work with HTML elements underneath a canvas - javascript

I have a container of some HTML divs and with some CSS if I hover over them, the background color changes. I want to overlay a canvas on top of the container so that I can draw lines. The problem is that when the canvas is overlaid, the hovering changes of the divs no longer works. Is there a way to overlay a canvas but still have CSS or JavaScript onmouseover events still work on the elements beneath?

So you want sort of a transparent canvas which passes all mouse events except clicks to the elements behind it?
IMHO, you'd need to use JS for that: Capture all the events on the canvas, then manually pass them on to the div behind the canvas. If you have multiple divs, you'd need some sort of lookup depending on the (x,y) coordinates of the mouse.

An alternative to going through all that hassle would be by using the pointer-events CSS attribute. Mozilla,Webkit and IE6-8(excanvas) all support this. Opera does not, but I really don't care.
<canvas style="pointer-events:none;"></canvas>

Related

How to make an SVG self-animate

My website home page http://creativespectrums.com/ contains an SVG made out of concentric circles. I would like to bring life to it.
Is it possible to make it self-animate with a random pattern? I would also like it to respond to hovering. The effect I am looking for is similar to this: https://www.youtube.com/watch?v=rNJw4AA0Gus.
Considering you have the SVG as a background image you can use CSS to animate the whole image.
You can also animate each layer differently but this will require a IMG tag for your svg and this is not supported in IE for img tag animation.
What I would recommend is to make each layer a separate background image on multiple elements then animate them all when the container is hovered over.
Hope this helps

SVG.Set doesn't act on all elements

TL;DR: Animating transform attribute on an SVG.Set doesn't act as expected, see https://codepen.io/AlexisBRENON/pen/LyPZRG when you hover the svg. Are there some bugs in my code?
Full version:
I'm trying to animate a simple SVG logo, in a similar way as the 'Abstergo' logo in 'Assassin's Creed' games (https://youtu.be/vbLz8JzFGXo).
The SVG has been drawn with Inkscape, and then exported as 'optimised SVG' to remove most of the Inkscape's namespace stuff. I don't want to use SVG.js to draw my SVG, just to animate it.
As you can see here (https://codepen.io/AlexisBRENON/pen/LyPZRG), the first translate animation works well, but I apply it to each part separately. Then, the rotate transform, applied to the SVG.Set, works for only 4 of the 5 parts, but when you move your mouse out of the SVG, all parts are affected by the reversed animation, before all the things collapse in some very strange animations...
By the way, the 'mouseover', 'mouseout' events seem to be triggered even when you just move your mouse over the SVG, which lead to strange behaviours when you don't stop to move your mouse. Any idea to fix this?
Kind regards,
Alexis

Animated pop-up like on wunderlist.com

I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.

How to turn off element CSS background when dragged

I've build a drag and drop interface using JavaScript where users can click and drag a link (that sometimes has a CSS background image) and drop it onto the canvas.
My problem is that the mouse cursor has the link background image beneath it during dragging. I need to add my own cursor design, so is there any way to turn this CSS background off so that it doesn't follow the mouse upon dragging?
have you tried setting :active pseudo class for anchor tags?
http://www.w3schools.com/cssref/sel_active.asp
then if that isn't work quite yet you could use !important after your deceleration possibly?
and example could be
.links:active {
background-image: none !important;
}
when the user releases the background image should return.
The best solution I found for this problem was to use jQuery to assign e.preventDefault() to the click event of the link, thus disabling the background drag effect. Then, if you want a custom cursor upon dragging, write a script to match an absolutely positioned div's (with the image as the background) x,y cords to the mouse position.

Scaling canvas together with elements over it

I'd like to get some ideas on how to implement this.
Here is the sketch:
Description: I have a scene (canvas on the sketch) and let's say 2 panels. Canvas lays in the DIV with position relative, panels are outside of this DIV and there are some elements over this DIV with position absolute. All these elements are draggable.
Every element is a div with inner canvas.
Problem: I need to implement zoom of this canvas somehow. I am zooming canvas (there is a grid drawn on it) and elements are zooming as well. It could be scaling (I know about quality after scaling bitmap, it's acceptable in my case). The only problem I don't really know how to solve is how to scale both canvas and independent elements which are over it, that we have an illusion that scene is scaling. Hope you've got the idea what I am trying to do.
If your target browsers support CSS3 transforms, you could apply a transform to your floating divs to match the one in the canvas, e.g. set style to transform: scale(1.5,1.5).
Note: you'll probably want the div wrapping the canvas and the absolute divs to have overflow: hidden so that you only show things in that area.

Categories