Im trying to make a pausescreen for a kiosk system. And want the ability to sens when someone is in front of the screen.
I used most of the code from github -js-motion-detection
I dont want to display the webcam output on the screen,
When using Z-index motion is only detected in the areas that are visible to the user. And hide on the canvas elements gets overridden
How can i hide the videofeed and still use the motion detection ?
Code here
Related
Anyone has idea how to implement this: https://paveldogreat.github.io/WebGL-Fluid-Simulation/
to get mouse interaction like on this website https://advanced.team/ ?
I have been able to set up the same style through configuration, but I have now lost days on searching for how to get canvas beneath the website content like theirs or how even effect shows beneath every element...
I have a general question about creating a photo which can be animated.
My example is if you take a computer you could do a 360 degree view of the computer and giving the user the ability to click and drag to open and close the computer.
I was wondering if there is some specific way on how to animate a photo to do something like that in html, css, and some script language and if there is a specific term for it?
Your best bet would be using HTML canvas and do 3d animation (using javascript, no css used in this case). You will need to detect mouse event , rendering, animation frame , etc to accomplish it. this one is an example to your problem
http://www.kevs3d.co.uk/dev/phoria/
Try to learn canvas by googling. you can try search canvas 2d animation first, or you can just directly search 3d canvas animation.
So I currently have a transparent web page (all the elements are visible but the background is transparent - I am using a software to do this and the background is completely transparent and can be clicked through).
What I need to do is to be able to move a box to select a specific part of the web page and then for the box to detect the colour that is behind the window (as the background is transparent)?
This picture should make a little more sense of it; the red is, for example, a desktop background. This window would be opened and the box moved to be able to detect the colour.
The idea would be like this: http://lokeshdhakar.com/projects/color-thief/ but I need it to work on a transparent window and not an image which I am unsure is possible with HTML and JS?
I understand it is possible to use an image but I would need this to continuously check the colour and when there is a change, update quickly.
Thanks for any help!
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.
I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.
The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).
At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.
Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)
Thanks guys!
You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.
Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops, like:
Animated Content Menu
Fullscreen Image Blur
Responsive 3D Panel Layout