5

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

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

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

5
  • попросите дизов отрисовать вам SVG маску одного слайда, и делайте ей background-image
    – ferrari
    15 авг 2014 в 11:32
  • 2
    @fenris, если хотите, то я [могу показать "полупример"][1]. Все расчеты в нём сделаны вручную и приблизительно. Организовать это можно и в виде плагина, ничего особо сложного там нет, а особенно, если все изображения будут одного размера. [1]:jsfiddle.net/Deonis/3bwbo0ab
    – Deonis
    15 авг 2014 в 14:20
  • @Deonis, спасибо большое, но видимо я не правильно описал что мне нужно. смена слайдов должна происходить как [здесь][1] [1]: pavelvolya.com 16 авг 2014 в 0:50
  • 2
    @fenris, плагин такой, вы вряд ли найдёте. Поэтому есть несколько путей решений: 1. Пишите сами с нуля, если хватает знаний. 2. Нанимаете профессионала. 3. Берёте за основу какой-нибудь похожий плагин с параллакс эффектом и допиливаете до нужной кондиции. 4. Самый простой, но не кошерный вариант - скомуниздить скрипты с того сайта.
    – Deonis
    16 авг 2014 в 1:50
  • 2
    Ну и, стандартно: @fenris, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – Zelta
    17 авг 2014 в 13:16

1 ответ 1

9

Вот, я сделал очень хитрую конструкцию: 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

Кстати, решение работает даже если трансформации не поддерживаются. Граница просто перестанет быть наклонной.

1
  • Возможно ли сделать слайдер с одним диагональным углом? Чтобы слева был меняющийся слайдер, а справа статичная картинка? Вот на этом сайте: koleso.96.lt Уже не знаю как это реализовать, помогите пожалуйста!
    – user23443
    24 сен 2014 в 0:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.