Discussion on SParallax


SilviuMarinescu supports this item


14 comments found.

good stuff…no brainer :). Good luck with your sales!

Hello. Is there some documentation included about how to create a something like in your demo and integrate it to some cms for example: WP)?


The demo is included in the download, so you can just copy paste / start from there, about CMS: the plugin is just a js file, so you should be able to integrate it with WP with ease.

hello. Is possible to set, when someone start to scroll to next image, and stop scrolling.. that will be content automatically completed to next image?

So, from what i understand you want to make it so that a user never gets stuck (stays/stops) in the middle of an image(scene) if that is the case, yea shore u can: should be something like this:

var CheckTime = 100;
var TimeMargin = 1000;
var TransitionTime = 200;
var TimePpassed = 0;

$(window).scroll(function () {

$(document).ready(function () {
        if(TimePpassed > TimeMargin)
            $.SParallax.ScrollTo($.SParallax.GetCurrentPoint(), TransitionTime);
    }, CheckTime);

just run the code above and feel free to ajust CheckTime, TimeMargin, TransitionTime to your own liking.

If you can not get it to work or have further questions or i did not understand what you wanted, feel free to contact me.

Thank You.

very great script , whish you lots of sales ! :)

Thank you, i can only hope :) ,also if you need any help using it do not hesitate to ask.

First of all i had to make the code reverse to call images so that it work fine. Transitions.push(new $.SParallax.Transition("left", 0, 50, "%", $MainImage4, 6, 7)); Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage5, 6, 7)); Transitions.push(new $.SParallax.Transition("left", 0, 50, "%", $MainImage3, 4, 5)); Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage4, 4, 5)); Transitions.push(new $.SParallax.Transition("left", 0, 50, "%", $MainImage2, 2, 3)); Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage3, 2, 3)); Transitions.push(new $.SParallax.Transition("left", 0, 50, "%", $MainImage1, 0, 1)); Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage2, 0, 1));

I tried this code so it runs in one side only but after the 2nd image it jumps back.I want a smooth scroll for the back image also. any solutions for this issue?

also…. i think your code is a bit off… think what you want is more along these lines:

Transitions.push(new $.SParallax.Transition("left", 0, 100, "%", $MainImage4, 3, 5));
    Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage5, 3, 4));

    Transitions.push(new $.SParallax.Transition("left", 0, 100, "%", $MainImage3, 2, 4));
    Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage4, 2, 3));

    Transitions.push(new $.SParallax.Transition("left", 0, 100, "%", $MainImage2, 1, 3));
    Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage3, 1, 2));

    Transitions.push(new $.SParallax.Transition("left", 0, 100, "%", $MainImage1, 0, 2));
    Transitions.push(new $.SParallax.Transition("left", -100, 0, "%", $MainImage2, 0, 1));

Made an example for you:

Pls tell me if this solves your problems.


Thanks buddy for the help. The code runs perfectly. thanks for the help.

No problem ! Btw, would really appreciate a review/rating. Tnx.


great piece of work. One question, will you assist me with implementation and create at least your production complex example into wordpress if i buy this? Not expecting a ful working plugin of course, just to keep it running.


Sorry, i wish i could, but i have no experience using wordpress.

I love the idea and simplicity of this; however, I’m having some issues because only half of my site is parallax. Towards the footer, we have a few DIVs which are not Parallax. Because of how this code handles setting the “height” of the “screen” (as you refer it to), it’s causing the body to grow by about 1000px of blank white space.

Is there a way to set the height of the screen, instead of it defaulting to the height of the body or viewport?

Nevermind found the fix. I found the area where it multiplies the window.height and took it out. Going to see if I can modify it to set a specific height instead. :) Great code.


The height of the body is = ViewportHeight * nrOfScreens. The nrOfScreens = the max point of your Transitions.

if you take out:
$("body").height($win.height() * nrOfScreens);

You might have trouble with window resizing.

I suggest simply adding a fake transition for the extra space you need:

Transitions.push(new $.SParallax.Transition("margin-top", 0, 0, "px", $RandomElement, 0, 20));

This will make your body = 20 screens.

Or if the second half of your website has a static height you might consider adding that height to the body: EX:
$("body").height(($win.height() * nrOfScreens) + $("WebsiteSecondHalf").height());

Btw, i would really appreciate it if you would review Sparallax.

Tnx for purchasing, if you need any help do not hesitate to ask.

how to fix the h1 on the middle of screen for on moment?

//start at 150% top (will be hidden from bottom) Transitions.push(new $.SParallax.Transition('top', 150, 50, '%', $desc1, 2, 2.8)); // in the middle, stay at 50% top Transitions.push(new $.SParallax.Transition('top', 50, 50, '%', $desc1, 2.8, 3.2)); //then goes to -40% top (hidden from top) Transitions.push(new $.SParallax.Transition('top', 50, -40, '%', $desc1, 3.2, 4));

i have no idea how to do it

it kinda overrides

sorry for the delayed response, i do not understand the problem… can you explain in more detail pls, tnx

can you transition opacity?

sort of….

you could add load of TransitionEvents for each… 0.1 0,2 etc…

it should still be smooth…
var startScreen = 2
for(var i=0; i<=10; i++)
TransitionEvents.push(new $.SParallax.TransitionEvent(function () {
        $bouble.css({"opacity": ((i/10) + 0.1)});

    }, function () {
        $bouble.css({"opacity": (i/10)});
    }, (i/10) + startScreen ));

Bud , check msg box please.

sorry, i’v been away for a while, back now

Hello, Does SParallax supports control of “easing” the elements movements?

sorry, no, it dose not

How do you install this into Wordpress?

Greate work buddy. love it.. how to add MainImage6, MainImage7, MainImage8 if i want?

Many thanks


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey