Sexy Opacity Animation with MooTools or jQuery A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. There's nothing too special about the HTML above; the awesomeness comes with CSS. The CSS To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. The MooTools JavaScript The structure for both the jQuery version and MooTools version is the same. The jQuery JavaScript $(document).ready(function() { var opacity = 0.7, toOpacity = 0.9, duration = 250; $('.opacity').css('opacity',opacity).hover(function() { $(this).fadeTo(duration,toOpacity); }, function() { $(this).fadeTo(duration,opacity); } );}); Be Heard
jQuery Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. Photos by Andrew Schmidt via publicdomainpictures.net How to Use Link to the script after jQuery. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows(example has the default config values assigned) Parameters are: thumbImages: path to the thumbnails smallImages: path to the small size images largeImages: path to the large size images count: number of images/thumbnails thumbImageType: file extension for thumbnail images (all should be the same) imageType: file extension for gallery images (all should be the same) breakpoint: width at which the small and large image sizes are swapped shadowStrength: strength of the shadow on the non-selected thumbs (0-1) Download Plugin: zip tar Other stuff by me: johnpolacek.github.com
How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Here is the CSS: Just a note, the png transparency won’t work in IE6. The jQuery There are a couple ways of animating the background with jQuery.
SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:
Lateral On-Scroll Sliding with jQuery After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The CSS The row will serve as a wrapper for the left and right elements: The style for the description:
Libro gratuito de jQuery en español - Fundamentos de jQuery Create a Stunning Sliding Door Effect with jQuery Introduction Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links: Advertisement This tutorial is going to be awesome! Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners)Each of the corner will have the same background image (grabbed from qitem class's child image element) but with different background position: top left, top right, bottom left and bottom right. The following image illustrate how it works: It's a good practise to keep HTML as simple as possible. In the demo, we can see there are total of 9 items. <div class="qitem"><a href=" src="1.gif" alt="Test 1" title="" width="126" height="126"/></a><span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In CSS section, it's quite simple. For caption, position:absolute is a must to se the z-index. 3.
10 Useful jQuery Popup Plugins Modal dialog boxes are a great way to show quick information to your users. It also helps to alert them of errors, warnings, prompts for information and more. Here is a list of 10 jQuery Popup Modal Dialog Plugins. Typography Effects with CSS3 and jQuery Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines. The image used in the demo is by Andrey & Lili. The HTML The structure will simply be an h2 element with an anchor inside. Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span. Now, let’s take a look at each example. In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. Example 1 In the first example we want to skew the letters in order to create bit of perspective. We’ll give the link element an absolute position and make the second word disappear by giving it the opacity 0: Example 2 Example 3
70+ Inspirational Examples of Websites Designed With HTML5 The web is constantly evolving. New and creative websites are being created every day, pushing the limitations of HTML in every direction. HTML4 has been around for nearly a decade and now its time to move forward. To give authors more flexibility and interoperability, HTML5 is proposed as the next major revision of HTML. It works on just about every platform, is compatible with older browsers, and handles errors gracefully. In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs that are coded in HTML5. The main purpose here is to stimulate your creativity and to inspire your imagination to create awesome designs because your website represents you and your brand. You may be interested in the following modern trends related articles as well. Please feel free to join us and you are always welcome to share your thoughts that our readers may like. Don’t forget to and follow us on Twitter — for recent updates. What is HTML5 Hd-live
Building an Animated Cartoon Robot with jQuery Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head. The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. The jQuery JavaScript Disclaimer: The original script to animate the robot was horrid.
How to Load In and Animate Content with jQuery In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects. So first of all, I have put together a very simple layout for this example. Here's a screenshot and the HTML code we'll use. Step 1 First thing's first, go and download the latest stable release of jQuery and link to it in your document: One of the best things, in my opinion, about jQuery is it’s simplicity. First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded). Step 2 So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page. Step 3 Step 4 Here is the code so far: