I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.
I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.
When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?
The issue is that when you resize the window, the position of the scroll bar remains fixed at an absolute number of pixels. However, because your content is based on view height, the height of the document changes dynamically as you resize the window. Thus, the window scroll position as a percentage of the document body height is also changing, and this is what ScrollMagic bases progress on.
To illustrate with simplified math:
A) Given a window height of 1000px, your document height will be 6vh * 1000px = 6000px tall. If your window scroll position is 1200px, you'll be 20% of the way through the overall ScrollMagic timeline.
B) If you resize the browser to 800px tall, that changes the document height to 6hv * 800px = 4800px tall. However the window scroll position will remain at 1200px, which is now 25% of the way through the ScrollMagic timeline.
The simplest solution is probably to keep your document a fixed height.
Related
I am using md-virtual-repeat in the sidenav md-list. It's height is coming properly for the first time. When I close it and open it again it's height is becoming half. But if I resize window its height is coming properly again.
I'm making an angular js application and I'm using the icons found https://materialdesignicons.com/
I'm having trouble creating large icons in my project. I'm currently assigning the icons like so.
app.config(function($mdIconProvider) {
$mdIconProvider
.defaultIconSet('assets/icon/materialdesignicons.svg')
.iconSet(['large'], 'assets/icon/materialdesignicons.svg');
});
I know the default size is 24px, but if I put in a number like 48, the image shrinks instead of gets larger.
What should I put in instead of large?
If your icon svg element has a viewBox attribute, it won't be overwritten by the $mdIconProvider size attribute.
The size parameter defines the viewBox height and width. viewBox only affects the coordinate system of an SVG element. It should match the dimension of your icon; if they don't match, md-icon might show a zoomed in/out view of the icon.
However, the actual size of a md-icon element will be defined by its height and width (defined with css); the SVG element will scale up and down inside the md-icon.
viewBox is a requirement for a svg element to scale. It sets which portion of its grid to show and how the element in the svg element should scale with it. it just doesn't decide the actual size of the icon which grow with md-iconelement size.
If viewBox is not set, the svg elements will not scale (that's the
jQuery bug); one unite will be 1px regardless of the svg element
size.
If you set the size to something smaller than the svg grid (e.g. "0 0
12 12" for a 24x24 grid), you will zoom onto the top left corner of
the icon.
If you set the size to something bigger than the grid (e.g. "0 0 48
48" for a 24 x 24 grid), you will zoom out with the the icon placed
in the top left corner of the svg element.
You can find lot more details here.
I managed to figure out the problem. The icon was being used as a button, but I had the class md-icon-button for the button in addition to the icon. Removing the class from the button fixed the issue.
I have a pretty standard application with a bar at the bottom. The bar and app are the same background color. My issue is that there is a tiny little line along the edge of the application bar, I can only determine that is it some sort of soft edge that is part of the default style of the ApplicationBar.
Here is an image of the display, note the tiny 1-2 pixel horizontal line:
It appears to be a 1-2 pixel black line with transparency. My main question is, what is this line, is it something I am introducing by accident?
It is by design a 1 pixel gap will be there between ApplicationBar and your ContentGrid. The gap will be visible only when your set the Opacity of the ApplicationBar to 1, So to get rid of the gap You can change the Opacity of the ApplicationBar to 0.99, so that the appbar comes above your ContentGrid.
Obviously you need to make some changes to your ContentGrid so that you can access the part of the Grid that the appbar is occupying.If your grid has ScrollViewer or ListView, it is always recommended to have some extra space after its contents*(may be a empty StackPanel with some height)* which will obviously solve this otherwise if it is a Static layout, you can make use of margin Property.
I have an image in WPF which I would like to enlarge to a fixed width (say 800px).
The image should stretch to this width using the original aspect ratio (so not as to distort) and the height should be scaled as necessary.
If the height is not too large for the container the top of the image should show at the top of the container. The image should then slide upwards until the bottom of the image reaches the bottom of the container via an animation (so at some point the whole image has been displayed).
Links or suggestions highly appreciated
I have a project that is WPF4 (with vb.net behind). I have a window that is full screen, and in the center of it is a grid that is constrained to 640x480 in size. I have five images animated, and the animation should take them off the grid and out of sight. However, the animation shows the image when off the grid (over the window itself.) How do I contrain my animations to stay ONLY inside of the grid?
Grid.ClipToBounds = true;
That should clip the contents within the Grid as it moves past the bounds of the Grid.