Witam, aktualnie znajduję się w stanie przedśmiertnym spowodowanym 4 godzinnym walczeniem z tą wtyczką: https://github.com/peachananr/onepage-scroll
Próbowałem 1000 wersji kodu, więc podam pierwsza wersję którą zrobiłem:
1. Podłączam plik .js i .css
2. W head umieszczam:
<script>
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section",
responsiveFallback: 600,
loop: true
});
});
</script>
oraz:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
3. W body umieszczam:
<div class="main">
<section>
Strona 1
</section>
<section>
Strona 2
</section>
<section>
Strona 3
</section>
<section>
Strona 4
</section>
</div>
To wszystko oczywiscie nie ma prawa działać ale jest to zrobione zgodnie z ich "poradami". Proszę o pomoc.
