Search code examples
javascripthtmljquerycssfade

How do I fade horizontal scrolled content in and out?

i have horizontal scroll content on my website, however when you scroll it just cuts it off the page, quite harshly. I wanted to make it so it fades out. I have attached an image showing what i mean, the top photo is what is happening now, the bottom photo shows what i am trying to achieve. I tried to add in a box shadow and inset it, but it showed below the text. I still want the scroll content to be clickable, i just want it to fade out on the left and right side.

CSS

.slider {
 width: 100%;
 height: 100%;
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 margin: 50px 0 20px 0;
 position: relative;
}

.taglink {
 padding: 6px 16px;
 cursor:pointer;
 border: 3px solid #3d3d3d;
 color: #3d3d3d;
 border-radius: 25px;
 position: relative;
 text-align: center;
 margin: 20px 7px 20px 7px;
 display: inline-block;
 flex-shrink: 0;
}

HTML

<center>

<div style="margin: 0 5%">

<div class="slider">

<div class="taglink">
Slider01
</div>
  
  <div class="taglink">
Slider02
</div>
  
  <div class="taglink">
Slider03
</div>
  
<div class="taglink">
Slider04
</div>
 
  <div class="taglink">
Slider05
</div>
  
  <div class="taglink">
Slider06
</div>
  
  <div class="taglink">
Slider07
</div>
  
  <div class="taglink">
Slider08
</div>

<div class="taglink">
Slider09
</div>
  
  <div class="taglink">
Slider10
</div>
  
  <div class="taglink">
Slider12
</div>
  
<div class="taglink">
Slider13
</div>
 
  <div class="taglink">
Slider13
</div>
  
  <div class="taglink">
Slider14
</div>
  
  <div class="taglink">
Slider15
</div>
</div>
</div>
</center>

photo showing what is happening now (top) and what i am trying to create (bottom)

Solution

  • One of the options:

    add wrap for div.slider and use after and before

    .slider_wrap{
  width: 100%;
  overflow:hidden;
  position:relative;
  }
.slider_wrap:before{
  content:'';
  height: 100%;
  width:50px;
  background:linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  position: absolute;
  top:0;
  left:0;
  z-index:1;
  }
.slider_wrap:after{
  content:'';
  height: 100%;
  width:50px;
  background:linear-gradient(-90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  position: absolute;
  top:0;
  right:0;
  z-index:1;
  }
   .slider {
     width: 100%;
     height: 100%;
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     margin: 50px 0 20px 0;
     position: relative;
    }

  .taglink {
     padding: 6px 16px;
     cursor:pointer;
     border: 3px solid #3d3d3d;
     color: #3d3d3d;
     border-radius: 25px;
     position: relative;
     text-align: center;
     margin: 20px 7px 20px 7px;
     display: inline-block;
     flex-shrink: 0;
    }
    <center>

<div style="margin: 0 5%">
<div class="slider_wrap">
<div class="slider">

<div class="taglink">
Slider01
</div>
  
  <div class="taglink">
Slider02
</div>
  
  <div class="taglink">
Slider03
</div>
  
<div class="taglink">
Slider04
</div>
 
  <div class="taglink">
Slider05
</div>
  
  <div class="taglink">
Slider06
</div>
  
  <div class="taglink">
Slider07
</div>
  
  <div class="taglink">
Slider08
</div>

<div class="taglink">
Slider09
</div>
  
  <div class="taglink">
Slider10
</div>
  
  <div class="taglink">
Slider12
</div>
  
<div class="taglink">
Slider13
</div>
 
  <div class="taglink">
Slider13
</div>
  
  <div class="taglink">
Slider14
</div>
  
  <div class="taglink">
Slider15
</div>
</div>
</div>
</div>
</center>