Thursday, May 26, 2011

Easy Image Zoom with jQuery

Posted by Unknown On Thursday, May 26, 2011 No comments

image by: cssglobe.comView Demo DownloadThe task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image.This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance.This all the code.<html><head><script [...]

CSS Circle Button

Posted by Unknown On Thursday, May 26, 2011 No comments

image by: superdit.comSee Demo at the bottom of the page.With the new features that CSS3 have creating a variety of button. In this example, radius of the border, padding the button, the height and width modified, it can look like a circle. And added the rotateX property that currently only supported in web kit browser, to make it look like from different angle.This all the simple code.<!DOCTYPE [...]

Friday, May 20, 2011

Background Animations Using MooTools

Posted by Unknown On Friday, May 20, 2011 No comments

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. Here's a quick MooTools code snippet that shows how you can add animating a background image to any element on a page. The CSS #animate-area { background-image:url(clouds.png); background-position:0px 0px; background-repeat:repeat-x; } The first step is assigning the image as a background image for [...]

Sunday, May 8, 2011

Cursor Following Menu for Blogger

Posted by Unknown On Sunday, May 08, 2011 No comments

image by manos.malihu.grThe idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the [...]

Tuesday, May 3, 2011

Rotating Image Slider with jQuery

Posted by Unknown On Tuesday, May 03, 2011 No comments

image by tympanus.netView Demo DownloadIn the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.We’ll [...]

Saturday, April 23, 2011

News Scroller using Dojo

Posted by Unknown On Saturday, April 23, 2011 No comments

Create a Simple News Scroller Using Dojo.The HTML<div id="news-feed"> <ul> <li><strong style="font-size:14px;">News Item 1</strong><br>Pellentesque habitant morbi...<a href="#">Read More</a></li> <li><strong style="font-size:14px;">News Item 2</strong><br>Pellentesque habitant morbi...<a href="/news/2">Read More</a></li> [...]

Monday, April 18, 2011

Shutter Effect with jQuery

Posted by Unknown On Monday, April 18, 2011 No comments

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect.jquery.shutter.css<style>#container{ width:640px; height:400px; margin:0 auto; border:5px solid #fff; overflow:hidden; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, [...]

Sunday, April 10, 2011

Circulate jQuery Plugin

Posted by Unknown On Sunday, April 10, 2011 No comments

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circula [...]

Wednesday, April 6, 2011

Dojo Lightbox with dojox.image.Lightbox

Posted by Unknown On Wednesday, April 06, 2011 No comments

The dojox.image.Lightbox resource has many cool features:Integrated theming and imagesKeyboard accessibleResizes when the viewport changesFlexible with numerous optionsDeclarative or Programmatic instance creationWorks with Dojo data storesLet me show you just how easy it is to use Dojo's Lightbox solution!The CSSdojox.image.Lightboxdoesn't require any of the Dijit themes but does require its own [...]

Tuesday, April 5, 2011

Exploding Logo with CSS3 and jQuery

Posted by Unknown On Tuesday, April 05, 2011 No comments

Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.The HTMLThe exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsm0TORTzqFA-JOb2iKPNUxEkFB9pRMQTLPMaemMJruyyb-g69S47gnKXxPmzaEewSAQHp4RU_t21JLAAlfLZBrz3hJD0jxMotKVOqFF6a80moJuMqo-BleIcgfvyXmwmd1xvIr7n0nSo/s320/Wayang+Kulit.jpg" [...]

Fading and Spinning Icons with CSS3 and jQuery

Posted by Unknown On Tuesday, April 05, 2011 No comments

The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.The HTML<div style="padding:20px 0;position:relative;"><div id="followIcons"><a style="top: 0.653561px; [...]

Monday, April 4, 2011

Create a Spinning Effect with CSS3

Posted by Unknown On Monday, April 04, 2011 No comments

They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.The CSSThe first task is creating the base animation with @-webkit-keyframes:<style type="text/css">@-webkit-keyframes [...]

Friday, April 1, 2011

Useful jQuery

Posted by Unknown On Friday, April 01, 2011 No comments

Overlay-like Effect with jQuery Today we will create a slick overlay effect with jQuery that does not use an overlay.Fullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. Making a Flickr-powered SlideshowToday [...]

Pages 71234 »