background preloader

Creating a Mouseover Fade Effect with jQuery

My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign. Related:  web designing

Blogger Templates (Classic) 21 – 25 | GeckoandFly If any of you guys happen to boot the classic templates from my previous collection into the new XML format, please share, email the files and I’ll host it here. A credit on the footer of the template goes to the author and not to GeckoandFly. Come and help built the world’s biggest collection of Blogger Templates. Thanks :) Good luck and happy blogging! Here are the complete lists of templates: P.S. – The blogger templates are all open source, you are allowed to customized the template as you like and remove the credit to Geckoandfly if you want to, and just in case you’re wondering why there is no result when you use the “Google Search This Blog” feature, the reason being is that Google Search Engine has yet to index your blog. We recommend these Blogger Tutorials : The Other Eden Click here for Demo Visit the The Other Eden Blogger Template Ambiru Click here for Demo Visit the Ambiru Blogger Template Binary Bonsai (Two Column) Click here for Demo Visit the Binary Bonsai Blogger Template

Creating Interactive Fictional UI With CSS3 In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section. View Demo Cool right? HTML Structure We will have a simple HTML structure with several division where each one contains title and description. As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. Home Button Profile Button Contact Button Hover State Ok. CSS Style Let’s define the style for each buttons and its child. First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. The title element has scale up 5 times, and 0 opacity. The content division will fade in and scale up to 1. That’s it! Conclusion

Fancy lightbox alternative| How to use 1. First, make sure you are using valid DOCTYPE This is required for FancyBox to look and function correctly. 2. Loading jQuery from CDN (Content Delivery Network) is recommended Optional - Add transitions as jQuery by default supports only "swing" and "linear" Optional - Enable "mouse-wheel" to navigate throught gallery items 3. Don`t forget to change background image paths if CSS file is not in the same directory. Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more). 4. Images Inline content <a id="inline" href="#data">This shows content of element who has id="data"</a><div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iframe <a href=" Ajax <a href=" takes content using ajax</a> Optional - Use the title attribute for anchors if you want to show a caption 5. Sample examples:

How to Make a Smooth Animated Menu with jQuery Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery

cufón - fonts for the people CutePHP Content Management 50 New Useful CSS Techniques, Tutorials and Tools Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. The Simpler CSS GridWhy restrict your layout so that it can fit into this 960gs?

Create a Simple Infinite Carousel with jQuery Introduction Finally, I have times for this carousel script. I always think that it's hard to figure it out, but thanks to a tutorial - Making a jQuery Infinite Carousel with nice features from tutsvalley. Alright, We have a main wrapper called carousel and inside it, we have two sections - buttons and slides. <div id="carousel"><div id="buttons"><a href="#" id="prev">prev</a><a href="#" id="next">next</a><div class="clear"></div></div><div class="clear"></div><div id="slides"><ul><li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li><li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li><li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li></ul><div class="clear"></div></div></div> CSS is a little bit complicated. 3. There are two new methods we are about to learn. After - Insert content after each of the matched elements.Before - Insert content before each of the matched elements. Conclusion Like this tutorials?

10 Superb Image Effects and Slider Tutorials with Jquery 10 Superb Image Effects and Sliders with Jquery and CSS. I haven’t been into jquery much but since i had to use it in one of my site i worked on one and i became a fan of jquery. that is why i have gathered a list of awesome jquery effects tutorial for images and sliders. All tutorials are gathered from various sites and are linked back. Fancy Thumbnail Hover Effect w/ jQuery This is an awesome thumbnail hover effect jquery tutorial. Sliding Boxes and Captions with jQuery This tutorial is my personal favorite, u can stylize your images with divs/boxes and make superb , very attractive effects by simple jquery. Create an Image Rotator with Description (CSS/jQuery) This is a very very handy and attractive master piece of jquery and css. AnythingSlider jQuery Plugin AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. ImageSwitch A superb easy to use plugin which switches between images in a very attractive animated style.

jQuery custom content scroller Last updated on Mar 10, 2015 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more. Current version 3.0.8 (Changelog)Upgrading from version 2 When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. Version 2 is still maintained and updated here. How to use it Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Initialization Initialize via javascript more info Initialize via HTML

Dance to the Music - Website Templates Designer's Comments Look carefully for specific instructions To use this layout simply copy and paste the code and you should be ready to go. For more layouts visit my website at www.stilledheart.org, I also take requests there for personalized layouts. Credit also goes to: www.outspoken-kate.com www.fallingstarss.com www.sweetandtalented.com Layout Code Copy and paste to Template HTML Help Layout Comments Showing latest 2 of 2 comments I LOVE this using for my NEW Site:) Thank you very much.

Related: