开发者应该注意的9个错误,优秀的jQuery视差插件

jQuery is so easy to use that sometimes we just forget that it’s not
CSS. While using CSS, we don’t have to give much thought to performance,
because it’s so fast that it’s not worth the effort to optimize it. But
when it comes to the real world, jQuery can drive developers crazy with
performance issues. Sometimes you lose precious milliseconds without
even noticing it. Also, it’s so easy to forget about some functions and
we keep using the old (and not-so-good) ones.

jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了!

Let’s take a look at a few of the most-common-and-easiest-to-fix
mistakes while using jQuery in your projects.

原文地址:

  1. You aren’t using the latest jQuery version
    Each version update means higher performance and several bug fixes. The
    current stable release is 1.7.2, and I’m pretty sure you know about
    plenty of sites developed using 1.6 and below. Ok, ok, you can’t just
    update every old site for every jQuery update (unless your client is
    paying you to do so) but you should at least start using it for your new
    projects. So, forget about this local copy and just grab the latest
    release every time you start a new project.

  2. You aren’t using a CDN-hosted copy of jQuery
    How many unique visitors you`ve got last month? I bet the number is
    still under 1 billion, right?
    So you’d better use Google’s copy of jQuery instead of yours. If your
    user still has the cached file of Google’s website (or from many other
    sites that uses its CDN) his browser will just get the cached version,
    improving a lot your website’s performance. You can use it by copying &
    pasting this HTML:

parallax.js

parallax.js reacts to the orientation of your smart device, offsetting
layers depending on their depth within a scene… Oh, you don’t 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.

图片 1

<script type=”text/javascript”
src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

freshD

The jQuery 3D Parallax Plugin magically animates your objects in a
dynamic created 3D world. For those of you who don’t 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’s point of view. Here’s
a wiki link for something more indepth.

图片 2

  1. You aren’t using a fallback for CDN version
    I know I said Google is awesome and stuff, but they can fail. So, every
    time you rely upon external sources, make sure you have a local
    fallback. I’ve seen this snippet in the HTML5 boilerplate source code
    and just found it amazing. You should use it too:

skrollr

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.
Actually, skrollr is much more than “just” parallax scrolling. It’s 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.

图片 3

<script
src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script
src=”js/libs/jquery-1.7.2.min.js”><\/script>’)</script>

A Parallax JavaScript library

All animations are done using CSS3 transformations whenever possible and
fall back to normal CSS positioning when necessary.

图片 4

  1. You aren’t chaining stuff
    While doing common operations, you don’t need to call the element every
    time you want to manipulate it. If you’re doing several manipulations in
    a row, use chaining, so jQuery won’t need to get the element twice.

superscrollorama

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.

图片 5

Instead of this:

jParallax

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.

图片 6

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

plax

After doing the parallaxing illustrations for GitHub‘s 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.

图片 7

Use this:

Stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects
to any scrolling element.

图片 8

$(“#mydiv”).hide().css(“padding-left”, “50px”);

CSS3 Parallax

Takes advantage of CSS3 3D transforms to create a real parallax effect.
Responds to mouse movement. Device motion will be supported soon.

图片 9