How can i implement smooth scrolling.

[Randore]

Hi, how can we implement something like this (smooth scroll on arrow hover <-- --> )
http://www.clholloway.co.za/

I tried to use that plugin but jInver uses fixed slides may be that is the reason i am not able to fix it, any help would be greatly appreciated.

[pixxelfactory]

Hi, you could do something like this:
1.) Create a new dom-element for implementing scrolling, ex.:

Scroll on me

2.) Then tell this element to scroll when the user hovers it:
var timer = false;

$('.fix').on('mouseenter', function(e) {
    timer = window.setInterval(function() {
    var scrollTop = $('html, body').scrollTop() + 20;
    console.log(scrollTop);
    $('html, body').animate({'scrollTop': scrollTop}, 0);
    }, 30);
}).on('mouseleave', function(e) {
    window.clearInterval(timer);
});

You can extend this example by implementing check if the user reached the end of the page, or, if you want two arrows, one for up and one for down, add a direction flag variable.

Let me know if this did it or you need more help!
Best regards

[Randore]

Hey thank you, I'll check the code.

However I would like to make a few notes on features request.

1. Let users to create scenes wrapped inside stage Div.
2. In each scene, we can animate parallax elements with background images.
3. Users can use background parallax as you showed in the example files, unless there are no elements in a scene to be animated.
4. animations frame works like Animo.js or http://ricostacruz.com/jquery.transit/ to build custom animations.

Onscroll if the object is in view-port addClass animate to animate particular element. (user can write their own csss animations).

<div class="fly-left">this is user defined element </div>

When it's in view-port add class to animate it.

<div class="animate fly-left">object animated </div>

example:

<div id="stage">
<div class="scene0">
<div class="bg-scene1>
<img src="example1.jpg" data-speed="1000" data-name="scroll">
<img src="example2.jpg" data-speed="1000" data-name="scroll">
</div>
<div class="contents">
<h2>Some text contents to scroll over bg-scene1 parallax</h2>
</div>
</div>

<div class="scene1">
<div class="bg-scene1>
<mg src="example1.jpg" data-speed="1000" data-name="scroll">
<img src="example2.jpg" data-speed="1000" data-name="scroll">
</div>
<div class="contents">
<h2>Some text contents to scroll over bg-scene1 parallax</h2>
</div>
</div>

I hope these options will be useful and make jInvert a complete framework for HoriztParallax.

[Randore]

we should have function like onScroll scene-complete(), onSceneLoad(), onSceneCompletion() so on

[pixxelfactory]

Hi, thanks for your opinion and suggestions,
the first thing however will be to implement the dynamic menu (to let users jump automatically to a certain slide without having to set the waypoints manually) =)
Regards

[nag-uf]

How to enable smooth scroll across all the browsers? The script has little lag while scrolling the page using mouse and the page doesn't look like smooth scroll enabled.

[pixxelfactory]

I've seen smooth scrolling in other scripts done with css3 + js-delay, so that you scroll down with the mouse and afterwards it starts scrolling via css-transitions, but it is quite laggy, obviously also smoother.
In wich browser on wich Os have you seen noticable lags?

[nag-uf]

I observed it on Windows7 OS, google chrome browser. I will check it with css3 + js-delay. Thanks