Имитация смены изображений на экране TV

318

07 марта 2018, 05:57

Идея данного вопроса возникла по мотивам ответа -
"Позиционирование блока относительно фона"

Эту картинку можно использовать для ответа

В том ответе удалось поместить статичную картинку на экран TV и сделать её адаптивной.

Но хочется большей реалистичности, то есть сделать картинку живой, с анимацией смены изображений на экране TV.

Вопрос, как сделать это.

Понятно, что нужно, подложить под экран TV слайдер с картинками. И маской или clipPath вырезать область подобную экрану TV. Перепробовал несколько вариантов решения с масками, но ни один не сработал.

Допустимо применение любой техники для реализации анимации и адаптивности приложения: svg, css, javascript или все техники вместе.

Решение должно быть адаптивно и работать во всех современных браузерах, кроме IE, так как он не дружит с анимацией по определению.

Это учебный вопрос-пример, но он дополнительно имеет и практическое применение. Допускается любое количество ответов, все будут отмечены.

Answer 1

Могу предложить эффект испорченного телевизора с "нарушенной" строчной и кадровой синхронизацией. В старых версиях эксплорера изображение даже слегка синусоидально изгибалось влево-вправо.

for(i = 0; i < 60; i++){ 
	var a = Math.floor(Math.random() * 10); 
	var kadr = new Image(); 
	kadr.src = (a == 0 ? "http://opan1.16mb.com/1/img/sboy.jpg" : "http://opan1.16mb.com/1/img/diktor.jpg"); 
	kadr.style.width = "89px"; 
	kadr.style.height = "67px"; 
	tv.appendChild(kadr); 
}

<img src="http://opan1.16mb.com/1/img/telek.jpg"> 
<marquee id=tv scrollamount="143" scrolldelay="45" direction="up" width="90" height="67" style="FILTER: wave(add=10,phase=1,freq=2,strength=3);position:absolute;left:45px;top:44px"> 
</marquee>

А если хотите нормальное движущееся изображение, лучше наверно наложить на картинку видео без панели с кнопками, или с панелью, но на задний план фоновой картинки, сделав экран на ней прозрачным.

Answer 2

Вариант с видео

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
img{ 
  max-width:100%; 
} 
.room{ 
  position:relative; 
} 
.room__bg{ 
  display:block; 
  width:100%; 
  height:auto; 
} 
.room__tv{ 
  position:absolute; 
  top:21.7%; 
  left:30.15%; 
  width:19.3%; 
  height:20.2%; 
  object-fit:cover; 
  object-position:center; 
}

<div class="room"> 
  <img src="//i.stack.imgur.com/JkEWk.jpg" class="room__bg" alt="" /> 
  <video class="room__tv" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay></video> 
</div>

Answer 3

Вариант на SVG с использованием <animate attributeName="opacity"/>

* { 
  margin: 0; 
  padding: 0; 
} 
 
.slide { 
  opacity: 0; 
  transition: 0.3s all; 
}

<svg viewBox="0 0 1776 943"> 
  <image xlink:href="http://i.stack.imgur.com/JkEWk.jpg" width="100%" height="100%"/> 
  <image class="slide" xlink:href="http://v-georgia.com/wp-content/uploads/2016/02/IMAG2635.jpg" x="485" y="209" width="25%" height="20%"> 
    <animate id="for" attributeName="opacity" begin="first.end" from="1" to="0" dur="3s" fill="freeze"/> 
  </image> 
  <image class="slide" xlink:href="http://i.telegraph.co.uk/multimedia/archive/01816/nice-negresco_1816701b.jpg" x="485" y="209" width="25%" height="20%"> 
    <animate id="first" attributeName="opacity" begin="second.end" from="1" to="0" dur="3s" fill="default"/> 
  </image> 
  <image class="slide" xlink:href="http://www.tokkoro.com/picsup/420256-new-york-wallpaper-full-hd.jpg" x="485" y="209" width="25%" height="20%"> 
    <animate id="second" attributeName="opacity" begin="third.end" from="1" to="0" dur="3s" fill="default"/> 
  </image> 
  <image class="slide" xlink:href="https://forbes.kz/img/articles/99661f12e332c908c2a3a754d3f4942b-big.jpg" x="485" y="209" width="25%" height="20%"> 
    <animate id="third" attributeName="opacity" begin="fourth.end" from="1" to="0" dur="3s" fill="default"/> 
  </image> 
  <image class="slide" xlink:href="http://fanoboi.com/city/10/city-by-the-sea-wallpaper-1366x768.jpg" x="485" y="209" width="25%" height="20%"> 
    <animate id="fourth" attributeName="opacity" begin="0s;for.end" from="1" to="0" dur="3s" fill="default"/> 
  </image> 
</svg>

Answer 4

Еще вариант, просто работа с opacity, можно конечно плавности добавить, но вроде телевизоры плавно не переключаются)))

let show = document.querySelectorAll('.show'); 
var count = 0; 
(function() { 
  setInterval(function() { 
    if (count >= show.length) { 
      count = 0; 
    } 
    [...document.querySelectorAll('.show')].forEach(s => { 
      s.style.opacity = '0'; 
    }) 
    document.querySelectorAll('.show')[count++].style.opacity = '1'; 
  }, 3111); 
})();

*, 
* ::after, 
*::before { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.ns { 
  touch-callout: none; 
  -webkit-touch-callout: none; 
  -ms-user-select: none; 
  -moz-user-select: none; 
  -webkit-user-select: none; 
  user-select: none; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #272727; 
  color: white; 
} 
 
#wrapper { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  border-top: 1px solid transparent; 
} 
 
.show { 
  opacity: 0; 
  transition: opacity .1s; 
}

<div id="wrapper"> 
  <div class="bg-cover"> 
    <div class="element"> 
      <svg viewBox="0 0 1776 943"> 
  <image xlink:href="http://i.stack.imgur.com/JkEWk.jpg" width="100%" height="100%" /> 
  <image style="opacity: 1"  class="show" xlink:href=" https://i.stack.imgur.com/keh4g.jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  <image  class="show" xlink:href="http://www.zastavki.com/pictures/originals/2015/_A_small_castle_on_the_cliff_above_the_sea__Crimea_099190_.jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  <image  class="show" xlink:href="https://s1.1zoom.ru/big3/753/371608-svetik.jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  <image  class="show" xlink:href="https://storge.pic2.me/c/1360x800/454/5848714f87bf5.jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  <image  class="show" xlink:href="http://st.gdefon.com/wallpapers_original/s/237948_leto_-derevya_-zelen_-solnce_-nebo_-les_2560x1600_(www.GdeFon.ru).jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  </svg> 
    </div> 
  </div> 
</div>

Второй вариант с изменением значения атрибута 'xlink:href

var pic = [ 
  'http://www.zastavki.com/pictures/originals/2015/_A_small_castle_on_the_cliff_above_the_sea__Crimea_099190_.jpg', 
  'https://s1.1zoom.ru/big3/753/371608-svetik.jpg', 
  'https://storge.pic2.me/c/1360x800/454/5848714f87bf5.jpg', 
  'http://st.gdefon.com/wallpapers_original/s/237948_leto_-derevya_-zelen_-solnce_-nebo_-les_2560x1600_(www.GdeFon.ru).jpg' 
]; 
 
 
 
let show = document.getElementById('show'); 
var count = 0; 
setInterval(function() { 
  let showAttr = show.getAttribute('xlink:href'); 
  if (count == pic.length) { 
    count = 1; 
  } 
  show.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', pic[count]); 
 
  count++; 
}, 3111);

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #272727; 
} 
 
#wrapper { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  border-top: 1px solid transparent; 
}

<div id="wrapper"> 
  <div class="bg-cover"> 
    <div class="element"> 
      <svg viewBox="0 0 1776 943"> 
  <image xlink:href="http://i.stack.imgur.com/JkEWk.jpg" width="100%" height="100%" /> 
  <image  id="show" xlink:href=" https://i.stack.imgur.com/keh4g.jpg" x="537" y="212" width="19.1%" height="19.1%" /> 
  
  </svg> 
    </div> 
  </div> 
</div>