Диагональный слайдер контента

#jquery #адаптивная_верстка #html #вёрстка #css

Приветствую, знатоки.

Пришла ко мне задача запилить вот такой слайдер:


На удивление, гугл ничем мне не помог, поэтому прошу помощи у вас.
Может кто встречался с аналогичной задачей или может подсказать в каком направлении
мне продолжить поиск?
    

Ответы

Ответ 1

Вот, я сделал очень хитрую конструкцию: http://jsfiddle.net/6b9gjagL/3/
HTML:

    
1st


    
2nd

...

Весь необходимый контент должен лежать в .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
Кстати, решение работает даже если трансформации не поддерживаются. Граница просто
перестанет быть наклонной.