admin管理员组文章数量:1287942
I'm trying to figure out a way to have multiple images on the same line extending past the div continue to scroll to the left until it's out of view at which point it would move to the end of the image gallery and continue to scroll again even if it's outside the view.
Here is the code I have so far. I game the images a class because I feel that would help but I'm not sure how yet.
html, body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
height: 150px;
bottom: 0;
background: blue;
position: absolute;
overflow:hidden;
overflow-y: hidden;
white-space:nowrap;
}
#permas img {
height: 100%;
}<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
<img class="scroller" src=".jpg">
</div>
<script src="main.js"></script>
</body>
</html>I'm trying to figure out a way to have multiple images on the same line extending past the div continue to scroll to the left until it's out of view at which point it would move to the end of the image gallery and continue to scroll again even if it's outside the view.
Here is the code I have so far. I game the images a class because I feel that would help but I'm not sure how yet.
html, body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
height: 150px;
bottom: 0;
background: blue;
position: absolute;
overflow:hidden;
overflow-y: hidden;
white-space:nowrap;
}
#permas img {
height: 100%;
}<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
</div>
<script src="main.js"></script>
</body>
</html>- related: stackoverflow./a/48949285/8620333 – Temani Afif Commented Jan 26, 2021 at 20:20
-
I get the feeling you're going to need to use some alternative to basic scrolling for this. My thinking is that if you have a box set to
overflow: scrollit's going to be super jittery as things move around inside it. Instead I think you are going to have to use some scroll buttons on each side and an index of which box(es) are centered. If a box is far enough outside the view, use JavaScript to move it to the end of the list... Again, not super thought out, just my gut feeling.. – Calvin Bonner Commented Jan 26, 2021 at 20:24 - @TemaniAfif I agree that looks related and I have gone over the info in that post however I'm trying to have a continuous flowing motion of right to left displaying multiple images at once. That seems to be focused on having a single imaged displayed frozen for a few seconds before moving to the next. – Rage A. Shadey Commented Jan 26, 2021 at 20:39
- @CalvinBonner I fully agree. In theory I had an idea that I could have a set div that gave the width of the images outside the view to the left with some javascript that made it so once it was fully out of the view it could append it to the end of the div and animate it once more to move at a set pace to the left. – Rage A. Shadey Commented Jan 26, 2021 at 20:42
- See this example - stackoverflow./questions/65156264/… – s.kuznetsov Commented Jan 26, 2021 at 20:54
2 Answers
Reset to default 8As the images can have different aspect ratios it is quite messy to move just one image at a time to the back of the queue, and would require JavaScript intervention.
A similar method is to have exactly two copies of the images, to animate permas div element to move to the left by 50% of its width, i.e. to get all 10 images out of the way to the left, and have the viewport filled by the start of the second set.
Then get permas back to where it was initially and repeat.
There was some worry expressed in the ments that too much work would be needed. I have tested 10 images of different sizes and different content as well as the image given in the question and have found the GPU usage on my reasonably powerful laptop with Windows 10 to be pretty consistent around 20%. Of course, with lots more images (and possibly if some have natural dimensions very large, though I haven't tested that) there might be more processor time needed.
I haven't seen any jerkiness. You do have to be confident that the 10 images will more than cover the viewport width - but that assumption was also made in the question.
Here's the snippet with the original image:
html, body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
overflow: scroll;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
height: 150px;
bottom: 0;
background: blue;
position: absolute;
overflow:hidden;
overflow-y: hidden;
white-space:nowrap;
/* added */
left: 0;
animation-name: scroll;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#permas img {
height: 100%;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}<div id="permas">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
<img class="scroller" src="https://i.imgur./wURYltS.jpg">
</div>A Haworth has posted a fantastic example! However I wanted to add one thing that was kind of frustrating which is the overflowing settings. The image overflows would appear off-screen and would allow the user to scroll to their position which was very awkward and is usually unwanted behavior. In order to keep the page the same maximum width as it originally was before adding the scrolling gallery, I needed to put
max-width: 100%; overflow-x: hidden; into the body, html section of my css file.
Thank you for this awesome example!
本文标签： javascriptHow do I create an infinite scrolling image galleryStack Overflow
版权声明：本文标题：javascript - How do I create an infinite scrolling image gallery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741330657a2372746.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论