There is a slider. Slides with transparency call in the monitor. Is it possible to make an effect so that when a slide gets into the monitor it loses transparency? Not after getting into the monitor, but so that the part that is in the monitor is not transparent, but the part of the slide that has not yet managed to enter the monitor, keep transparency? enter image description here

  • The easiest option is to make the slides non-transparent and tell everyone that the part that has not yet managed to enter the monitor is transparent. anyway, no one will ever know - Darth
  • Speech about the monitor-picture. For some reason, the picture from the question disappeared. - Frontender
  • one
    then put it on top with a semitransparent background (don't make a big difference imkho, make a transparent slide over an opaque background or vice versa. And where the monitor make a completely transparent hole - Darth

2 answers 2

Here is a brief idea of ​​how to do it:

$(document).ready(function(){ setInterval(function(){ var offset = $('#photo').offset().left; offset += 5; $('#photo').offset({left: offset}); }, 100); }); 
 #wrapper { border: 1px solid blue; position: relative; width: 600px; height: 200px; overflow: hidden; } #left, #right { width: 200px; height: 200px; border: 1px solid red; opacity: 0.5; background-color: #fff; display: inline-block; } #left { position: absolute; left: 0; } #right { position: absolute; right: 0; } #photo { display: inline-block; position: absolute; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div id="photo"><img src="http://www.cruzo.net/user/images/k/d760fbd8f50d9b92dc054ee8390df166_617.jpg" alt="" height="150px" id="img"></div> <div id="left"></div> <div id="right"></div> </div>

https://jsfiddle.net/vpja5wkr/

Animation on javascript there just to show what works))

    I would do this:

     <div class="slide"> <!--Здесь бэкграундом делаете эффект полупрозрачности(накладываете картинку прозрачную 1 на 1 пиксел и повторение.+z index:2--> <div class="monitor"> <!--Здесь картинка самого монитора.Внутри он должен быть с отверстием равным размеру изображения и ему в стилях создаете позицию абсолют+z-index:3--> </div> <img src="сам слайд"/><!--Здесь позиция абсолют и z-index:1--> </div>

    On js we move img smoothly by changing their left or right position + in the div with the monitor class already doing a slide on js. It turns out that the "transparent picture" will pass under the monitor, and not transparent inside the monitor will overlap them. The main animation is easier to choose and the speed to pick up

    • Something I have suspicions that nothing will come of it. It would be better if you also put a demo to show what works - Alexey Shimansky