반응형
반응형

PageRes: Fast, automatic screenshots

pageres

 

 

Get screenshots of websites in different resolutions

반응형
반응형

InstantClick: A JavaScript library to speed up your site

instantclick

반응형
반응형

Lazy Load Plugin for jQuery: Load pages faster and reduce server load

Lazy Load Plugin for jQuery: Load pages faster and reduce server load

lazy load for jquery

Homepage: http://www.appelsiini.net/projects/lazyload
GitHub: https://github.com/tuupola/jquery_lazyload/

 

 

Lazy Load Plugin for jQuery

Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazy Load is inspired by YUI ImageLoader Utility by Matt Mlinac.

How to Use?

Lazy Load depends on jQuery. Include them both in end of your HTML code:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

You must alter your HTML code. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

then in your code do:

$("img.lazy").lazyload();

This causes all images of class lazy to be lazy loaded.

More information on Lazy Load project page.

Install with bower

$ bower install jquery.lazyload 
반응형
반응형

WOW.js: Reveal animations as you scroll

wow..js

Homepage: http://mynameismatthieu.com/WOW/
GitHub: https://github.com/matthieua/WOW
Docs: http://mynameismatthieu.com/WOW/docs.html

 

WOW.js Build Status

Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

  • Smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs)
  • Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
  • Fast execution and lightweight code: the browser will like it ;-)
  • You can change the settings - see below

LIVE DEMO ➫

 

 

반응형
반응형

SVGMagic: Full-featured SVG fallback

svgmagic

Homepage: http://svgmagic.bitlabs.nl/
GitHub: https://github.com/dirkgroenen/SVGMagic
Demo Page: http://svgmagic.bitlabs.nl/demo.html

 

ScreenShot

SVGMagic - Cross browser SVG

This ease-to-use jQuery plugin will create a fallback for .SVG images on your website. When the plugin notices that the visitors browser doesn't support .SVG images it will replace those images with new .PNG images. Those .PNG images are created on the run using a serverside script. When the visitors browser does support .SVG images it will just go back to sleep.

A big advantage of SVGMagic is that you don't have to create multiple versions of your images. You can just focus on the .SVG images and let SVGMagic do the rest.

You can find more information and demos on our website.

SVG... what/why?

SVG is a vector graphics format, meaning it's perfectly scalable. Whatever size it needs to display at, or whatever screen it needs to display on, an SVG will adapt perfectly. This means that you can use the same image for desktop and mobile (including Retina) visitors. They all get a perfectly sharp image.

ScreenShot

 

반응형
반응형

You Might Not Need jQuery: A guide to figure it out

you might not need jquery

반응형

+ Recent posts