We Keep Coding

How to make a smooth, infinite, auto carousel

I'm trying to make a smooth, infinite, automatic carousel for my images but I'm stuck. I believe I have the carousel moving (thinking I may be moving the wrong div). The part I'm struggling with is to get the images t0o loop back around when they leave the page, making it infinite. I would love some help.
Thanks
LM
const carousel = document.querySelector(".carousel1");
const imageSection = document.querySelector(".imagesection");
let sliders = document.querySelectorAll('.sliders');
let increment= 0;
let index = 1;
const interval = 100;
const firstClone = sliders[0].cloneNode(true);
const lastClone = sliders[sliders.length -1].cloneNode(true);
let check = sliders.offsetHeight
console.log(check)
// Append the firstclone to the back of the carousel
carousel.appendChild(firstClone);
let timer = setInterval(() => {
increment++
carousel.style.transform = `translateY(-${increment}px)`
console.log('hey')
}, interval);
.imagesection{
width: 50%;
border: 1px solid blue;
display: flex;
flex-direction: row;
overflow: hidden;
}
.carousel1{
border: 1px solid pink;
width: 35%;
margin:0 2.5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sliders{
border-radius: 5px;
width: 100%;
height: 300px;
margin: 5px 0;
object-fit: cover;
}
.images{
border-radius: 5px;
width: 100%;
height: 100%;
<div class="container">
<div class="heading">
<h1>Hey Luke</h1>
</div>
<div class="imagesection">
<!-- IMAGE SECTION 1 -->
<div class="carousel1">
<div class="sliders">
<img class="images" src="./images/bekir-donmez-eofm5R5f9Kw-unsplash.jpg" alt="clone">
</div>
<div class="sliders">
<img class="images" src="./images/conscious-design-eZIE5ZFR7Cs-unsplash.jpg" alt="second clone">
</div>
<div class="sliders">
<img class="images" src="./images/dane-wetton-t1NEMSm1rgI-unsplash.jpg" alt="third clone">
</div>
<div class="sliders">
<img class="images" src="./images/ginny-rose-stewart-UxkcSzRWM2s-unsplash (1).jpg" alt="">
</div>
</div>

Improve display/performance of 2 column infinite scroll layout on resize of browser

I have a UI that involves (on wider devices) a 2 column layout that scroll in opposite directions in an infinite loop. On page load the UI seems to work pretty well but I really need some help improving some aspects of it.
The key things I want to work on are:
Order of items (projects) matches HTML structure. Currently they're reversed
Improve how the UI reacts and displays on browser resize
Fix ESLint undefined errors for "Map" and Weakmap"
1. Order of Items (projects)
You can see I've number each .project and on load the one that appears last in the HTML is first when viewing the webpage. It would make more sense the 'top' item is visible in the viewport before revealing the others in cascading order on scroll.
2. UI on Browser Resize
Though the UI seems to work well on page load, I think due to the positional values set on each .project this seems to lead to content overlapping or getting cropped on resize. I've tried matchMedia to see if I can run/recalculate once the viewport has 'stopped' resizing but doesn't seem to work.
It doesn't seem as bad going from desktop to mobile size screens. But vice versa, if you open on a narrow viewport and enlarge no content is visible and the UI appears empty until you scroll ...and then the left column doesn't loop (it stops) until you refresh the page.
On the mid-point #media when each .project has 50vh and not 100vh on scroll the items appear to flicker. Again, until you refresh.
It seems like maybe I need to run the script again after each resize? This is for a 'fun' portfolio style project so I appreciate that's a bit heavy on the resource but maybe acceptable in this instance, as it's not a commercial or D2C site?
3. ESLint Errors
Lastly, I get 2 errors saying Map and Weakmap are undefined when I compile using CodeKit and ESLint. That is in relation to these 2 lines...
const lastScrollPos = new WeakMap();
const linkedLoops = new Map([
I know there's a couple of issues but I wanted to break them down to try and be as clear as possible.
const leftLoop = document.querySelector(".split-loop__left");
const rightLoop = document.querySelector(".split-loop__right");
const scrollHeight = leftLoop.scrollHeight;
const offsetBoundary = 200; //the offset from the borders at which the element reordering event is triggered
const lastScrollPos = new WeakMap();
const linkedLoops = new Map([
[leftLoop, rightLoop],
[rightLoop, leftLoop]
]);
let scrollLockElement = null;
let scrollLockTimeout = null;
// the function sets handlers to scrolling for infinite scrolling
function infiniteScrollHandler(loop) {
const virtualLoop = Array.from(loop.children);
virtualLoop.forEach(
(el) => (el.style.top = scrollHeight / 2 + el.offsetHeight + "px")
);
loop.addEventListener("scroll", () => {
if (virtualLoop.length < 2) return; // not enough items to scroll
const topBound = loop.scrollTop;
const bottomBound = loop.scrollTop + loop.offsetHeight;
const firstEl = virtualLoop[0];
const lastEl = virtualLoop[virtualLoop.length - 1];
if (firstEl.offsetTop >= topBound - offsetBoundary) {
lastEl.style.top = firstEl.offsetTop - lastEl.offsetHeight + "px";
virtualLoop.unshift(lastEl);
virtualLoop.pop();
} else if (
lastEl.offsetTop + lastEl.offsetHeight <
bottomBound + offsetBoundary
) {
firstEl.style.top = lastEl.offsetTop + lastEl.offsetHeight + "px";
virtualLoop.push(firstEl);
virtualLoop.shift();
}
});
}
// the function sets handlers to scrolling for reverse interaction with the linked loop
function reverseLinkLoopHandler(loop) {
loop.addEventListener("scroll", () => {
const delta = lastScrollPos.get(loop) - loop.scrollTop;
lastScrollPos.set(loop, loop.scrollTop);
// this is blocked to prevent deadlock when events of two blocks are called each other.
{
if (scrollLockElement !== null && scrollLockElement !== loop)
return;
scrollLockElement = loop;
clearTimeout(scrollLockTimeout);
scrollLockTimeout = setTimeout(
() => (scrollLockElement = null),
300
);
}
linkedLoops
.get(loop)
.scrollTo(0, linkedLoops.get(loop).scrollTop + delta);
});
}
// set scroll handlers on all loops
linkedLoops.forEach((loop) => {
infiniteScrollHandler(loop);
loop.scrollTo(0, scrollHeight / 2);
lastScrollPos.set(loop, scrollHeight / 2);
reverseLinkLoopHandler(loop);
});
/* Hide Scroll Bars */
::-webkit-scrollbar {
display: none;
}
html,
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Content will be in these eventually */
.bar-left,
.bar-right {
border-right: 2px solid black;
box-sizing: border-box;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 48px;
z-index: 10000;
}
.bar-right {
border: none;
border-left: 2px solid black;
left: auto;
right: 0;
}
/* Split Loop */
.split-loop {
margin-left: 24px;
}
.split-loop__item {
background: white;
overflow: hidden;
}
.project {
box-sizing: border-box;
border-bottom: 2px solid black;
padding: 24px 24px 0;
width: 100%;
}
.project__media {
margin-bottom: 24px;
}
.project__img {
border: 2px solid black;
width: 100%;
max-width: 100%;
}
.project__title {
font-family: Arial;
font-size: 12px;
margin-bottom: 24px;
}
/* Tablet View */
#media screen and (min-width: 400px) {
.split-loop {
height: 100vh;
position: relative;
margin: 0 48px;
}
.split-loop__left {
border-right: 2px solid black;
box-sizing: border-box;
width: 50%;
}
.split-loop__right {
position: fixed;
right: 24px;
bottom: 0;
width: calc(50% - 48px);
}
.split-loop__item {
display: flex;
flex-flow: column;
height: 50vh;
}
.project__media {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 24px;
}
.project__img {
box-sizing: border-box;
display: block;
margin-bottom: 0;
width: auto;
max-width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
overflow: hidden;
}
/* Split Loop */
.split-loop {
position: relative;
margin: 0 48px;
}
.split-loop__left {
width: 50%;
overflow: auto;
position: relative;
max-height: 100vh;
}
.split-loop__right:before,
.split-loop__left:before {
display: block;
content: "";
z-index: -1;
height: 9999999px;
}
.split-loop__right {
box-sizing: border-box;
position: fixed;
right: 48px;
bottom: 0;
z-index: 5;
width: calc(50% - 48px);
overflow: auto;
max-height: 100vh;
}
.project {
box-sizing: border-box;
border-bottom: 2px solid black;
padding: 24px 24px 0;
position: absolute;
}
}
#media screen and (min-width: 600px) {
.split-loop__item {
height: 100vh;
}
}
<header class="bar-left"></header>
<div class="bar-right"></div>
<div class="split-loop" role="main">
<div class="split-loop__left">
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/g/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Left #1</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Left #2</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/g/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Left #3</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Left #4</h2>
</div>
</div>
</div>
<div class="split-loop__right">
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Right #1</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/g/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Right #2</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Right #3</h2>
</div>
</div>
<div class="split-loop__item project">
<div class="project__media">
<img src="https://www.fillmurray.com/g/600/800" alt="" class="project__img" />
</div>
<div class="project__copy">
<h2 class="project__title">Project Right #4</h2>
</div>
</div>
</div>
</div>

Slider loop with backgroud image

I have a container and within it 5 (or more) items (divs) with another 2 child divs, the second (child) div has a background image (declared as inline-style "background" property). Now, I want an infinite cycle/loop of all this images (items with backgroud images) to work, after one iteration the first one become second, second third... fifth become first etc, with some interval.
I was trying some javascript and jquery with no success, is there a way how to do that? Thank you so much for help.
The code is:
<style type="text/css">
.container {
position: relative;
width: 100%;
display: -webkit-box;
display: flex;
}
.container .img {
position: relative;
width: 240px;
height: 240px;
}
.container .img div {
position: relative;
background-size: cover;
background-position: center;
width: 240px;
height: 240px;
opacity: 0.9;
cursor: pointer;
}
.container .img div:hover {
opacity: 1;
}
</style>
<div id="s" class="container">
<div class="img">
<div style="background: url(https://picsum.photos/id/271/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/221/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/101/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/22/240)"></div>
</div>
<div class="img">
<div style="background: url(https://picsum.photos/id/11/240)"></div>
</div>
</div>

setInterval(function(){
$i=$(document).find('.container .img:nth-child(1)');
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);

How to create image scrolling parallax effect with CSS?

I saw this cool scrolling effect online...
Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out?
How can I create this effect on the web?
Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/
I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.
Any ideas?
Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.

This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>

Adjust a 100% width image to vertically center using jQuery or CSS?

Basically I have a fixed size div that contains an <img> tag. I cannot change the structure.
Often these images are much larger than the container due to keeping them 100% width and filling the box. Most times this results in too much of the image shown at top and not cropped to the center of the image.
So using jQuery (or pure CSS if possible) I want to adjust the position of the image to move it up so the top is cropped off instead of the bottom.
Also, this should remain responsive as the viewport changes width.
Here is a fiddle
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>

It's doable with known height container, like your demo. We can set the container to position:relative, and set the image to position:absolute, plus some extra set ups as follows.
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
jsfiddle

If you are OK with using the images as the div background, you can do the following:
Option1:
HTML:
<div class="container" id="first"></div>
<div class="container" id="second"></div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
background-position: center center;
background-repeat: no-repeat;
}
#first {
background-image: url('http://placekitten.com/901/500/');
}
#second {
background-image: url('http://placekitten.com/900/500/');
}
Update- Option2:
without using the image as background.
HTML:
<div class="container">
<img class="centered" src="http://placekitten.com/900/500/" />
</div>
<div class="container">
<img class="centered" src="http://placekitten.com/901/500/" />
</div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
}
.centered {
object-fit: none;
object-position: center;
width: 100%;
height: inherit;
}
Please check this option1, option2

For now I'm going to use:
$("img").each(function(){
var hHeight = $(this).height()/2;
$(this).css("top", - hHeight);
});
I would love to see other solutions, especially if they are better.