In front-end development and design, we are most concerned with the user experience. Now we often see some websites use floating birds as elements to fly back and forth, it is often the first thing you feel is that it is implemented in flash. If you do not have a high level, you will not be able to do this, is there a good way to implement it? Today I will share with you how the more fashionable floating elements are implemented,Click the balloon and he will jump. Click the snail bait. He won't let you move. Haha,
Someone asked me how the loading progress of my website was achieved. I shared it and read it.ArticleShare 5 practical JavaScript dynamic update icon plug-ins
Further reading
Parallax scrolling tutorial implemented by jquery (large background Effect of parallax)
Jquery parallax recommendation: nikebetterworld parallax smooth scrolling Effect
This is a jquery plug-in that can make any HTML object displayed on your web page "floating ".It helps create simple floating animations and make your website live to use these small "floating" objects.
~ Let's talk nonsense. Let's first look at the demo ,(Firefox and Google browser are the best)Our old rules:If you like the source code, please leave your email address and opinion,
Demo
Set several floating objects on the webpage,
Working Principle
Jqfloat. js uses the jquery. animate () method to infinitely loop the animation processing objects to different locations, so it causes the objects to appear on web pages and float.It uses the jquery. Data () method to store and track the attributes and States of each object.
Jqfloat. jsRun on all browsers: IE6 and, Firefox and WebKit browsers.
Usage
1. Reference The jquery file in the header,
<SCRIPT src = "jquery. Min. js"> </SCRIPT> <SCRIPT src = "jqfloat. js"> </SCRIPT>
2. Call the jqfloat () function on any element that needs to be floated.
View code
$ (Document). Ready (Function() {$ ('Object'). Jqfloat ();});
Looking at the amazing results
Click the balloon, he will jump, click the snail, he won't let you move, haha
Function Configuration:
. Jqfloat ([Method] [, options])
Method:Controls floating objects.
Options:Configure the floating animation array.
About
Method
Currently, only two methods are available::
Play (or no method specified)
Start floating Animation
Stop
The animation for starting login.
Options
There are several options for configuring floating Animation
Width
Type: int Default: 100 -- the default value of int type is 100.
The maximum floating distance in the horizontal direction. Divide the value by 2 and locate the result on the left and right.
Height
Type: int Default: 100Int -- the default type is 100.
The maximum vertical floating. Divide the number by 2 and the result is located above and below.
Speed
Type: int Default: 1000 ---The default int type is 1000.
Maximum floating speed.
Minheight
Type: int Default: 0
Floating object distance from bottom/Surface
Details Code
1 $ (Document). Ready ( Function (){ 2 // If no method or option is specified 3 // Use the default method for floating Elements 4 $ ('Object' ). Jqfloat (); 5 6 // If you only specify the option 7 // The floating element varies according to the specified size. 8 $ ('Object'). Jqfloat ({ 9 Width: 300 , 10 Height: 300 , 11 Speed: 100 12 }); 13 14 // Stop floating 15 $ ('Object'). jfloat ('stop' ); 16 17 // Start floating 18 $ ('Object'). jfloat ('play' ); 19 });
Link to this article: cutting-edge design recommendations-use jquery to create a dynamic floating Web Interface
Hide