Использование Skrollr.js для достижения горизонтального эффекта

Я надеюсь создать веб-сайт с горизонтальной прокруткой, судя по моим исследованиям, Skrollr.js кажется хорошим инструментом, однако я столкнулся с некоторыми проблемами. Я создаю несколько сцен, содержащихся в div 2048x768 с размером окна 1024x768, и я также читал, что Skrollr использует вертикальную прокрутку для создания иллюзии горизонтальной прокрутки. Итак, я выложил свой html следующим образом:

page content (1024x3072)

-- slides container (1024x3072)

--- slides (1024x768)
----first horizontal content (2048x768) ----second horizontal content (1024x768)

Я анимирую контейнер слайдов с помощью свойства преобразования по горизонтальной оси, например:

<div id="slides"
data-0="transform: translate (-0px,0)"
data-1024="transform: translate (-1024px, 0)"
data-2048="transform: translate (-2048px,0)"
data-3072="transform: translate (-3072px, 0)" >

Но абсолютно ничего не происходит. Я следовал правильной логике здесь? Я адаптировал его из этого руководства: https://ihatetomatoes.net/create-scrolling-slideshow-using-skrollr/ Можно ли добиться того, что мне нужно, с помощью Skrollr или лучше попробовать другой плагин? Я думаю попробовать jInvertScroll.js, но мне кажется, что Skrollr имеет гораздо лучшую функциональность.


javascript html jquery css skrollr
person user3392336    schedule 20.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я сделал это на JSfiddle, надеюсь, это поможет

    <div class = "slide1 s" data-0="left:0px;" data-1000="left:-500px"></div>

<div class = "slide2 s" data-0="left:500px;"data-1000="left:0px"data-2000="left:-500px"></div>

<div class = "slide3 s" data-0="left:1000px;"data-1000="left:500px"data-2000="left:0px"></div>



    .s{
    position:fixed;
    width:500px;
    height:500px;
}
.slide1{
    background:#f1f1f1;
}
.slide2{
    background:#e1e1e1;
}
.slide3{
    background:#262626;
}
person ZetCoby    schedule 12.02.2015