How To Code an Image Zoom Hover Display with jQuery

by Jake Rocheleau
on December 1, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.

In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.

Read More

Building a Single-Page Dynamic Website using AnimateScroll.js

by Jake Rocheleau
on November 4, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

Read More

Building Vertical-Tabbed Content Sections with jQuery

by Jake Rocheleau
on September 25, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Ajax-style loading boxes are useful when displaying large sets of related data. Think about something like an FAQ page, knowledgebase, or support system. Any type of navigation is often suitable as long as the user can determine how to navigate between content areas.

In this tutorial I want to demonstrate how we can build a custom vertical content section using jQuery. All of the internal content is held inside div containers which can be navigated with an icon-based menu. This content isn’t loaded externally via Ajax, but is instead hidden & displayed using content sections already on the page. Check out my live sample demo to get an idea of what we are building.

jquery vertical content tabs sections tutorial preview screenshot

Read More

Create a CSS/jQuery Image Rotator with Descriptions

by Jake Rocheleau
on September 2, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

This original tutorial was created by Soh Tanaka and published back in 2009. Unfortunately his demo has since gone offline and I managed to find an old copy of the source codes. People in the comments have been asking for automatic rotation between the slides and I updated the codes with this feature.

So in this tutorial I am reintroducing some of Soh’s original codes on how to build this dynamic automatic rotator. The jQuery is contained within the same index file and it is easy to follow along. It should also work even running the latest copy of jQuery on your website. Feel free to download a copy of the updated source codes or check out my live demo from the links below.

jquery image rotator tutorial preview screenshot

Read More
Page 2 of 2512345...Last »