Hello everyone
Im trying to create a multilayered canvas and what i came up with was something like
<canvas class="canv" id="fight_layer1" width="680" height="381" style="position:relative;left:0;top:0;z-index:0">
I can't use the absolute it messes up the layers if im including the page on another one, is there any other way than this one, :)
Try to place all your canvas tags inside of the DIV with absolute positioning, then they relatively position inside of it.
Also for multi layer canvas see this script (could be useful):
http://code.google.com/p/multi-layer-canvas/
Related
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I have a div inside a webpage, below that div there are some images that you can select.
When you select an image you can place it inside the div by clicking on the div.This is working fine.
When someone puts some images inside the div and is done with it, I would like it to be able to save the content of the div, so to save all the images on the position as they were placed, and to merge it into to one image.
Is this possible if so, how could I do something like that?
At the moment I place the images with jQuery inside the div.
Make one image of it is more complicated, you might wanna check http://html2canvas.hertzen.com/ for that. You can also use a canvas.
You can create a canvas, then draw images onto it, then convert to an image and save. This might help. It will only work in browsers which have canvas support.
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."
I started using html5 canvas object on my web site and I want to draw rectangles (or other shapes according to my application) on the canvas. I can write text on the rectangles using the context object.
What I am trying to do is that I want to put a div element in the rectangle. So I can semantically work with my objects on the canvas like put a paragraph and a border inside the rectangle etc., storing some trivial data in the objects. Is that possible?
Nothing goes inside the canvas tag except for elements that would be displayed if the browser doesn't support HTML5 and canvas. If you want to display regular HTML elements in a DIV, you could simply position it absolutely so that it floats above the canvas:
<canvas height="100" width="200" style="position:absolute;left:10;top:10"></canvas>
<div id="yourDiv" style="position:absolute;left:20;top:20">Your content</div>
Hopefully this helps.
Older Browser not supporting canvas should show those divs. As you can easily try out, other browsers will store the div in your dom tree, but not show it. So you should be able to do some dom semantics, but you'll have to paint them on your canvas for browsers supporting it.
If you want to show the divs and paint onto them using canvas, you'll have to use positioning to show them over each other.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/