Shefarol Soluções Web

Scroll horizontal - Voltar

Exemplo 1
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
Link 10
Exemplo 2
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
Link 10

 

Arquivo HTML - Exemplo 1
<div class="scroll1">
	<h6>Exemplo 1</h6>
	<div class="scroll_itens_1">
  		<div><a href="#" class="btn btn-info">Link 1</a></div>
      	<div><a href="#" class="btn btn-info">Link 2</a></div>
      	<div><a href="#" class="btn btn-info">Link 3</a></div>
     	<div><a href="#" class="btn btn-info">Link 4</a></div>
      	<div><a href="#" class="btn btn-info">Link 5</a></div>
      	<div><a href="#" class="btn btn-info">Link 6</a></div>
      	<div><a href="#" class="btn btn-info">Link 7</a></div>
      	<div><a href="#" class="btn btn-info">Link 8</a></div>
      	<div><a href="#" class="btn btn-info">Link 9</a></div>
      	<div><a href="#" class="btn btn-info">Link 10</a></div>
	</div>
</div>

 

Arquivo HTML - Exemplo 2
<div class="scroll2">
	<h6>Exemplo 2</h6>
	<div class="scroll_itens_2">
  		<div><a href="#" class="btn btn-info">Link 1</a></div>
      	<div><a href="#" class="btn btn-info">Link 2</a></div>
      	<div><a href="#" class="btn btn-info">Link 3</a></div>
     	<div><a href="#" class="btn btn-info">Link 4</a></div>
      	<div><a href="#" class="btn btn-info">Link 5</a></div>
      	<div><a href="#" class="btn btn-info">Link 6</a></div>
      	<div><a href="#" class="btn btn-info">Link 7</a></div>
      	<div><a href="#" class="btn btn-info">Link 8</a></div>
      	<div><a href="#" class="btn btn-info">Link 9</a></div>
      	<div><a href="#" class="btn btn-info">Link 10</a></div>
	</div>
</div>

 

Arquivo CSS - Exemplo 1
.scroll1 {
  max-width: 50%;
  padding: 20px;
  margin: 0 auto;
  overflow: hidden;
  mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.scroll_itens_1 {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: animacao 10s linear infinite;
}

@keyframes animacao {
  to { translate: calc(-50% - 5px); }
}

.paused {
  animation-play-state: paused;
}

 

Arquivo CSS - Exemplo 2
.scroll2 {
  max-width: 50%;
  padding: 20px;
  margin: 0 auto;
  overflow: hidden;
  mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.scroll_itens_2 {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: animacao 10s linear reverse infinite;
}

@keyframes animacao {
  to { translate: calc(-50% - 5px); }
}

.paused {
  animation-play-state: paused;
}

 

Arquivo Javascript - Exemplo 1
const elemScroll1 = document.querySelector(".scroll1");
const elemContainer1 = elemScroll1.querySelector(".scroll_itens_1");
const elemFilhos1 = Array.from(elemContainer1.children);

elemFilhos1.forEach((item) => {
  const elemDuplicado1 = item.cloneNode(true);
  elemDuplicado1.setAttribute("aria-hidden", true);

  elemContainer1.appendChild(elemDuplicado1);
});

const links1 = document.querySelectorAll(".scroll_itens_1 a");

links1.forEach(link1 => {
  link1.addEventListener("mouseover", () => {
    elemContainer1.classList.add("paused");
  });
  link1.addEventListener("mouseout", () => {
    elemContainer1.classList.remove("paused");
  });
});

 

Arquivo Javascript - Exemplo 2
const elemScroll2 = document.querySelector(".scroll2");
const elemContainer2 = elemScroll2.querySelector(".scroll_itens_2");
const elemFilhos2 = Array.from(elemContainer2.children);

elemFilhos2.forEach((item) => {
  const elemDuplicado2 = item.cloneNode(true);
  elemDuplicado2.setAttribute("aria-hidden", true);

  elemContainer2.appendChild(elemDuplicado2);
});

const links2 = document.querySelectorAll(".scroll_itens_2 a");

links2.forEach(link2 => {
  link2.addEventListener("mouseover", () => {
    elemContainer2.classList.add("paused");
  });
  link2.addEventListener("mouseout", () => {
    elemContainer2.classList.remove("paused");
  });
});