Полноэкранное слайдшоу с интересным эффектом на Javascript и CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
#slideshow { position: relative; height: 100vh; overflow: hidden; background: #000; } #slideshow img { position: absolute; min-width: 100%; min-height: 100%; height: auto; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: transform,opacity; transition-property: transform,opacity,-webkit-transform; -webkit-transition-duration: 9s,4s; transition-duration: 9s,4s; -webkit-transform-origin: bottom left; transform-origin: bottom left; opacity: 0; } #slideshow img:nth-child(2n+1) { -webkit-transform-origin: top right; transform-origin: top right; } #slideshow img:nth-child(3n+1) { -webkit-transform-origin: top left; transform-origin: top left; } #slideshow img:nth-child(4n+1) { -webkit-transform-origin: bottom right; transform-origin: bottom right; } #slideshow img:firsh-child { opacity: 1; z-index: -1; } #slideshow .fx { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div id="slideshow"> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> <img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" /> </div> <script> (function() { var images = document.querySelectorAll('#slideshow img'), imgLength = images.length, i = 1; function setFirst() { images[0].className = "fx"; } window.setTimeout(setFirst, 1000); window.setInterval(kenBurns, 6200); function kenBurns() { images[i].className = "fx"; i++; if (i === imgLength) { i = 0; images[imgLength - 2].className = ""; } if (i === 1) { images[imgLength - 1].className = ""; } if (i > 1) { images[i - 2].className = ""; } } })(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
