JS Сделать элемент прозрачным, если он вышел за пределы родительского блока

Question

Нужно, что бы элементы, которые вышли за пределы блока (бежового) становились плавно прозрачными. На чистом js `

let slider_img_width = 260;
let position_slider = 0;
let slider_item = document.getElementById('sliders_cont');
function right_button_click(){
    position_slider-=slider_img_width;
    if(position_slider==-1040){
        document.getElementById('right_slider_button').style.display = ('none');
    }
    document.getElementById('sliders_cont').style.marginLeft = (position_slider + 'px');
    document.getElementById('sliders_cont').style.transition = ('0.7s');
    document.getElementById('left_slider_button').style.display = ('block');
    

}

function left_button_click(){
    position_slider+=slider_img_width;
    document.getElementById('sliders_cont').style.marginLeft = (position_slider + 'px');
    document.getElementById('sliders_cont').style.transition = ('0.7s');
    if(position_slider==0){
        document.getElementById('left_slider_button').style.display = ('none');
    }
        document.getElementById('right_slider_button').style.display = ('block');
    
}

`

Answer 1

Без начального кода точный ответ трудно дать. Но направление такое. Всем слайдам в css указываете:

  .slide {
      opacity: 1;
      visibility: visible;
      background: blue;
      transition: 1s;
    }
    
   .slide.hide {
      opacity: 0;
      visibility: hidden;
      transition: 1s;
    }

Когда слайд выходит за пределы бежевого блока, добавляете класс слайду

document.querySelector('.slide').classList.add('hide')

Соответственно, когда он приходит в блок, делаете обратное действие, удаляете:

document.querySelector('.slide').classList.remove('hide')

Answer 2

а если ограничить высоту и ширину слайдера и по бокам сделать градиентные div

но не прозрачным, а скрытым

.items {
  width: 600px;
  overflow: hidden;
  margin: auto;
  position: relative;
}

img {
  float: left;
}

.line {
  width: 1800px;
}

.items:after,
.items:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
}

.items:after {
  top: 0;
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.items:before {
  top: 0;
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

<div class="items">
  <div class="line">
    <img src="http://placehold.it/300x150/cca" alt="">
    <img src="http://placehold.it/300x150/ccb" alt="">
    <img src="http://placehold.it/300x150/ccd" alt="">
    <img src="http://placehold.it/300x150/add" alt="">
    <img src="http://placehold.it/300x150/aad" alt="">
    <img src="http://placehold.it/300x150/daa" alt="">
  </div>
</div>

БЛОГ НА HUSL

JS Сделать элемент прозрачным, если он вышел за пределы родительского блока

Ответы (2 шт):