I'm working on an HTML+Javascript Page flip effect.
I want this to accomplish this without the HTML5 Canvas element so that I can use this with text/forms etc.
This is what I have hacked together so far(webkit browsers,im using chrome 12):
JSFIDDLE: Page Flip
Preview:
What I want to do is not show the regions of the red rectangle outside of the blue rectangle.
My problem Lies in the MASKING / CLIPPING of the overlapping region (the purple area).
I tried to embed the page (red) div within the mask (blue) div and set overflow : hidden
but the problem was whenever the mask (blue) rotated, the page (red) rotated as well and the calculations were leading nowhere to correct with an offset.
Are there any other ways I can clip this region?
You have to calculate and implement counter rotation for the inner div to offset the rotation of the outer/masking div. Here's an example from our Sencha Animator demos:
I'm sure you've seen Roman Cortes's original CSS pageflip - whose method we copied for the demo who uses a common fixed rotation point for both divs.
If I understand the question properly, you want to have the (blue) div above the (red) div? If that's correct then add a z-index property to both and have the (blue) div z-index higher than that of the (red) div.
Update: It may be worth looking into the CSS clip property because your (red) div is already positioned absolutely. The only problem then would be that your (red) div, I believe, would need to be inside of the (blue) div.
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have a <table> that I would like to overlay a circle on and have everything outside of the circle be blurred. The circle will change position based on a function, so it needs to be dynamic. I know how to do this with an image, but this needs to be a table. I have used the following CSS, but this will only let me blur an entire cell.
-webkit-filter: blur(10px)
The two options I can think of would be to overlay some sort of svg that is made up of a square and a circle and blur the space between in the edges (is this possible?), or to apply some sort of blur gradient to the cells that meet the edges of the circle.
Any ideas would be greatly appreciated.
Here is an example of what i am trying to accomplish. http://i.stack.imgur.com/f5EqT.png
It's possible to do something like this, but it might not be as straightforward as you were hoping.
JSFiddle Example
My technique involves cloning the entire content area, and overlaying it exactly on top of the original, but only revealing a portion of it.
You can clone the area through javascript (jQuery's .clone() works nicely), or you can simply include all the markup again in your HTML, but for a table this large, that's not very efficient.
To reveal only a small circle of it, I placed it all inside of a div element that had overflow: hidden set, so all the overflow gets cut off.
The tricky part comes with keeping that overlaid position right where it needs to be.
In my example, I have the circle move to follow the mouse. By default, both the circle, and the cloned content are absolutely positioned to the top left of the original content, allowing it to line up, but as my circle moves, the content moves with it, since it lives within the circle (setting overflow: hidden causes the circle to act as it would with position: relative, containing absolute positions within).
So, to compensate for this, I always move the cloned content an equal amount in the opposite direction as the circle is moving.
Then it's just a matter of blurring the original content, whilst keeping the cloned content crisp.
I hope that helps!
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.
I'm attempting to make a slideshow composed mostly of divs that can be masked by a canvas element (so that it may be in a circle or strange shape, rather than a square. Is this possible? I have seen many examples of masking an image, but not an entire div or collection of divs.
Yes its certainly possible to mask divs. For instance a canvas could mask a div like this:
that's just an image, source here:
http://jsfiddle.net/r58jF/
or white, which it should be noted merely gives the illusion of a circular div and that illusion is highly contingent upon what is in or behind the div
(or something fancier)
You cannot use the rendering of HTML elements as an image source for a canvas, and so you cannot use a canvas to draw the contents of HTML. If you want to make arbitrary portions of a div fully- or partially-transparent, the answer is "No, you cannot do that with a Canvas."