I'm scaling a div (zoom functionality) on page with non-scaled divs. The scaled div has mouseover events that cause text to follow the mouse. Scaling breaks the position of the element that should follow the mouse.
Hover text is done like:
$("#container").on('mousemove','.mouseMe',function(e){
$("#followA").css("top",e.clientY)
.css("left",e.clientX);
});
//also some additional mouseenter/leave events are used to display hover
Scaling:
#container{
transform-origin: top left;
transform: scale(1.1,1.1);
}
I think what I need is to get the mouse's position on a css scaled div as if it wasn't scaled. (example: if the mouse is at the center of the div say [25,25], it should always return [25,25] even if the div is scaled). I could be wrong about what I need though, so the functional requirements take priority:
Element needs to follow mouse when hovered
Element container (or several containers up) needs to be scalable via css without breaking hovers (other transforms not relavant and no nested scaling)
JS, JQuery, CSS are all in use.
Chrome support is primary. Should also work in FF but not crucial. IE isn't supported.
This fiddle may explain this better and shows what doesn't work: http://jsfiddle.net/yvanaxe1/4/ (make the result pane big enough)
Is having those “follower” elements be descendants of the scaled element(s) an absolute requirement? Because, if you could take them out of there, and then simply position them over the top left edge of the mouseover-triggering element (by using the clientX/-Y values everywhere, plus some offsets to re-position them from there to appropriate distances), I think you might get there easier … http://jsfiddle.net/yvanaxe1/6/
I increased the scale value here, so that the effect on the follower elements (that the scaling has been applied to as well) is more obvious.
Related
Now I’ve seen this page from webflow, which has inspired me much.
In this page, you start scrolling horizontally, then when you reach a certain area, the scrolling direction changes so that the page starts scrolling vertically.
Is there a way to do this?
(Preferably vanillaJS, but jQuery would be fine)
Basically there is not a set-up solution built into standards or jQuery (and I don't really recommend to use jQuery). I haven't searched if there is a library to do this (I suspect there is, and you should use one if possible instead of building by hand) but I'll try to roughly explain what it uses in vanilla JS/CSS.
We can construct a really long element (that includes the contents you want to reveal by scrolling), and use some cropping mechanism so that only a portion of it is displayed. This is basically done with overflow: hidden;.
Next this long element should move with scrolling. Adding an onscroll event listener that adjusts the transform property (spefically, translate functions) would do that.
These element should behave magically: they scroll to a position, stop and stay there until they reach another scrolling position, where they continue to be scrolled away. This is accomplished with the position: sticky; CSS property. See what MDN says:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This is somewhat hard to understand but the key is that it stays where it is as if it was a normal element until reaching the position you have set through top/bottom/left/right properties. Then it stays at that position until it's scrolled away together with its parent element (the "nearest scrolling ancestor").
So now you have an element that
Is really long but has only a portion shown
Can move as mouse scrolls so that users see more as scrolling
Stays in a fixed position through a part of the page and then scrolled away
which is basically the effect you want.
These three steps are the basic building blocks of such fancy effects you mentioned. There should be of course many nasty implementation details that I haven't outlined here but I hope this answer help you briefly catch what's happening under the hood.
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
How can I position SVG elements relative to other siblings? I want this to be similar to how in HTML, elements get laid out relative to each other automatically (for instance, left to right, top to bottom), except (solely) with the ability to specify an offset from the bound of the other object (since left to right AND top to bottom together don't make sense in SVG).
Currently I am trying using getBoundingClientRect (and then laying things out relative to the parent using transform:translate styling but this seems to be buggy on some platforms and difficult to deal with in certain situations. In addition with this scheme, if any SVG element moves, the other elements don't move. With relative positioning they would get automatically re-laid out if the SVG element they were relative to moved.
How can I do this?
I'm manipulating divs with javascript all the time.
Sometimes I need to make those divs fit inside a container who's size is contantly changing.
One way to make that happen is to use css scaling.
The problem with scaling is that it simply schrinks the picture of the element.
The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.
This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true.
It's bad programming.
I looked at the 'zoom' but the articles warned against using it.
Is there any way to scale elements and also keep the system updated on whats actually going on?
The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.
so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.
Hope this helps!
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.