Слайдер изображений с глючным эффектом переходов на CSS3 и HTML5 Canvas
Очень необычный слайдер изображений с эффектом глючно-желейного перехода
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
.dom-gl { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .slider { position: relative; padding: 0 22.5vw; display: flex; align-items: center; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: -webkit-grab; cursor: grab; z-index: 2; } .slider__inner { display: flex; position: relative; } .slide { overflow: hidden; } .slide:first-child { position: relative; } .slide:not(:first-child) { position: absolute; top: 0; height: 100%; } .slide__inner { position: relative; overflow: hidden; width: 55vw; padding-top: 56.5%; } .slide img { display: none; /* height: 100%; width: 140%; position: absolute; top: 0; left: -20%; object-fit: cover; will-change: transform; */ } .titles { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; z-index: 3; } .titles__list { position: absolute; top: 0; left: 0; } .titles__title { display: flex; align-items: center; justify-content: center; font-size: 6vw; font-weight: bold; letter-spacing: -0.1vw; color: #fff; } .titles__title--proxy { visibility: hidden; } .progress { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.25rem; overflow: hidden; pointer-events: none; } .progress__line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background-color: #fff; } .progress__line:nth-child(2) { transform-origin: right; } |
2#: Следующий код вставьте между тегами <body> и </body>:
|
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 49 50 51 52 53 |
<div class="slider | js-drag-area"> <div class="slider__inner | js-slider"> <div class="slide | js-slide"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 120%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 240%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 360%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 480%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 600%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 720%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> <div class="slide | js-slide" style="left: 840%;"> <div class="slide__inner | js-slide__inner"> <img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false"> </div> </div> </div> </div> <div class="progress"> <div class="progress__line | js-progress-line"></div> <div class="progress__line | js-progress-line-2"></div> </div> <script src="/js/gsap-latest-beta.min.js"></script> <script src="/js/three.min.js"></script> <script type="text/javascript" src="/js/initslide.js"></script> |
Осталось лишь залить три JS файла из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
