I am using impress.js to build a presentation. I have several steps arranged around a central image (a diagram). I can successfully position the steps around the image using data-x and data-y but when the presentation is 'on' each step, I want to offset the view so that you can see more of the central image.
How do I offset the presentation view for each step?
This question would be easier to answer if you had provided some specific code example. That said, I do understand what you're doing. You can position your step contents in multiple ways, all via CSS:
Set the slide width and height to values less than your screen. This will leave a margin outside the slide contents where your background / other image is visible.
Use margin or padding to do the same.
Use e.g text-align to flow the contents to one side, away from the image
You can just use a margin on the step to move it around.
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%.
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.
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/
We have a requirement to display short / bigger size images. (e.g. I could have the front portion of the bus, back portion of the bus and middle portion of the bus as separate images).
So to demonstrate the above, I could try
front,middle,middle,back (to construct shorter image)
front,middle,middle,middle,middle,back (to construct bigger image)
Are there any sites which let you download such images (i.e. they are already split) OR what would be an easier way to achieve this from an already available image.
You can use ImageMagick. Check the following example.
In your case if you want to split image only horizontally in (let's assume) 200px slices:
convert -crop 200 +repage verybig.jpg slice%02d.jpg
You could slice and dice an existing image with HTML/CSS, by setting up several adjacent elements with the same image as a background, then manipulating the widths and background position to get the desired effect.
Here's an example: http://jsfiddle.net/gjJcM/
You'd need to know something about the image content you're working with to make this seamless - I'd need more context to think in further detail.
HTH
The slicing and dicing can also be done with the Gimp.
Check out the Gimp's Filters->Map->Make-Seamless. It's used to make tiles join up seamlessly both horizontally and vertically. You can use it to make a horizontally repeatable tile by adding extra background above and below, and then after use cropping away the excess.
A more sophisticated tool for making the seamless join is panotools.
Combining the pieces at the end is easiest if you include half of the middle of the bus with the back and half of the middle with the front. You won't get a bus with no middle, but from the question, that's not something you needed.
I want to right align a proportionally scaled image, on a page in the report. Seems like images are always aligned left in their bounding box.
The image however, is dynamically assigned. So no, I can't just position the image in the right position.
All ideas welcome :)
It's not possible.
However, you can dynamically set the padding-left value.
Doing that correctly is a pain, though.
Obtain the height and width of the image control, and apply this answer to add just as much white or transparent left padding to the picture itself to make it appear right-aligned inside the image control.
This will incur additional processing time and memory consumption, but saves you the pain the accepted answer is talking about.