creating plugins

Though I do not want to reinvent the wheel, it piques my interest to improve known mechanics. Just take a look - feedback welcome ;)

running around

Everyday life: Coffee, forms, microsites, daffy functions. To realize my own ideas I started to create this page. I hope you enjoy it.

solving problems

Doesn't it excite us to solve unusual problems? Beside daily grind's drabness it's the perfect diversion. So allow full bent!



Enhance your website by fancy effects based on the user's scroll index. Pop-in, pop-out, sliding, sticky notes and much more. The plugin supports mobile devices and eldered browsers. It was built using the jQuery library. Licensed under MIT and GPL licenses.



  • Eased animations for incremental mouse scroll-wheels
  • Adds fancy effects to your homepage
  • Customizable trough settings and CSS
  • Highly compatible
  • Highly customizable
  • Uses CSS3 transitions by default

How to useget it up and running



Make sure you are using valid DOCTYPE. This is required for ScrollFlow to look and function correctly.

<!DOCTYPE html>

include files

Loading jQuery from CDN (Content Delivery Network) is recommended. Include all ScrollFlow JavaScript files in addition.

<script src="//"></script>
<script src="js/eskju.jquery.scrollflow.js"></script>

html markup

Add "scrollflow" and at least one of the following CSS classes to the desired object(s): slide-top, slide-left, slide-right, slide-bottom, -pop, -opacity

<h1 class="scrollflow -slide-top -opacity">Slide-Top with opacity fading</h1>
<p class="scrollflow -pop -opacity">Pop-Effect</p>

fire plugin

If you are not familiar with jQuery, please, read this tutorial for beginners.

$( document ).ready( function( )
	new ScrollFlow(); 
} );


Easy plugin, easy life. Configure things just to taste :)

$( document ).ready( function( )
	$( "body" ).ScrollFlow();
} );
1.0durationOnLoadint Easing duration onLoad (important for page refresh)
1.0durationOnResizeint Easing duration on window resize
1.0durationOnScrollint Easing duration on scroll

HTML AttributesEven more customization?

Customize single HTML objects

<h2 id="myObject" data-myattribute="myvalue">MyText</h2>
1.0data-scrollflow-startint25Define the scroll amount (in % of screen height) once the object is visible to start the animation
1.0data-scrollflow-distanceint50Define the scroll amount (in % of screen height) once the object is visible to end the animation

Comments & Feedback



+ custom effect duration per HTML object
+ more effects
+ custom effects
+ sticky elements
+ continous mobile scrolling

Amin Benali

Great work! I'am going to use this on my new website, only a little sticky when your mouse is at the content and then scrolling. But keep going!


@AminBenali: Thank you! :)
Could you tell me your setup? (Browser, OS)

Anna Kozhuharova No Homepage

Hi, it`s such a nice plugin! Thank you, it work great! But I wanna ask you something, becouse I am not very good with javascript... How can I remove the effect for mobile devices? I mean I applied the plugin on my website, but I want the plugin will not be active for mobile devices.
Thanks in advance
Best regards,


Hey Anna,

the simpliest way might be to initialize the plugin based on the screen width:

Replace: new ScrollFlow();
With: if( $( window).width >= 1024 ) ) new ScrollFlow();

Of course you could replace 1024 with your desired breakpoint. Nevertheless you're right.. an option "desktopOnly" is a good idea and I will implement it within the next days :)

Anna Kozhuharova No Homepage

Hi, thank you for support! I will try it.

Andrey No Homepage

Hi. Great work, but i can't configure your plugin for the wordpress theme. I'm using standard jquery from Wordpress (version 1.11.2).
ReferenceError: ScrollFlow is not defined

new ScrollFlow();

Note. In html with jquery 1.10.1 all works fine!


Hi Christian,

allerbesten Dank für das supercoole Plugin. Ich habe es gerade erst in Deinem Beitrag im jQuery Forum in XING entdeckt.
Du hast Recht, im Bereich Parallax gibt es tatsächlich nicht viel brauchbares.
Dein Plugin werde ich ziemlich sicher an passenden Stellen einsetzen und es ebenso sicher in meinen Seminaren promoten :-)

Viele Grüße


Nicholas Inclan

Is there an option for fading out? I found how to fade an element in, but I was looking to fade an element out when the user scrolled past that element..

Thanks for the plugin, lightweight and seems to work out of the box.

I would recommend some more documentation, I like docs.

Jason Gagnon No Homepage

Hi, the opacity portion of this plugin does not function in ie11. I tried changing the code myself, but I don't see opacity showing up at all when inspecting the object in IE11. I see the opacity changing in other browsers. Otherwise thanks and the plugin is great, but I won't personally be able to use it unless the opacity is fixed. No need for a fiddle or a demo, just look at this page in ie11.

Ц No Homepage


Alexander No Homepage

add "opacity' property to script

Hamid No Homepage

Hi, Great Project, so i'm need to slide object only one time and prevent repeat effect after that, but not find any option!!!


I'm used of this code in update method:

if( $( obj ).hasClass( "-ontime" ) && factor >= 1)


F*#@k, for me not work in my site...i follow the usage, installation, and options,but not work.
Sorry, i,m newbie in jquery, and i don,t know if i must write explicit --new ScrollFlow()-- or its just an example.
The plugin looks great,light, and easy.
Can you guys help me, showing me a real code for only one or two elements?, i add jquery library,of course,but no from cdn, and the script.min in my project, also add the scrollflow class to an element, but i think my fail its in the script to " fire " the plugin. Thanks in advance and sorry my english. Cheers from Spain !!!

Jan No Homepage

Hello to all of you!

I finally made it work. Instead of using class="scrollflow -pop -opacity" (or other attribute), I've had to use class="parallax -pop -opacity" - Works like a charm!

Does anybody find any solution how to make the elements freeze after scrolling/animating so they won't go back after scrolling back to top? Thanks in advance!

Victor No Homepage

How to make it only perform the effect 1 time?

maxim No Homepage

very slow page speed after more effects added! How i can Increase speed?


A good plugin. But, unfortunately, it did not work on the Wordpress with connected jQuery versions 1.12
We managed to solve the problem by replacing all occurrences of "$" with "jQuery" in the file eskju.jquery.scrollflow.min.js

Erick Hernandez

Hi, I've a little problem. I'm using this tool with Bootstrap (this is pretty useful, thank u so much) and when I'm in a smartphone or tablet the scroll (horizontal scroll) has a kind of margin only when I use "-left" or "-right" classes. I've tried to apply css: overflow-x: hidden, but it doesn't work.

Add a comment