I am having difficulty with my horizontal offset effect. I want to use only Stellar JS to horizontally shift an img on vertical scroll. As of now, I have a container element that's 1800px tall and an img inside whose height & width are dynamically set on load (based on viewport... ie it's height is the height of the viewport and the width is proportionally wider than the viewport).
When scrolling vertically from the top of the container to the bottom of the container, I want the img to slide left from it's left edge all the way to its right edge. Therefore, at the top of the container, the img will be aligned left and overflowing right, and then at the bottom of the container, the img will be aligned right and overflowing left.
Here is an example created by the Stellar JS creator that is close to what (but with some unwanted vertical scroll as well) --> link
Take a look at this template jsfiddle: http://jsfiddle.net/z6F3h/2/ It needs to have the effect implemented. I believe that I need to modify... setTop and setLeft properties
The creator of the stellar.js plugin gave a great foundation over here for making it move horizontally and vertically at the same time.
How to move/animate elements in from the side with Stellar.js on a vertical scroll?
If you're looking for the layer to only move horizontally and not up and down AT ALL, then I modified his code slightly to have the top stay the same.
http://jsfiddle.net/QGd9g/995/
The modifications I made were to have originalTop - newTop, instead of just setting top to be the new Top.
$(function(){
$.stellar.positionProperty.apple = {
setTop: function($el, newTop, originalTop) {
$el.css({
'top': originalTop - newTop,
'left': $el.hasClass('apple') ? originalTop - newTop : 0
});
}
};
$.stellar({
verticalOffset: 200,
horizontalScrolling: false,
positionProperty: 'apple'
});
});
What's tricky about what I did (there might be a better solution), is that you setLeft, and the layer will move to the right.
Related
I have following <div> on my page. Amount of black squares depends on user input. How can I scroll to horizontal center of this block using JS?
To center that, you need to use the scrollLeft property.
document.body.scrollLeft = (document.body.scrollWidth - document.body.clientWidth) / 2
Of course, for your problem, you need to get the reference of that div. Above code is a reference on how you scroll towards the center of a horizontal bar.
I have seen a "push-down" notice coming from the top, as in this site:
http://www.yokogawa.com
Notice that it pushes the other content down, not lays on top of it.
What I want to do seems a bit trickier but I hope possible. I would like to have an info bar push up, and not be considered part of the scrollable area.
In other words, suppose the viewport is 500px high, and the 50px info bar pushes "up". The scrollable area of the viewport would be 450px high, and the scrollbar height on the right goes from 0 to 450px.
So in effect, the scrollable viewport reduces from the bottom, and when scrolled all the way down, the bottom of the page content is right on the top of the info bar.
I'm concerned with animating it but would first like to see the CSS of such a div in position.
Add the style "position: absolute" to your "push-down".
Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.
Is it possible to (temporarily) hide the main window (vertical) scrollbar (the one on body/html) without (slightly) moving centered content?
Setting overflow: hidden on body, html hides the scrollbar but the centered content is moved half of the scrollbars width to the right when doing this. I could add padding-right: <width-of-scrollbar> but that varies, and also would move the content if there is no scrollbar to begin with.
You could position the centered piece relatively (left: 50%) and use javascript to set the position fixed in pixels afterwards. In jQuery:
$(".centered").offset({left : $(".centered").offset().left});
See it in action here: http://jsfiddle.net/willemvb/jP3PK/4/
Anyone familiar with the Zynga Scroller JS library?
How do I set a default offset for a scrollable region?
I set the CSS for the element using:
-webkit-transform' : 'translate3d(200px, 0px, 0) scale(1)
Assuming I want a 200px offset for the scrollable region, but the code overwrites this upon page load, and snaps back to 0px. When I hard code the 200px offset, it then thinks that 200px is the starting position and bounces back as if it were the edge.
Any help?
I had the same issue in a way and I will describe it below along with the solution.
I work on an "infinite horizontal scroller" with elements equal in size. The idea is that you will only have nrVisibleElements + 2 elements in the DOM. 1 is before your scroll window and the second is after it. The first and last elements swap according to the moving direction. You can find the library here: https://github.com/bedeabza/JS-Infinite-Scroller
Now, I want to use snapping for elements, but if I activate snapping, ZyngaScroller will snap right before I append the swapped element because it thinks my container will end. That's why I reported to it a bigger container (1000 * actualDimension) with the setDimensions() method and offset'ed my dimension processing with 500 * actualDimension.
Basically every time I set the actual transform on the DOM I offset it with the following method:
offset: function (left) {
return left + this.offsetValue;
},
Where left is the left reported by ZyngaScroller.