{"id":241,"date":"2014-08-11T16:43:31","date_gmt":"2014-08-11T08:43:31","guid":{"rendered":"http:\/\/www.yittech.com\/?p=241"},"modified":"2016-04-29T00:05:22","modified_gmt":"2016-04-28T16:05:22","slug":"jquery-chajian","status":"publish","type":"post","link":"https:\/\/www.yittech.com\/jquery-chajian.html","title":{"rendered":"15+\u4f18\u79c0\u7684jQuery\u89c6\u5dee\u63d2\u4ef6"},"content":{"rendered":"

Parallax effects are interactive by nature and still relatively new in web design. That\u2019s why they are a great way to make your visitors curious, draw them in, and engage them with your\u00a0<\/span>website. Here I look at some of the best\u00a0<\/span>jquery parallax plugins.<\/strong><\/span><\/p>\n

parallax.js<\/h1>\n

parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene\u2026 Oh, you don\u2019t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.<\/p>\n

\"parallax

freshD<\/h1>\n

The jQuery 3D Parallax Plugin magically animates your objects in a dynamic created 3D world. For those of you who don\u2019t know what Parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer, the most front objects also transform themselves to the viewer\u2019s point of view. Here\u2019s a wiki link for something more indepth.<\/p>\n

\"freshD

skrollr<\/h1>\n

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML. Actually, skrollr is much more than \u201cjust\u201d parallax scrolling. It\u2019s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3.<\/p>\n

\"skrollr

A Parallax JavaScript library<\/h1>\n

All animations are done using CSS3 transformations whenever possible and fall back to normal CSS positioning when necessary.<\/p>\n

\"A

superscrollorama<\/h1>\n

Clearly, Superscrollorama is amazing. Superscrollorama is a controller for animation. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.<\/p>\n

\"superscrollorama

jParallax<\/h1>\n

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.<\/p>\n

\"jParallax

plax<\/h1>\n

After doing the parallaxing illustrations for GitHub\u2019s 404 and 500 pages, he decided it might be fun to put together some kind of jQuery plugin to make it easier to do parallax stuff in the future.<\/p>\n

\"plax

Stellar.js<\/h1>\n

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.<\/p>\n

\"Stellar

CSS3 Parallax<\/h1>\n

Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement. Device motion will be supported soon.<\/p>\n

\"css3

FractionSlider<\/h1>\n

FractionSlider is a jQuery plugin for image\/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated).<\/p>\n

\"FractionSlider

sequencejs<\/h1>\n

Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles.<\/p>\n

\"sequencejs

Parallax Content Slider<\/h1>\n

A simple parallax content slider with different animations for each slider element and a background parallax effect.<\/p>\n

\"Parallax

jQuery Parallax Slider<\/h1>\n

This plug-in has many options to let you customize the animation when a slide begins and ends for all the elements within it as well as the slide itself. You can add a delay before an animation begins and change its duration. You can change the animation to use any valid jquery easing name such as swing or linear. If you combine this plugin with the jquery easing plugin in your project, you\u2019ll have access to many more easing options.<\/p>\n

\"parallax-13

Parallax.js<\/h1>\n

Is a javascript framework allowing you to slide in pages of your site with having a parallaxing background. Parallax.js keeps pages in a structureless format, meaning you can absolutely control where pages come in and from where, even if it doesn\u2019t make geometric sense. You add html elements, or pages, to Parallax.js and use the movement functions to slide them into view, pushing whatever was there out of the way. Very light weight, very cool. Just like fezes.<\/p>\n

\"parallax-18

LayerSlider<\/h1>\n

LayerSlider is the most advanced Responsive\u00a0<\/span>jQuery Slider\u00a0<\/span>Plugin with the famous Parallax Effect and optional 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!<\/p>\n

\"LayerSlider

Slider Revolution<\/h1>\n

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!<\/p>\n

\"slider

Scrolling Parallax<\/h1>\n

Scrolling Parallax is a jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website. Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.<\/p>\n

\"parallax-16

parallax scrolling storytelling framework<\/h1>\n

Stevan ?ivadinovi?, the brains behind multi-plane side-scroller web comic Hobo Lobo of Hamelin, walks us through the development of the Parallaxer platform and gives a crash course on turning pencil drawings into transparent-background assets<\/p>\n

\"parallax-17

– See more at: http:\/\/www.goodfav.com\/jquery-parallax-plugins-15494.html#sthash.yUQkmTrW.dpuf<\/p>\n