div, чтобы перевернуть при прокрутке влево / вправо по горизонтали

Question

div, чтобы перевернуть при прокрутке влево / вправо по горизонтали

0

Я пытаюсь воспроизвести эффект, который можно увидеть на этом сайте http://www.toolofna.com/#!/work. При прокрутке влево/вправо по горизонтали, div, внутри которого есть разные изображения, переворачивается вокруг оси x, а затем опускается в исходное положение. Я знаю, что это может быть достигнуто с помощью CSS3, но я полагаю, что за этим эффектом также работает некоторый код jQuery.

Я попытался найти это в Интернете и наткнулся на происхождение webkit-transform-origin, но я думаю, что этот эффект является чем-то более сложным. Ждем решения.

Fahad Hasan 04 апр. 2014, в 15:47

Источник

2

Вот демонстрационная версия jsfiddle.net/aamir/GDdtS/6240, поэтому вместо использования: hover в css вы можете использовать события jQuery, чтобы перевернуть ее так: jsfiddle.net/aamir/GDdtS/6241 (нажмите, чтобы перевернуть)
Aamir Afridi 04 апр. 2014, в 13:16

Теги:

jquery

html

css

css3

effects

1 ответ

Ещё вопросы

Вот демонстрационная версия jsfiddle.net/aamir/GDdtS/6240, поэтому вместо использования: hover в css вы можете использовать события jQuery, чтобы перевернуть ее так: jsfiddle.net/aamir/GDdtS/6241 (нажмите, чтобы перевернуть)

Anubhav · Accepted Answer · 2014-04-04T12-45-00.000Z

Очевидно, что FIDDLE не будет учитывать начальное состояние карт (вы можете сделать это самостоятельно, если хотите), ему удалось добиться эффекта onScroll, который вы искали.

var visibleXStart = $('#wrapper').offset().left;
var visibleXEnd = $('#wrapper').offset().left + $('#wrapper').width();

$('#wrapper').scroll(function () {
    $('.card').each(function () {
        var thisCard = $(this);
        if (thisCard.offset().left < visibleXEnd - 100) thisCard.css({
            '-webkit-transform': 'rotatey(0deg)'
        });
        else thisCard.css({
            '-webkit-transform': 'rotatey(-180deg)'
        });
    });
});

Я расширил скрипку, предоставленную @aamir-afridi
Вы также можете выполнить некоторую очистку кода в соответствии с вашей веб-страницей.

Надеюсь, поможет.