Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lee Hayward
5,703 PointsHow to have two sections scroll simultaneously in opposite directions horizontally?
Hi, As the title suggests i would like two have two sections scroll l simultaneously in opposite directions horizontally and the content inside to loop(like a conveyor belt).
I'm looking at some design ideas and want to know what the most efficient way of achieving this would be.
Lets say i create a flex container with 2 rows, each with four child elements each at 100% width of container.
overflow would be hidden but i want them to be able to loop the content i.e if it scrolls off the page to the right eventually it will loop back into the page from the left if you keep scrolling in the same direction.
the top row would scroll to the right and the bottom row would scroll to the left at the same time.
my design thoughts is i have some images and content i will split horizontally in half and place in matching cells in each row
content a - top-row cell-1 would match bottom-row cell-4 content b - top-row cell-2 would match bottom row cell-3 .....
eventually the content would meet in the middle but have a slider effect of coming from opposite sides of the pages...
sorry for the long post any advice on where to start?
3 Answers
Steven Parker
242,296 PointsIt sounds like CSS animation would handle this. The idea intrigued me so I made a demo:
<div class="container">
<div class="slide right">
<img src="https://placeimg.com/320/480/tech">
<img src="https://placeimg.com/320/480/animals">
<img src="https://placeimg.com/320/480/arch">
<img src="https://placeimg.com/320/480/nature">
<img src="https://placeimg.com/320/480/tech">
<img src="https://placeimg.com/320/480/animals">
<img src="https://placeimg.com/320/480/arch">
<img src="https://placeimg.com/320/480/nature">
</div>
<div class="slide left">
<img src="https://placeimg.com/320/480/tech">
<img src="https://placeimg.com/320/480/animals">
<img src="https://placeimg.com/320/480/arch">
<img src="https://placeimg.com/320/480/nature">
<img src="https://placeimg.com/320/480/tech">
<img src="https://placeimg.com/320/480/animals">
<img src="https://placeimg.com/320/480/arch">
<img src="https://placeimg.com/320/480/nature">
</div>
</div>
.container { overflow: hidden; }
img {
flex: 1;
height: 480px;
}
.slide:last-child img {
position: relative;
top: -240px;
}
.slide {
display: flex;
width: 200%;
height: 240px;
overflow-y: hidden;
animation: 10s infinite left ease-in-out;
}
.right { animation-name: right; }
@keyframes left {
from { margin-left: 0; }
to { margin-left: -100%; }
}
@keyframes right {
from { margin-left: -100%; }
to { margin-left: 0; }
}
Lee Hayward
5,703 PointsWow, thanks for that demo its very helpful, seems pretty simple at this stage but i have been tinkering around with it and have some questions if you or anyone could shed some light on.
1, The animation (ease in-out) is triggered at the start/finish of the cycle at the same point (as the images are in order). But say i reversed the bottom row order, to create bit of disorder this no longer works(atleast when the divs are in an even amount). How could i start to implement an action where the ease-in-out transition could occur on each matching img in the container as opposed to just the start/end of the cycle.
2, The loop is caused by double the images and a timing animation to give an infinite loop effect. In the scenario where i delete half the images in each row, the animation at the end will be unsynced and jump back to the start breaking the 'loop' cycle effect. I get that it occurs because the images are unmatched so its not hidden, but does this unsync occur due to the div sizes?
2, Full screen looks great, but the images again unsync when resizing the browser down. I know media queries can fix this but i don't understand why this behaviour is happening.
3,Any online guides i could find to replacing the 'automatic' animation to a scroll-able event ( parallax?)
Thanks in advance
Steven Parker
242,296 Points1. The transitions occur between keyframes, and you can can establish additional keyframes in the cycle. For example, this will cause my original example to pause at every match-up instead of every other one:
@keyframes left {
from { margin-left: 0; }
50% { margin-left: -50%; }
to { margin-left: -100%; }
}
@keyframes right {
from { margin-left: -100%; }
50% { margin-left: -50%; }
to { margin-left: 0; }
}
2. The loop smoothness is a combination of number of images, image size, container size, and flex settings. Changing any one of these will require changing one or more of the others also to get the same effect.
2(b). I wasn't thinking about scaling when I built the demo. Media queries aren't necessary, this can be easily fixed by consistent use of percentages or screen-relative units for the dimensions.
3. I'm guessing what you want is "horizontal drag scrolling", you can find plenty references including this blog about it.
Happy coding!
Lee Hayward
5,703 Pointsthanks for your help! very insightful