So I am working on this project and I made a slider that slides 3 pics at a time but when it comes to the last 3 pics it stops (because of the condition) but I want to make it into infinite loop and I want it to autoslide every 3 seconds. Does anybody know how I can rewrite this part of code to make this work?
const carousel = document.querySelector(".carouselSlides");
const card = carousel.querySelector(".card");
const leftButton = document.querySelector(".slideLeft");
const rightButton = document.querySelector(".slideRight");
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card);
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);
const cardCount = carousel.querySelectorAll(".card").length;
let offset = 0;
const maxX = -(
(cardCount / 3) * carouselWidth +
cardMarginRight * (cardCount / 3) -
carouselWidth -
cardMarginRight
);
leftButton.addEventListener("click", function() {
if (offset !== 0) {
offset += carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
rightButton.addEventListener("click", function() {
if (offset !== maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
.carouselContainer {
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
overflow: hidden;
height: 58vh;
width: 92vw;
margin: 0 auto;
}
.carouselSlides {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
position: absolute;
left: 0;
transition: all 1s ease;
}
.button-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.slideLeft {
position: relative;
color: #f1f1f1;
background-color: transparent;
border: none;
font-size: 4rem;
right: 26rem;
}
.slideRight {
position: relative;
color: #f1f1f1;
background-color: transparent;
border: none;
font-size: 4rem;
left: 26rem;
}
<div class="carouselContainer">
<div class="carouselSlides">
<div id="slide0" class="card">
<div class="card__thumbnail">
<span class="card__title">FADE</span>
<button class="morebtn" onclick="">READ MORE</button>
</div>
</div>
</div>
<div class="button-wrapper">
<button class="slideLeft">‹</button>
<button class="slideRight">›</button>
</div>
</div>
Related
I created a simple carousel using HTML, CSS, and Javascript.
Clicking the left button shows the previous slide and the right one shows the next slide.
But my concern is that slide change is not working correctly
when clicking the next button: After the final slide, it won't go to the first slide again.
when clicking the previous button: After the first slide, it won't go again to last the slide again.
So please review my code and let me know my error.
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray=[first,scond,third,fouth];
let index= 0;
let activeSlide= slidesArray[index].classList.add('active');
left.addEventListener('click',()=>{
if (++index > 0) {
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click',()=>{
if (index > 0) {
slidesArray[index].classList.add('deactive');
slidesArray[--index].classList.add('active');
}
});
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
A chained ternary expression can be used to determine the new index number in a single line:
to = to >= size ? 0 : to < 0 ? size - 1 : to;
Details are commented in example
// Reference the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
/*
Collect all div.slide into an array
Define the array's size
Define a number value outside of the function
*/
let slides = [...document.querySelectorAll('.slide')];
let size = slides.length;
let index = 0;
// Bind click event to button.prev
prev.onclick = event => move(index - 1);
// Bind click event to button.next
next.onclick = event => move(index + 1);
/*
Pass newest index number
Ternary expression:
If the given number is greater than or equal to size of the array...
...return 0...
...If the given number is less than 0...
...return last index of array...
...otherwise return the given number
Toggle the current .slide.active and new .slide
Assign index as the given number
*/
function move(to) {
to = to >= size ? 0 : to < 0 ? size - 1 : to;
slides[index].classList.toggle("active");
slides[to].classList.toggle("active");
index = to;
}
html {
font: 300 3vmin/1 Consolas;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: max-content;
min-height: 100vh;
}
.slides {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 420px;
height: 400px;
overflow: hidden;
}
.slide {
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 350px;
border-radius: 20px;
font-size: 50px;
font-weight: 600;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
transform: translate(-50%, -50%);
}
.active {
visibility: visible;
}
.slide:first-of-type {
background-color: #F7EC09;
}
.slide:nth-of-type(2) {
background-color: #3EC70B;
}
.slide:nth-of-type(3) {
background-color: #3B44F6;
}
.slide:nth-of-type(4) {
background-color: #A149FA;
}
.ctrl {
display: flex;
justify-content: space-between;
position: absolute;
top: 45%;
left: 45%;
width: 150%;
transform: translate(-50%, -50%);
}
.next,
.prev {
border: none;
font-size: 100px;
font-weight: 700;
background: none;
cursor: pointer;
}
<main>
<section class="slides">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</section>
<menu class="ctrl">
<button class="prev"><</button>
<button class="next">></button>
</menu>
</main>
You need to reset the index of the slide when you click next and reach to maximum slide you need to reset index to 0 to return to first slide, also when you click prev and you in the first slide, you need to reset index to 3 to return the last slide.
let right = document.querySelector(".nxt");
let left = document.querySelector(".pre");
let slids = document.querySelector(".slids");
let first = document.querySelector(".first");
let scond = document.querySelector(".scond");
let third = document.querySelector(".third");
let fouth = document.querySelector(".fouth");
const elementsArr = [first, scond, third, fouth];
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add("active");
left.addEventListener("click", () => {
if (index === 3) {
index = -1;
}
index++;
resetActiveElements()
});
right.addEventListener("click", () => {
if (index === 0) index = 4;
index--;
resetActiveElements()
});
const resetActiveElements = () => {
elementsArr.forEach((element, i) => {
if (index === i) {
element.classList.add("active");
} else {
element.classList.remove("active");
}
});
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.slids>*{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 400px;
height: 350px;
font-size: 50px;
font-weight: 600;
display: grid;
place-items: center;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
visibility: hidden;
}
.active{
visibility: visible;
}
.first{
background-color: #F7EC09;
}
.scond{
background-color: #3EC70B;
}
.third{
background-color: #3B44F6;
}
.fouth{
background-color: #A149FA;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
display: flex;
gap: 450px;
}
.nxt, .pre{
font-size: 100px;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
}
<body>
<div class="slids">
<div class="first">1</div>
<div class="scond">2</div>
<div class="third">3</div>
<div class="fouth">4</div>
</div>
<div class="btn">
<button class="nxt"><</button>
<button class="pre">></button>
</div>
/* <div class="btn">
<button class="pre"><</button>
<button class="nxt">></button>
</div> */
let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');
let slids = document.querySelector('.slids');
let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');
let slidesArray = [first, scond, third, fouth];
let index = 0;
let activeSlide = slidesArray[index].classList.add('active');
left.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 0) {
index = 3;
slidesArray[index].classList.add('active');
} else {
index--;
slidesArray[index].classList.add('active');
}
});
right.addEventListener('click', () => {
slidesArray[index].classList.remove('active');
if (index == 3) {
index = 0;
slidesArray[index].classList.add('active');
} else {
index++;
slidesArray[index].classList.add('active');
}
});
I am trying to get this card slider to transform cards on each click. Every time the user clicks on any of the cards, the last card in the array goes to the beginning, and all cards are moving as in a carousel, scaling and changing their zIndex. It works perfectly on the first click but then cards start translating differently.
After searching and searching, I read you have to keep track of translations therefore I am using distanceCounter0Elm and distanceCounterElse variables, but it does not seem to work. Also tried to reset all transforms and even a different approach by adding css classes but could not get it to work properly.
Where is my mistake? It might be something very simple but I am not being able to see it. I would really appreciate your help. Many thanks!
<section class="section" id="portfolio">
<h3 class="tituloTrabajos">Nuestros trabajos</h3>
<div class="container" id="grasscoContainer"></div>
</section>
section{
background-color: #021845;
width: 98vw;
height: 180vh;
padding-top: 10vh;
display: flex;
flex-direction: column;
}
.tituloTrabajos{
color: white;
text-align: center;
font-size: 2vw;
margin-bottom: 25vh;
}
.sitesContainer{
display: flex;
justify-content: space-evenly;
align-items: center;
align-content: center;
flex-wrap: wrap;
row-gap: 8vh;
}
.siteDiv{
background-color: #ddf1fc;
}
.sitePic{
width: 38vw;
border-radius: 20px;
}
.container{
position: relative;
height: 150vh;
width: 98vw;
display: flex;
justify-content: center;
overflow: hidden;
}
.eachCard{
width: 38vw;
height: 40vh;
border-radius: 20px;
box-shadow: -5px 0 6px #000, 10px 0 6px #000;
transition: 0.4s ease-out;
position: relative;
border: 5px solid white;
cursor: pointer;
top: 5vh;
}
.eachCard:not(:first-child){
margin-left: -30vw;
}
.originalzIndex2{
z-index: 2;
}
.originalzIndex1{
z-index: 1;
}
.originalScale{
transform: scale(1.2);
}
var grasscoImgs = ["img/grassco2.png", "img/grassco3.png", "img/grassco.png", "img/grassco4.png", "img/grassco6.png"];
var grasscoContainer = document.getElementById("grasscoContainer");
var cards = document.getElementsByClassName("eachCard");
grasscoImgs.forEach(function(image){
var img = document.createElement("img");
img.src = image;
img.classList.add("eachCard");
grasscoContainer.appendChild(img);
img.onclick = slideCards;
});
cards[2].classList.add("originalzIndex2", "originalScale");
cards[3].classList.add("originalzIndex1");
var cardsArr = Array.from(cards);
function slideCards(){
var lastCard = cardsArr.pop();
cardsArr.splice(0, 0, lastCard);
var distanceCounter0Elm = " translate(-32vw)";
var distanceCounterElse = " translate(2vw)";
for (let i = 0; i < cardsArr.length; i++){
if (i == 0){
cardsArr[0].style.transform = distanceCounter0Elm + " scale(0.8)";
cardsArr[0].style.zIndex = "0";
distanceCounter0Elm += " translate(-32vw)";
} else {
cardsArr[1].style.transform = distanceCounterElse + " scale(1)";
cardsArr[2].style.transform = distanceCounterElse + " scale(1.2)";
cardsArr[3].style.transform = distanceCounterElse + " scale(1)";
cardsArr[4].style.transform = distanceCounterElse + " scale(0.8)";
cardsArr[1].style.zIndex = "1";
cardsArr[2].style.zIndex = "2";
cardsArr[3].style.zIndex = "1";
cardsArr[4].style.zIndex = "0";
distanceCounterElse += " translate(2vw)";
};
};
};
I'm looking to implement a circular menu which when clicked spins the item selected to a 90 degree angle. However, I need some help in adapting the code to have the end rotation set at 90degrees instead of 0.
I've run through a number of options but can't seem to get to the desired result of a final position of 90 degrees instead of 0.
The code is below and I'm not great with JS so any help would be really appreciated.
const buttons = Array.from(document.querySelectorAll('.result-button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 125
let angle = 0
buttons.forEach((button, i) => {
button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
button.addEventListener('click', move)
})
function move(e) {
const n = buttons.indexOf(e.target)
const endAngle = (n % count) * increase
console.log(endAngle)
turn()
function turn() {
if (Math.abs(endAngle - angle) > 1 / 8) {
const sign = endAngle > angle ? 1 : -1
angle = angle + sign / 8
setTimeout(turn, 20)
} else {
angle = endAngle
}
buttons.forEach((button, i) => {
button.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px'
button.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px'
})
}
}
.result-options {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 100px;
text-align: center;
}
.center {
width: 100px;
height: 100px;
background-color: #3a6d7c;
border-radius: 100%;
position: relative;
z-index: 2;
border: 4px solid #FFF;
}
.result-button {
position: absolute;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #96cd5a;
border: 4px solid #FFF;
line-height: 100px;
text-align: center;
cursor: pointer;
}
<div class="result-options">
<div class="center">menu
<div class="result-button">1</div>
<div class="result-button">2</div>
<div class="result-button">3</div>
<div class="result-button">4</div>
<div class="result-button">5</div>
<div class="result-button">6</div>
<div class="result-button">7</div>
</div>
</div>
I would simplify your code using CSS variables then it will be easy to adjust.
const buttons = Array.from(document.querySelectorAll('.result-button'))
const count = buttons.length
buttons.forEach((button, i) => {
button.style.setProperty("--r", "calc("+i+"*360deg/"+count+" - var(--d))");
button.addEventListener('click', move)
})
function move(e) {
const n = buttons.indexOf(e.target);
const endAngle = n*360/count;
document.querySelector('.result-options').style.setProperty("--d", endAngle+"deg");
}
.result-options {
--d:90deg; /* this will control the initial positions */
line-height: 100px;
width: 100px;
text-align: center;
margin:150px auto 0;
}
.center {
background-color: #3a6d7c;
border-radius: 100%;
display:grid;
outline: 4px solid #FFF;
}
.center span {
grid-area:1/1;
}
.result-button {
grid-area:1/1;
border-radius: 100%;
background-color: #96cd5a;
outline: 4px solid #FFF;
cursor: pointer;
transition:2s;
transform:rotate(var(--r)) translateX(125px) rotate(calc(-1*var(--r)))
}
<div class="result-options">
<div class="center"><span>menu</span>
<div class="result-button">1</div>
<div class="result-button">2</div>
<div class="result-button">3</div>
<div class="result-button">4</div>
<div class="result-button">5</div>
<div class="result-button">6</div>
<div class="result-button">7</div>
</div>
</div>
I tried to build a carousel with only Vanilla JavaScript but I encounter some issues along the way. The carousel should display 5 items on the page from a total of 10, and when the "next" button is clicked should slide 3 elements. The problem is that will continue to translateX after the last element in the slider was reached.
const carousel = document.querySelector("[data-target='carousel']");
const card = carousel.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card);
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);
const cardCount = carousel.querySelectorAll("[data-target='card']").length;
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + cardMarginRight * (cardCount / 3) - carouselWidth - cardMarginRight);
// click events
leftButton.addEventListener("click", function () {
if (offset !== 0) {
offset += carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
rightButton.addEventListener("click", function () {
if (offset !== maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
.wrapper {
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
}
.carousel {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: flex;
position: absolute;
left: 0;
transition: all 1s ease;
}
.card {
background: black;
min-width: 344px;
height: 200px;
margin-right: 24px;
display: inline-block;
color: white;
font-size: 45px;
display: grid;
place-items: center;
}
<div class="wrapper">
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">1</li>
<li class="card" data-target="card">2</li>
<li class="card" data-target="card">3</li>
<li class="card" data-target="card">4</li>
<li class="card" data-target="card">5</li>
<li class="card" data-target="card">6</li>
<li class="card" data-target="card">7</li>
<li class="card" data-target="card">8</li>
<li class="card" data-target="card">9</li>
<li class="card" data-target="card">10</li>
</ul>
</div>
<div class="button-wrapper">
<button data-action="slideLeft">left</button>
<button data-action="slideRight">right</button>
</div>
The problem is in this line, you should not set it to equal because if that's not equal it continues sliding
if (offset !== maxX)
const carousel = document.querySelector("[data-target='carousel']");
const card = carousel.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card);
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);
const cardCount = carousel.querySelectorAll("[data-target='card']").length;
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + cardMarginRight * (cardCount / 3) - carouselWidth - cardMarginRight);
// click events
leftButton.addEventListener("click", function () {
if (offset !== 0) {
offset += carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
rightButton.addEventListener("click", function () {
if (offset+500 > maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
.wrapper {
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
}
.carousel {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: flex;
position: absolute;
left: 0;
transition: all 1s ease;
}
.card {
background: black;
min-width: 344px;
height: 200px;
margin-right: 24px;
display: inline-block;
color: white;
font-size: 45px;
display: grid;
place-items: center;
}
<div class="wrapper">
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">1</li>
<li class="card" data-target="card">2</li>
<li class="card" data-target="card">3</li>
<li class="card" data-target="card">4</li>
<li class="card" data-target="card">5</li>
<li class="card" data-target="card">6</li>
<li class="card" data-target="card">7</li>
<li class="card" data-target="card">8</li>
<li class="card" data-target="card">9</li>
<li class="card" data-target="card">10</li>
</ul>
</div>
<div class="button-wrapper">
<button data-action="slideLeft">left</button>
<button data-action="slideRight">right</button>
</div>
I think the problem here is the more or less fixed width of each card which leads to different results on different screen sizes.
min-width: 344px;
Ive changed to (just for example)
min-width: 19%; <!-- you need 5 cards on screen -->
and in your JavaScript something like this:
// get card size
const cardWidth = card.offsetWidth;
//and later on e.g for button to the right do offset 3 cards
offset -= (cardWidth + cardMarginRight) * 3;
We need advice on how to do what would happen with normal scrolling of the page (with a wheel, or in a mob with a finger) after the block has been screwed up to the top of the screen, it began to scroll horizontally and after the edge of the block is reached, the standard scroll continues, respectively, if the scroll goes up, then that's it in reverse order. (There may be several such blocks on a page)
* {
box-sizing: border-box;
margin: 0;
}
body {
overflow-x: hidden;
}
.simple {
height: 100vh;
background: #1f69c0;
border-bottom: 2px solid #777;
}
.simple2 {
height: 400px;
background: #EEAA07;
border-bottom: 2px solid #777;
}
.simple3 {
height: 400px;
background: #07eed9;
border-bottom: 2px solid #777;
}
.outer {
height: 150px;
background: #7b8e39;
overflow-y: hidden;
overflow-x: scroll;
}
.inner {
height: 100%;
margin: 0 100px;
display: flex;
}
.cube {
min-width: 200px;
height: 100px;
background: #f6f6f6;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="simple"></div>
<div class="outer">
<div class="inner">
<div class="cube">1</div>
<div class="cube">2</div>
<div class="cube">3</div>
<div class="cube">4</div>
<div class="cube">5</div>
<div class="cube">6</div>
<div class="cube">7</div>
<div class="cube">8</div>
<div class="cube">9</div>
<div class="cube">10</div>
</div>
</div>
<div class="simple2"></div>
<div class="simple3"></div>
Here is an approximate structure, until block 2 has scrolled to the end, block 3 should be visible and after 2 has scrolled horizontally to the end, the standard scroll will continue
PS Here is an example (https://horizontalscrolling.wpdemos.net/horizontal-scrolling/) of how scrolling should work, although there can be more than 1 block on one screen
This technique needs to use javascript called "GSAP" which is a high-performance javascript animation library.
I found a similar animation that you were looking for.
Hopefully, this will help :)
//https://codepen.io/osublake/pen/e72106811a34efcccff91a03568cc790.js?v=3
class SmoothScroll {
constructor(options) {
this.endThreshold = 0.05;
this.requestId = null;
this.maxDepth = 10;
this.viewHeight = 0;
this.halfViewHeight = 0;
this.maxDistance = 0;
this.viewWidth = 0;
this.halfViewWidth = 0;
this.maxDistanceWidth = 0;
this.scrollHeight = 0;
this.endScroll = 0;
this.returnCurrentScroll = 0;
this.currentScroll = 0;
this.scrollTransform = 0;
this.horizontalScroll = 0;
this.resizeRequest = 1;
this.scrollRequest = 0;
this.scrollItems = [];
this.lastTime = -1;
this.maxElapsedMS = 100;
this.targetFPMS = 0.06;
// this.scrollBody = options.scrollBody;
// this.scrollSpacer = options.scrollSpacer;
this.target = options.target;
this.scrollEase = options.scrollEase != null ? options.scrollEase : 0.1;
this.maxOffset = options.maxOffset != null ? options.maxOffset : 500;
this.horizontalScrollWrapper = options.horizontalScrollWrapper;
this.horizontalScrollTarget = options.horizontalScrollTarget;
this._horziontalSetHeihgt();
this.childElements = this._childElements();
this.rectHorStart = this.horizontalScrollWrapper.getBoundingClientRect();
this.horzItemStart = {
top: this.rectHorStart.top,
bottom: this.rectHorStart.bottom,
height: this.rectHorStart.height
}
this.addItems();
window.addEventListener("resize", this._onResize);
window.addEventListener("scroll", this._onScroll);
//this.scrollBody.addEventListener("scroll", this._onScroll);
this._update();
}
_childElements = (event) => {
const childElementsNode = this.target.querySelectorAll("*[data-color]");
return childElementsNode;
}
_horizonstalScrollRect = (event) => {
const horzintalRect = this.horizontalScrollTarget.getBoundingClientRect();
return horzintalRect;
}
_lastScrollRect = (event) => {
const lastScrollRect = this.horizontalScrollTarget.lastElementChild.getBoundingClientRect();
return lastScrollRect;
}
_horziontalSetHeihgt = (event) => {
let horScrHeight = 0;
if (
this.horizontalScrollTarget !== null &&
this.horizontalScrollWrapper !== null
) {
const lastScrollRect = this._lastScrollRect();
horScrHeight = this.horizontalScrollTarget.scrollWidth - lastScrollRect.width + this._horizonstalScrollRect().height;
this.horizontalScrollWrapper.style.height = horScrHeight + "px";
}
}
_onResize = (event) => {
this.resizeRequest++;
if (!this.requestId) {
this.lastTime = performance.now();
this.requestId = requestAnimationFrame(this._update);
}
};
_onScroll = (event) => {
this.scrollRequest++;
if (!this.requestId) {
this.lastTime = performance.now();
this.requestId = requestAnimationFrame(this._update);
}
};
_horizonstalScroll = (scrollY,dt) => {
if (this.horizontalScrollWrapper !== null) {
const rectHor = this.horizontalScrollWrapper.getBoundingClientRect();
const lastScrollRect = this._lastScrollRect();
const itemHor = {
target: this.horizontalScrollTarget,
targetRect: this._horizonstalScrollRect(),
top: rectHor.top,
bottom: rectHor.bottom + scrollY,
topScroll: rectHor.top + scrollY,
horizonstalMove: 0,
};
itemHor.horizonstalMove += this.currentScroll - this.horzItemStart.top;
if(scrollY >= this.horzItemStart.top && scrollY <= this.horzItemStart.bottom - itemHor.targetRect.height){
itemHor.target.style.position = 'fixed';
itemHor.target.style.transform = `translate3d(-${itemHor.horizonstalMove}px,0px,0px)`;
//this._paralaxHorizontal(dt);
if(lastScrollRect.x <= (lastScrollRect.width/2)){
this.scrollTransform = this.horzItemStart.bottom - itemHor.targetRect.height;
itemHor.target.style.top = this.horzItemStart.bottom - itemHor.targetRect.height+'px';
}else {
this.scrollTransform = this.horzItemStart.top;
itemHor.target.style.top = this.horzItemStart.top+'px';
}
}
}
};
_changeColorBody = (event) => {
if(this.childElements.length > 0){
this.childElements.forEach(child => {
const wrapper = document.querySelector('.change_color_page');
const childRect = child.getBoundingClientRect();
const childAttr = child.getAttribute('data-color');
if(childRect.y <= this.halfViewHeight && childRect.bottom >= this.halfViewHeight){
if(childAttr == "off_white"){
if(!document.body.classList.contains('white')){
document.body.classList.add('white');
}
if(!wrapper.classList.contains('white')){
wrapper.classList.add('white');
}
}else if(childAttr == "dark"){
if(document.body.classList.contains('white')){
document.body.classList.remove('white');
}
if(wrapper.classList.contains('white')){
wrapper.classList.remove('white');
}
}
}
});
}
}
_update = (currentTime = performance.now()) => {
let elapsedMS = currentTime - this.lastTime;
if (elapsedMS > this.maxElapsedMS) {
elapsedMS = this.maxElapsedMS;
}
const deltaTime = elapsedMS * this.targetFPMS;
const dt = 1 - Math.pow(1 - this.scrollEase, deltaTime);
const resized = this.resizeRequest > 0;
const scrollY = window.pageYOffset;
//const scrollY = this.scrollBody.scrollTop;
if (resized) {
this._horziontalSetHeihgt();
const height = this.target.clientHeight;
document.body.style.height = height + "px";
//this.scrollSpacer.style.height = height + "px";
this.scrollHeight = height;
this.viewHeight = window.innerHeight;
this.halfViewHeight = this.viewHeight / 2;
this.maxDistance = this.viewHeight * 2;
this.resizeRequest = 0;
this.viewWidth = window.innerWidth;
this.halfViewWidth = this.viewWidth / 2;
this.maxDistanceWidth = this.viewWidth * 2;
}
this.endScroll = scrollY;
// this.scrollTransform += (scrollY - this.scrollTransform) * this.scrollEase;
this.scrollTransform += (scrollY - this.scrollTransform) * dt;
this.currentScroll += (scrollY - this.currentScroll) * dt;
if (Math.abs(scrollY - this.currentScroll) < this.endThreshold || resized) {
this.currentScroll = scrollY;
this.scrollRequest = 0;
}
if (
Math.abs(scrollY - this.scrollTransform) < this.endThreshold ||
resized
) {
this.scrollTransform = scrollY;
this.scrollRequest = 0;
}
///change color section
this._changeColorBody();
///horizontal scroll
this._horizonstalScroll(this.currentScroll,dt);
// const scrollOrigin = scrollY + this.halfViewHeight;
const scrollOrigin = this.currentScroll + this.viewHeight;
this.target.style.transform = `translate3d(0px,-${this.scrollTransform}px,0px)`;
//items
for (let i = 0; i < this.scrollItems.length; i++) {
const item = this.scrollItems[i];
const distance = scrollOrigin - item.top;
const offsetRatio = distance / this.maxDistance;
item.endOffset = Math.round(
this.maxOffset * item.depthRatio * offsetRatio
);
if (Math.abs(item.endOffset - item.currentOffset < this.endThreshold)) {
item.currentOffset = item.endOffset;
} else {
// item.currentOffset += (item.endOffset - item.currentOffset) * this.scrollEase;
item.currentOffset += (item.endOffset - item.currentOffset) * dt;
}
if(item.direction == "y"){
item.target.style.transform = `translate3d(0px,${item.currentOffset}px,0px)`;
}else if(item.direction == "x"){
item.target.style.transform = `translate3d(${item.currentOffset}px,0px,0px)`;
}
}
this.lastTime = currentTime;
this.requestId =
this.scrollRequest > 0 ? requestAnimationFrame(this._update) : null;
};
addItems() {
this.scrollItems = [];
const elements = document.querySelectorAll("*[data-depth]");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
const depth = +element.getAttribute("data-depth");
const direction_item = element.getAttribute("data-direction");
const rect_item = element.getBoundingClientRect();
const item = {
rect: rect_item,
target: element,
top: rect_item.top + window.pageYOffset,
//top: rect_item.top + this.scrollBody.scrollTop,
depth: depth,
depthRatio: depth / this.maxDepth,
currentOffset: 0,
endOffset: 0,
direction: direction_item
};
this.scrollItems.push(item);
}
return this;
}
currentScrollReturn() {
return this.currentScroll;
}
}
document.documentElement.style.setProperty(
"--scrollbar-size",
getScrollbarSize() + "px"
);
var scroller = new SmoothScroll({
// scrollBody: document.querySelector(".scroll-content"),
// scrollSpacer: document.querySelector(".spacer"),
target: document.querySelector(".scroll-container"), // element container to scroll
scrollEase: 0.05,
horizontalScrollWrapper: document.querySelector(".horizontal-scroll-wrapper"),
horizontalScrollTarget: document.querySelector(".horizontal-scroll")
});
function getScrollbarSize() {
var div = document.createElement("div");
div.classList.add("scrollbar-test");
document.body.appendChild(div);
var size = div.offsetWidth - div.scrollWidth;
document.body.removeChild(div);
return size;
}
$white: #fbe8ee;
$black: #0a0a0a;
:root {
--scrollbar-size: 0px;
}
*, :after, :before {
box-sizing: border-box;
}
body {
}
.viewport {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body {
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin: 0;
font-family: "Courier New", Courier, monospace;
*:not(.change_color_page) {
color: $white;
transition: color 0.5s ease-in-out, border-color 0.5s ease;
border-color: $white;
}
&.white {
*:not(.change_color_page) {
color: $black;
transition: color 0.5s ease-in-out, border-color 0.5s ease;
border-color: $black;
}
}
}
.change_color_page {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: $black;
transition: background-color 0.5s ease;
backface-visibility: hidden;
transform-style: preserve-3d;
&.white {
background-color: $white;
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
background-color: $white;
&.white {
background-color: $black;
}
}
.scrollbar-test {
position: absolute;
visibility: hidden;
overflow: scroll;
width: 100px;
height: 100px;
top: -99999px;
left: -99999px;
pointer-events: none;
user-select: none;
}
.fixed-content {
position: absolute;
display: block;
top: 0;
left: 0;
right: var(--scrollbar-size, 0px);
bottom: 0;
z-index: 2;
pointer-events: none;
}
.scroll-container {
position: absolute;
overflow: hidden;
z-index: 10;
backface-visibility: hidden;
transform-style: preserve-3d;
width: 100%;
}
.content {
overflow: hidden;
position: relative;
width: 100%;
}
.spacer {
background: transparent;
}
.single-item {
flex: 0 0 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 70px;
&.left {
justify-content: flex-start;
}
p {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
border-style: solid;
}
}
.horizontal-scroll-wrapper {
position: relative;
}
.horizontal-scroll {
display: flex;
}
.horizontal-scroll .single-item {
flex: 0 0 100vw;
p {
width: 600px;
height: 600px;
max-width: 80%;
max-height: 80%;
}
}
<div class="change_color_page"></div>
<header></header>
<div class="viewport">
<div class="scroll-container">
<div class="content">
<div class="single-item active" data-color="off_white">
<p>1</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-7" data-direction="y">2</p>
</div>
<div class="single-item" data-color="off_white">
<p class="item_to_move">3</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-3" data-direction="y">4</p>
</div>
<div class="single-item" data-color="off_white">
<p data-depth="-3" data-direction="y">5</p>
</div>
<div class="horizontal-scroll-wrapper" data-color="dark">
<div class="horizontal-scroll">
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">6</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">7</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">8</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">9</span></p>
</div>
<div class="single-item">
<p><span data-depth-hor="-3" data-direction="left">10</span></p>
</div>
</div>
</div>
<div class="single-item" data-color="off_white">
<p data-depth="-3" data-direction="y">11</p>
</div>
<div class="single-item" data-color="dark">
<p data-depth="-3" data-direction="y">12</p>
</div>
<div class="single-item left" data-color="off_white">
<p data-depth="15" data-direction="x">13</p>
</div>
</div>
</div>
</div>
source code from: https://codepen.io/duty47/pen/vYYEgam