I'm using skrollr to animate the scale of some svg elements. The problem is I'd like to animate them expanding from a bottom left position, but instead they are animating from the top left (default art board anchor point).
...
<g data-0="transform:scale(0)"
data-600="transform:scale(1)">
...
http://jsfiddle.net/PvNGE/
You can see it above. Is there a tag I can add to the svg that will change its anchor point, something I can do in skrollr or a way of exporting it from illustrator that will do this?
Thanks
I'm not sure skrollr is meant to be used on SVG elements, it works on webkit but I'm unsure it will work on other browsers (just a heads up).
You need to specify the transform origin, -webkit-transform-origin: bottom left;
<g data-0="transform:scale(0)" data-600="transform:scale(1)" class="bottom-left skrollable skrollable-between" style="-webkit-transform: scale(0.19333333333333333); -webkit-transform-origin: bottom left;">
http://jsfiddle.net/swwRB/
Related
I am working on a small project where I need to build a a box with rough edges around text. For this I use an SVG with funky edges - sort of a bit like this one: https://ikedabarry.com/InkTex/wp-content/uploads/2012/07/Ink_039_6501.jpg (but as SVG).
What I am trying to achieve is that I add this as background to a DIV and that it always fills nicely to the edges of the containing DIV, on all sides, so that the DIV does NOT look perfectly square on any sides. No matter the size of the box (it resizes with screen-size).
This does not work right now.
What we use at the moment:
background-image: url(above.svg);
background-size: cover;
This does not work because only half the edges are rough as the other ones extend outside of the visible area.
We also tried:
background-size: 100% 100%;
but that does not work because I end up having the image following its own naturally size.
I am now not sure what is the best possible solution using JS / CSS to make this work.
Here is what I see as options:
OPTION 1:
write some JS that:
a. listens to size changes in DIV
b. adds width and height to SVG
c. sets background image as 100% 100%.
OPTION 2:
a. add image as normal image with DIV
b. set DIV as position relative and IMAGE as position absolute
c. set top / bottom / left / right for image as ZERO.
(it does not work right now because it is an SVG - not sure why).
I feel option 2 is the best, but I am wondering if I am overlooking something ...
Any help appreciated.
UPDATE: here is a runnable example:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/
Maybe try this:
background-size: 100vw 100vh;
I am not sure, if this is solution for your problem, but it can help
Here is what we have come up with:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/
create different SVGs for portrait / landscape divs so you dont end up with BG images that look straight because they are overstretched.
remove height and width from svg, add viewbox like this with actual width and height:
viewBox="0 0 WIDTH HEIGHT"
add to svg:
preserveAspectRatio="none"
convert SVG to css background:
https://yoksel.github.io/url-encoder/
add the following css:
background-image: url("data:image/svg+xml,.... SVG GOES HERE ... ");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
Th main question is in the title, but here is the issues I am having getting it working:
I have an image that I am trying to size to a page depending on the size of the window. I want to keep the original aspect ratio of the image which may be wider or taller. I figured out a way to get the aspect ratio, but is there a way to figure out how much space I have to make it both in width and height based on the other items in the screen?
From there I can figure out how to resize accordingly.
I don't want to base it on the size of the window because there might be other items there. I am also using ionic2/angular2, but I don't really think that plays a role in this issue.
The easiest way to achieve this, and the solution I commonly use myself, is using the CSS background-size property. No JS is required, just a few adjustments to your HTML and CSS.
Basically what you have to do is get rid of your <img> element and instead create a <div>. Adjust your layout to give this div the appropriate size and position, and then, via CSS, give it a background-image. You will end up with something like this:
CSS:
#myImg {
background-image: url("../resources/img/myPic.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
HTML:
<div id="myImg">
</div>
The CSS properties I have set for #myImg do the following:
background-image: Set the path for the image
background-size: contain: Use the contain value, which scales the image to the largest size such that both its width and its height can fit inside the div. This is where all the magic happens behind the scenes
background-repeat: no repeat: Disable repetition of the background image. If this is not set, then the image is tiled so that the entire div is covered, which we don't want.
background-position: center: Position the image in the center of the div.
Browser support
I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.
For example:
<section id="top-section-with-fixed-bg">
<div class="tall-content-1500px">
<p>Text that's really tall</p>
</div>
</section>
<section id="next-section">
...
</section>
But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up.
Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.
I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.
Update: Here's a quickly tossed together jsfiddle
UPDATED UPDATE:
I think I've found the solution!
With the pointers provided in responses here, then some digging around, I have it kind of working.
I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.
And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.
I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.
Check it out and look forward to help and comments.
jsfiddle
have you set background-attachment:fixed;? This makes background images 'move' with the browser scroll. Be careful when it comes to devices though as this method can cause 'laggy looking sites' because there's too much render for the device (depending on image).
I personally target 'large' and 'modern' browsers with this:
#media query and (max-width:600px){
.top-section-with-fixed-bg{background-attachment:fixed;}
}
EDIT:
sorry I didn't fully understand the question. Here's some CSS to get you going
window.addEventListener('scroll',function(){
//document.body.scrollTop would be the windows scroll position.
if(document.body.scrollTop==1500px)
document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
}else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});
I'm very sorry but this is very basic. I'm about to finish work. The function could use a bit of sprucing up a bit like making it dynamic. This is also only native JS. So it's not all that fancy but you get the idea. When the document.body.scrollTop is at the bottom of your element. Which I'm guessing is 1500px tall? IF not use offsetHeight(). That'll give you the complete height of the element including padding and margins and I think borders as well?
I'd set your background images to background-position: fixed; then put the next background image at the bottom of the text so it overlays on top of the first div. Problem is you can't have the nice <section> structure you had going before.
<style type="text/css">
.section-with-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#bg-1 {
background-image: url("./background-1.jpg");
}
#bg-2 {
background-image: url("./background-2.jpg");
}
#bg-2 {
background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
<p>Text that's really tall</p>
<div id="bg-2" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
<div id="bg-3" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
</div>
</div>
</div>
I haven't tested this but it should cause the new image to overlap the old one, at least in theory.
In Raphael JS documentation, there are examples how make svg, but only at the top left corner.
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements) var
paper = Raphael(document.getElementById("notepad"), 320, 200);
How can I make it to start not from left top corner, but for example from x=0 and y=50?
This is probably less about the CSS and more about the SVG. You can define the container in HTML using CSS, but inside that contain it is best to make your definitions directly relevant to the SVG data. Particular to this case are these attributes:
viewBox
preserveAspectRatio
On that second attribute you will want the value "xMinYMid meet". This will cause the SVG image to render from the vertical center and left edge of its available canvas. You can also remove the width and height attributes on your SVG as such are counter-intuitive to the rendering of vector graphics.
I have successfully integrated SVG graphics into three places of a slideshow app, http://mailmarkup.org/slideshow.xhtml
The quote graphic that appears at the beginning of quotes
The logo in the footer
The SMTP and HTTP diagrams on a slide mid way through
If you shrink or grow the browser window the graphics will stay in their correct location and will grow relative to the text.
Give your svg the relative position attribute of css, and by top/bottom and left/right you can set the svg according to your desired location inside the div.
<svg id="mSvg" height="539" version="1.1" width="620" xmlns="http://www.w3.org/2000/svg">
#msvg {
overflow: hidden;
top: 40px;
left: 100px;
position: relative;
}
Try this:
#notepad {
position:relative;
}
#notepad svg {
position:absolute;
top:50px; left:0;
}
I am translating a flash carousel to JavaScript and I am having problems with the position. This is the CSS of the div that contains the images.
#tiovivo{
height:382px;
width:793px;
background-color:#F5F5F5;
z-index:-1000;
overflow:hidden;
position:relative; }
If the position is not relative the JavaScript code has to be longer and the images go out of the border
The images are in the div like this:
<div id="tiovivo">
<img id="tio4" style="cursor:pointer; position:absolute;" onClick="location.href='tio4.php'" height="150px" src="tio4.jpg">
<img id="tio5" style="cursor:pointer; position:absolute;" onClick="location.href='tio5.php'" height="150px" src="tio5.jpg">
</div>
The problem is that when #tiovivo is position:relativeI am unable to click the images, the events "onclick" don't work and the cursorpointer is not shown.
If #tiovivo is in position:static the "onclick" and the cursor:pointer do work correctly.
I need images "position: absolute" so I can put them easily in the JavaScript code.
1.) Remove z-index:-1000 to make the all elements in the div clickable.
2.) If absolute position for the images, you have to add a vertical and a horizontal position (left or right, top or bottom) to them.
Also see my jsfiddle.
Your problem is the z-index: -1000 setting.
Compare this (with the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/5HZdp/
and this (without the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/HLp3Z/
Your negative z-index is pushing #tiovivo and its children under <body> so the images never receive click events. You don't need the z-index to get your absolutely positioned images on top, they'll be on top by default.
There are several problems with your case
there is no javascript involved, at least it is has nothing to do with positioning here
you are using position absolute with no other position attributes eg.left,right etc.
remove z-index CSS and it will work. You are placing whole DIV UNDER everything else even if it is transparent
Thank you all, it was the z-index: -1000 I used this index because I was programing a "3D" effect and I want to avoid that the bottom of #tiovivo cover the images.
This is the function I use to update the carrousel
pos0+=(offx-tempX)/5000;if(pos0> 6.28318531){pos0-=6.28318531}
image0.style.left=offx+310*Math.cos(pos0)+"px";
ytilt=Math.sin(pos0);
image0.style.top=offy+310*ytilt*((offy+tempY)/1000)+"px";
image0.style.zIndex=Math.round(ytilt*10);
pos1+=(offx-tempX)/5000;if(pos1> 6.28318531){pos1-=6.28318531}
image1.style.left=offx+310*Math.cos(pos1)+"px";
ytilt=Math.sin(pos1);
image1.style.top=offy+310*ytilt((offy+tempY)/1000)+"px";
image1.style.zIndex=Math.round(ytilt*10);
I fixed the problem adding an offset to zIndex of the images because sin() function goes from -1 to 1.
image0.style.zIndex=100+Math.round(ytilt*10);
And removing the z-index: -1000 from #tiovivo