Learn HTML Scroll Tutorial

Tips (Total 2)

1. How to create HTML Right Left Auto Scroll Turnning

2. How to Scroll Horizontal Containers Mobile & Desktop

# Tips-1) How to create HTML Right Left Auto Scroll Turnning

It will auto go and come the html element left and right.

Full Example

See the Example and Learn More.

index.html

Example: HTML

  <div class="wrapper">
  <div class="cards-container cards-container-left">
		<div class="card-project card-project-left">
			to Left First column
		</div>
		<div class="card-project card-project-left">
			to Left Second column
		</div>
		<div class="card-project card-project-left">
			to Left Third column
		</div>
		<div class="card-project card-project-left">
			to Left Fourth column
		</div>
	</div>
  
   <div class="cards-container cards-container-right">
		<div class="card-project card-project-right">
			to Right First column
		</div>
		<div class="card-project card-project-right">
			to Right Second column
		</div>
		<div class="card-project card-project-right">
			to Right Third column
		</div>
		<div class="card-project card-project-right">
			to Right Fourth column
		</div>
	</div>
</div>

Output should be:

# Tips-2) How to Scroll Horizontal Containers Mobile & Desktop

A useful codes to show up your content.

See the example.

Full Code

See the Example.

index.html

Example: HTML

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  /* Webkit */
  width: 0;
  height: 0;
}

.hs {
  display: flex;
  overflow-x: scroll;
  justify-content: space-between;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
}
.hs__header {
  display: flex;
  align-items: center;
  width: 100%;
}
.hs__headline {
  flex: 1;
}
.hs__arrows {
  align-self: center;
}
.hs__arrows .arrow:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
  background-size: contain;
  filter: brightness(5);
  width: 18px;
  height: 12px;
  cursor: pointer;
}
.hs__arrows .arrow.disabled:before {
  filter: brightness(2);
}
.hs__arrows .arrow.arrow-prev:before {
  transform: rotate(90deg);
  margin-right: 10px;
}
.hs__arrows .arrow.arrow-next:before {
  transform: rotate(-90deg);
}
.hs__item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(25% - 10px * 2 - 5px);
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.hs__item:last-child:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 1px;
  right: calc(10px * 2 * -1);
}
.hs__item:first-child {
  margin-left: calc(10px * 2);
}
.hs__item__description {
  z-index: 1;
  align-self: flex-start;
  margin: 10px 0;
}
.hs__item__subtitle {
  color: #aaa;
  display: block;
}
.hs__item__image__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.hs__item__image {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (hover: none) and (pointer: coarse) {
  .hs__wrapper .hs__arrows {
    display: none;
  }
  .hs__wrapper .hs__item {
    flex: 1 0 calc(23% - 10px * 2);
  }
}
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 990px) {
  .hs__wrapper .hs__item {
    flex: 1 0 calc(45% - 10px * 2);
  }
}

/* Base Styling */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Muli", sans-serif;
  color: white;
  background: white;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.container {
  max-width: 990px;
  padding: calc(10px * 2);
  margin: 0 auto;
  background: #121212;
  mix-blend-mode: invert;
  position: relative;
}
.container:after {
  content: "";
  width: 100vw;
  height: 100%;
  background: #212121;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
@media only screen and (min-width: 990px) {
  .container {
    padding: calc(10px * 4) calc(10px * 8);
  }
}

.description {
  max-width: 990px;
  color: #212121;
  margin: 0 auto;
  padding: calc(10px * 4);
}

ul {
  padding: 0;
  margin: 0;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
</head>

<body translate="no">
  <div class="container">
  <div class="hs__wrapper">
    <div class="hs__header">
      <h2 class="hs__headline">Headline 1
      </h2>
      <div class="hs__arrows"><a class="arrow disabled arrow-prev"></a><a class="arrow arrow-next"></a></div>
    </div>
    <ul class="hs">
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig12" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 1</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig22" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 2</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig32" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 3</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig42" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 4</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig52" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 5</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig62" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 6</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig72" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 7</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig82" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 8</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig92" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 9</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig102" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 10</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig112" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 11</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig122" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 12</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig132" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 13</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig142" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 14</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig152" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 15</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig162" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 16</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig172" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 17</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig182" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 18</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig192" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 19</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
      <li class="hs__item"> 
        <div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&amp;sig202" alt=""/></div>
        <div class="hs__item__description"><span class="hs__item__title">Amazing title 20</span><span class="hs__item__subtitle">some subtitle</span></div>
      </li>
    </ul>
  </div>




  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
      <script id="rendered-js" >
// work in progress - needs some refactoring and will drop JQuery i promise :)
var instance = $(".hs__wrapper"),x;
$.each(instance, function (key, value) {

  var arrows = $(instance[key]).find(".arrow"),
  box = $(instance[key]).find(".hs"),x,
  mx = 0,
  maxScrollWidth = box[0].scrollWidth - box[0].clientWidth / 2 - 10;

  $(arrows).on('click', function () {

    if ($(this).hasClass("arrow-next")) {
      x = box.width() / 2 + box.scrollLeft() - 10;
      box.animate({
        scrollLeft: x });

      if (x < maxScrollWidth - box.width() / 2) {
        $(this).prev().removeClass('disabled');
      } else {
        $(this).addClass('disabled');
      }
    } else {
      x = box.width() / 2 - box.scrollLeft() - 10;
      box.animate({
        scrollLeft: -x });

      if (x > -10) {
        $(this).addClass('disabled');
      } else {
        $(this).next().removeClass('disabled');
      }
    }

  });

  $(box).on({
    mousemove: function (e) {
      var mx2 = e.pageX - this.offsetLeft;
      if (mx) this.scrollLeft = this.sx + mx - mx2;
    },
    mousedown: function (e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    } });


  $(document).on("mouseup", function () {
    mx = 0;
  });

});
//# sourceURL=pen.js
    </script>

  
</body>
</html>