Archive for 2011

    Experimental CSS3 jQuery Animations for Image Transitions

    Experimental CSS3 jQuery Animations for Image Transitions

    Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

    Flow Slider: Mouse-Controlled jQuery Image Slider

    Flow Slider: Mouse-Controlled jQuery Image Slider

    Flow Slider is a jQuery plugin that lets you slide your HTML content as you always dreamed to. Flow Slider allows you to select from a range of transition effects or add your own, change settings, attach events, interact with the slider, and dress it in any design. It works by converting an unordered list into a slider and can be browsed by hovering to the right or left side of it.

    Display Slide OutBox depend up on Content using HTML and jQuery

    Display Slide OutBox depend up on Content using HTML and jQuery
    In this article i would like to explain the integration of slideroutBox at the Bottom of your webpages using HTML and Jquery.I am already using Third party Plugin for my blog for this feature.This plugin is provided by simple Reach..Its working Gr8..But this time,I am trying to create a custom Slider Outbox which will display depend up on content.So Lets start the implementation.

    IxEdit a JavaScript-based Interaction Design Tool

    IxEdit a JavaScript-based Interaction Design Tool

    IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

    PicStrips a jQuery plugin gives your images a bit of WOW!

    PicStrips a jQuery plugin gives your images a bit of WOW!

    PicStrips adds a little style to your images to help them stand out from the crowd. You can split your images into any number of strips, specify the whitespace between each strip and also the amount of vertical whitespace added at the top and bottom of alternate strips.

    jQuery Geo – an interactive mapping plugin

    jQuery Geo - an interactive mapping plugin

    Query Geo, an open-source geospatial mapping project from Applied Geographics, provides a streamlined JavaScript API for a large percentage of your online mapping needs. Whether you just want to display a map on a wep page as quickly as possible or you are a more advanced GIS user, jQuery Geo can help!

    nanoScroller a Lion-styled jQuery scrollbars

    nanoScroller a Lion-styled jQuery scrollbars

    nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .content. The other scrollbar div elements .pane > .slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

    Sumon Math Game With jQuery

    jQuery Math Game

    In today post I want to share how I make a simple sumon math game based on JQuery, this game inspired by hyperandroid, this game it quite nice to practice your self concentration about math addition.

    This post will create that simple nice game, just to show that you can make it with simple jquery, please note that I only add the basic rule of the game, which are, we have to pick the total number that matched the appear random number thats all.

    Easily animate box shadows in jQuery

    jQuery box shadows animation

    With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support rgba-colors (the alpha channel).

    Embellishing Your Google Map with CSS3 and jQuery

    Embellishing Your Google Map with CSS3 and jQuery

    Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps.

    In this article I’ll share a technique I used recently to spice up the “Places to shop and eat” map on Vegan Melbourne, using a combination of the Google Maps API, jQuery animation, and some newer CSS effects.