Приветствую, знатоки.
Пришла ко мне задача запилить вот такой слайдер:
На удивление, гугл ничем мне не помог, поэтому прошу помощи у вас. Может кто встречался с аналогичной задачей или может подсказать в каком направлении мне продолжить поиск?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПриветствую, знатоки.
Пришла ко мне задача запилить вот такой слайдер:
На удивление, гугл ничем мне не помог, поэтому прошу помощи у вас. Может кто встречался с аналогичной задачей или может подсказать в каком направлении мне продолжить поиск?
Вот, я сделал очень хитрую конструкцию: http://jsfiddle.net/6b9gjagL/3/
HTML:
<div class='skew'>
<div style="background: url(http://placekitten.com/400/600);" class='bg'>1st</div>
</div>
<div class='skew'>
<div style="background: url(http://placekitten.com/401/600);" class='bg'>2nd</div>
</div>
...
Весь необходимый контент должен лежать в .bg как обычно.
CSS:
.skew {
height: 400px;
width: 400px;
overflow: hidden;
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
border-bottom: 5px solid white;
}
.bg {
height: 500px;
width: 400px;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
padding-top: 35px;
}
.skew наклонен на -10 градусов. А внутри него находится .bg, наклоненный на 10. Так .bg оказывается не наклонен, зато белая граница — наклонена. Чтобы избежать белых полей .bg больше .skew.
JS:
$(document).on('ready scroll', function (e) {
$('.bg').each(function (num) {
$(this).css('margin-top', (-(num * 405) + $(window).scrollTop()) + 'px');
});
});
Все просто: мы поднимаем все .bg так, чтобы их начала были на уровне верха страницы. Если высота окна будет больше высоты .bg, получится белое пятно, так что высоты элементов тоже стоит контролировать из JS. Обратите внимание на -(num * 405). Если .skew будут разного размера, нужно просуммировать высоту всего,что находится до текущего .bg
Кстати, решение работает даже если трансформации не поддерживаются. Граница просто перестанет быть наклонной.