Note: I made this plugin just for fun, and to learn how to make a jquery plugin. So, it's not perfect (and my english either).
- Download Jquery.
- Download Jquery.boxLoader.
After you downloaded the files, put the scripts before the </body>
tag:
<script src="jquery.js"></script>
<script src="jquery.boxloader.min.js"></script>
If you don't put the scripts before the </body>
, it might doesn't work correctly.
Example:
$('.myDiv').boxLoader({
direction:"x",
position: "100%",
effect: "fadeIn",
duration: "1s",
windowarea: "50%"
});
direction
The direction you want move the element.
X (Default).
Y.
None.
position
The value you want to move the element.
Example:
If you want the element appear from the Left but with a little movement to the original position, you might try to set: direction:"x"
and position:"-10%"
.
Values: -100% to 100%. 50% by default.
effect
Values:
FadeIn (Default).
None.
duration
Duration fo the animation. Values: Any you want. 1s by default.
windowarea
The window area where the element will appear when you are scrolling.
Example:
If you set windowarea:100%
the element will appear at the bottom of the window.
Values: 0% to 100%. 50% default.
container
If you want to use it when you scroll inside of other container, you need to add:
$('.myDiv').boxLoader({
direction:"x",
position: "100%",
effect: "fadeIn",
duration: "1s",
windowarea: "50%",
container: '#your_container_scrollable'.
});
Depending of your css, the plugin could present some issues:
1.Some elements produce overflow of the parent element.
You need to set overflow-x:hidden
to the parent element in your css.
Example:
.container {
overflow-x:hidden;
}