Ранее уже были похожие слайдеры:
Этот вариант не требует никаких библиотек и умещается в несколько строчек
Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="banner-wrapper" id="banner-wrapper"> <div class="banner"> <div class="banner-content"> <img src="car-1.jpg"> </div> </div> <div class="banner dev"> <div class="banner-content"> <img src="car-2.jpg"> </div> </div> </div> |
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 |
.banner-wrapper { position: relative; overflow: hidden; height: 500px; margin: 20px 0; } .banner { position: absolute; overflow: hidden; } .banner.dev { transform: skew(-30deg); margin-left: -200px; width: calc(50% + 200px); transition: all 300ms ease-out; } .banner.dev .banner-content { transform: skew(30deg); margin-left: 200px; } .banner .banner-content { height: 500px; } .banner .banner-content img { max-width: none; } |
JS:
|
1 2 3 4 5 6 7 8 9 |
document.addEventListener('DOMContentLoaded', function(){ let banner = document.getElementById('banner-wrapper'); let devLayer = banner.querySelector('.dev'); let delta = 0; banner.addEventListener('mousemove', function(e){ delta = ((e.pageX - banner.getBoundingClientRect().left) - banner.offsetWidth / 2) * 0.5; devLayer.style.width = (e.pageX - banner.getBoundingClientRect().left) + 200 + delta + 'px'; }); }) |
За основу взят код, найденный на codepen.io у пользователя Brett McCaffray
Автор фотографий LeeRosario
Добавить комментарий: