I'm developing on a platform where all video content is displayed on it's own layer, and all DOM elements are drawn on top of it.
I have a full-screen background image which completely covers the video layer but I need to be able to punch a transparent window through this background so that the video layer underneath is visible. I have to do this on numerous screens so pre-cutting the hole into the background is the least desirable option.
I've tried drawing a div on top with various transparency, opacity etc. but nothing works.
Is this possible with html\css\javascript\a special image with transparency etc?
Related
I built a map navigation based on a very big (8000px * 6090px) image of a 1920s very detailed map.
I use an img tag with the very big image, I center it on the focused zone so most of the image is outside of the viewport. I then animate the map with transform and transition css properties.
When the image moves and the hidden parts of the image, outside of the viewport, become visible, they first appear blank before rendering. This bug doesn't happen if I animate the image with margin left and top properties, but then the animation lags a lot.
Any idea of a way to handle this? I tried using "image-rendering" and "will-change" css properties, but it doesn't work. The problem happens with an img tag or a css background-image the same way.
I've been trying to remove a border that is around an embedded Vimeo video on my site. I've tried removing the border with CSS and JS to no avail.
I'm wondering if there is a way to remove the border using Javascript.
The video can be seen here at the top of the page: http://feliciasantos.com/handforgedworks/
Felicia, I think the video content itself is uploaded to Vimeo with top and bottom black borders which makes it almost impossible to remove them with JS or CSS.
See the standalone player here: https://player.vimeo.com/video/292992048
(It can be done since it's a background video and the controls are not needed but it's not so easy, you'll have to find out the correct aspect ratio of only the video content without the black borders. So take the height of the video content and divide it by the width. That's the ratio. Next you'll have to wrap the iframe in a div which confirms to that ratio with a overflow: hidden where the iframe is positioned absolutely in the center of the div, e.g. http://jsfiddle.net/luwes/grybtsfm/)
However the best way to make it work is to crop the original video to remove the black borders and re-upload that to Vimeo.
Hope this helps.
I'm working with svg files and some processing.js code to create a homepage.
It has some animation and static elements but the idea is to have everything the same but with different colours - Like an alternative homepage. I want this alternative to "peek" through as the mouse moves around. Only a small area around the mouse.
Does anyone have any idea how to do that?
since it isn't an image file it's a bit tricky.
I tried doing it by using the an image and the "drawing" element of processing.js thinking it could paint the alternative homepage, however it repeats the image everywhere the mouse go and what i want is for everything to remain in the same position only show the different colours in that spot.
You might consider superimposing two versions of your site, the "top" one completely covering the "bottom" one (make sure all backgrounds are opaque). Then you could try applying an SVG mask to the top page, making it transparent at a specific area and causing the bottom page to shine through. You could modify the mask as the mouse moves.
The other way round - i.e. clipping the top layer - is also thinkable.
I see the risk that this approach is slow and not consistent across browsers - you'd have to give it a try. Speed may differ depending on whether you clip/mask the top or the bottom layer.
W3C SVG Clipping, Masking and Compositing specs
MDN page on clipping and masking
MDN page on applying SVG effects to HTML content
If one version of the page can be converted to other by swapping out colors, SVG filters might be an option as well.
I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas
I'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.
What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using swipe gestures. These are all gray over a black background.
What I'd like to accomplish is have a sort of spot light gradient in the center of the screen that only effects the divs on the page and not the black background. This spotlight would be fixed so that when swiping through cards, it remains in the center of the screen.
I know I could overlay a div with a spotlight image as its background, but obviously that would mess up clicking/swiping on the page. And it would effect the black background.
Anyone have experience doing something like this?
A simple CSS solution (no events required)
Create a full-page-width bg image with the spotlight gradient.
Give each div this bg image, with a background-attachment value of fixed.
No matter where each div happens to be on the page at the time, it will act as a window through which you can see part of the spotlight gradient. In effect, the bg image stays fixed in place while the div moves over it.
Fiddle demo, and the same demo with heavily-rounded corners.
Alternately, it might be possible to give each div the same radial gradient in CSS (also fixed), rather than creating a static image file.
Try to use an absolute positioned div with a gradient. For passing through that div events use css property pointer-events (not supported by IE) or see that resource: http://www.vinylfox.com/forwarding-mouse-events-through-layers/