I am developing a react web page, where I am using this kind of layout.
But the height of the page could be even more than 4k px because I do not exactly know how many "boxes" will be displayed. Therefore, I added scrollbar to the page.
Now I would like to have aligned items to the bottom (top is already aligned by default) when the user is scrolling.
To achieve this, every column must scroll independently but synchronized at the same time.
Does someone have any suggestions on how to achieve this goal? It is some kind of parallax in combination with the masonry effect.
Thanks for any ideas.
An idea would be to contain each of the columns in their own div and then use the parallax effect to scroll all of them together.
Related
Friends, I need to make a parallax effect exactly like this gif, with 4 sessions. Can someone help me? I don't even know where to start.
Basically the first, second and last sessions would have a height of 100vh. The third would have dynamic height, according to the amount of content.
The sessions would be covering each other and the one that is covered would be shown as the screen scrolls.
If possible (and if not, that's fine), I would also like to do a black overlay effect before showing the session underneath, like in the gif.
Here is an working example, but I need it without the sticky effect.
Thanks!
Is it possible to let the content of a cell in a react-virtualized Collection stick to a side when scrolling? I normally do this by using position sticky but this does not work for the content in a Collection.
I'm building a Grid TV Guide like the one in the image below. When scrolling the content of the most left visible cell of a row should stick to the left side of the screen.
I am able to get this working without using react-virtualized, but after scrolling through the guide for a while too much data is rendered and the page becomes very slow.
Can any of you help me? I would be very grateful.
Thx in advance!
One possible approach is to make an extra element that looks like the column that is to be sticky, and positioning it over it, e.g. https://codesandbox.io/s/l5z0wvpj77
My portfolio website currently uses masonry.js to show the posts in a grid-like manner. Though i've recently come up on a bug that i can't seem to get rid of. If you go to my portfolio website at http://www.aerosphere.nl on a small resolution (resize browser or look at it with a tablet/phone), and somehow the masonry blocks move below the navigation menu.
I've tried adjusting the widths of the columns, even moving the sidebar to the right of the masonry blocks, all with no luck. Anyone care to look at the source code and/or know how to fix this?
The problem lied at the fact that i didn't use fixed positions for the nav menu and the masonry section of the site. MasonryJS uses fixed positions to get the whole effect, and when resizing it calculates screen size from the far left side of the screen since it doesn't have an x-coordinate assigned.
Since the nav bar is in the way to position the whole thing at x = 0 the whole section moves below the nav bar.
I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.
It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.
I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.