The 10 web Front-ends are based on jQuery and css3 animation plug-ins and source code, and jquerycss3

Source: Internet
Author: User
Tags jquery accordion

The 10 web Front-ends are based on jQuery and css3 animation plug-ins and source code, and jquerycss3

1. jQuery horizontal accordion Image Display plug-in

Today, we will introduce a very cool jQuery plug-in, which is a horizontal accordion Image Display switching plug-in. Each image is initially horizontally stacked together, click the image to switch to the next one, and the animation effect of horizontal movement appears when the image is switched. In addition, you can define any number of images to apply in this accordion image plug-in.

Online Demo

Source code download

2. Buttons and special effects implemented by pure css3

Today, we will bring you a special effect on mouse passing through buttons implemented by pure css3. This button is very simple, but the effect is very good, very beautiful.

Online Demo

Source code download

3. FreeIconMaker-create free and stylish icons online

When designing a website or Web application, you cannot deny the importance of Web design tools that help simplify your tasks and complete your projects. FreeIconMaker.com is a free online icon creation tool. You can also create your own templates and share them with others.

Online Demo

Source code download

4. jQuery horizontal accordion image slider plug-in

This time we will share a very good jQuery horizontal accordion image slider plug-in. First, it is developed based on jQuery, so it will be compatible with most browsers. Second, this jQuery image slider plug-in can be used for automatic playback or mouse sliding and out-of-date switching. It is a very good jQuery accordion image plug-in.

Online Demo

Source code download

5. jQuery full-screen rolling plug-in fullPage. js demo

Today we often see full-screen websites, especially foreign websites. These websites use a few large pictures or color blocks as the background, and then add some simple content, which is exceptionally high-end. For example, the iPhone 5C introduction page (View) is an official website of the QQ browser. If you want your website to be designed to be full-screen and more advanced, try fullPage. js. FullPage. js is a jQuery-based plug-in that can easily create full-screen websites. Its main functions include: support for mouse scrolling, forward and backward, and keyboard control, multiple callback functions support mobile phone and tablet touch events, CSS 3 animations, Window Scaling, and automatic adjustment during Window Scaling, set the scroll width, background color, scroll speed, loop options, callback, and text alignment.

Online Demo

Source code download

6. vTicker-jQuery vertical scroll plug-in

VTicker is a very small jQuery vertical scroll plug-in, which is only 2 kb after compression. VTicker supports custom scrolling time, interval, display count, scroll direction (up/down), container height, and so on, but it is a little harsh on the HTML structure-the container can only contain ul labels. However, if you only need a vertical scroll effect, vTicker is still a good choice. After all, it is so small and convenient.

Online Demo

Source code download

7. SlipHover-create an animation mask layer display Title or description

SlipHover is a jQuery-based plug-in that can perceive the direction of mouse movement and display a mask layer in an animation in the corresponding direction (or reverse direction) to display the title or description, applying to slides or albums is a good choice. SlipHover also supports customizing the mask height, animation time, font color, background color, and text layout. We believe that a reasonable combination can make your slides or albums better.

Online Demo

Source code download

8. ResizeEnd-window size adjustment Post-processing event plug-in

ResizeEnd is a small jQuery plug-in that can handle some things after the browser window size changes. Although it is a very simple plug-in, it also has a brave place to think about it, such as in responsive design.

Online Demo

Source code download

9. multiscroll. js-jQuery vertical and reverse scrolling plug-in

You may already know that fullpage. js is a very good plug-in. Many excellent companies are using it, such as pig Bajie and Netease. Today, we will introduce another plug-in developed by the plug-in author-multiscroll. js. Multiscroll. js and fullpage. js is a bit similar, it is also full screen Page scrolling, but fullpage. js is full screen scrolling, while multiscroll. js is divided into two panels, vertical and reverse scrolling together.

Online Demo

Source code download

10. onepage-scroll-jQuery single-page/full-screen scrolling plug-in

Single-page/full-screen scrolling pages are more and more common. They are mostly used for simple pages with less content such as product introduction and recruitment. Many jQuery plug-ins have also emerged for this effect, such as fullPage. js and Scrollify introduced between them. Today we will introduce a jQuery single-page/full-screen rolling plug-in-onepage-scroll.

Online Demo

Source code download


Teaches you how to compatibility between web jquery and CSS 3 components ie

This is the inconsistency between the height and width of the image itself and the height and width of the image set in CSS. After the event is triggered, jquer dynamically assigns the image a height and width, so it becomes normal.

Web Front-end proficiency div + css jquery js css3 + html5 background proficiency java

It should be worth yuan. I checked it at the job fair last time. The front end is not worth the money. I am also a front end.
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.