Building a Single-Page Dynamic Website using AnimateScroll.js

by Jake Rocheleau
on November 4, 2013

in Tutorials

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

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

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

50 High-Quality Adobe InDesign Tutorials

by Steven Snell
on August 28, 2013

in Tutorials

Adobe InDesign is a program used for creating print designs like album covers and books. A while back I wrote about some easy tutorials for beginners. But in this showcase I want to share 50 powerful InDesign tutorials which offer a whole lot more complicated solutions. The best part is that you don’t need to be an expert with InDesign to understand it all! Check out the gallery and see if any tutorials appear interesting. With a bit of work you can learn how to design this stuff quickly and effortlessly.

Image Reflection

adobe indesign cs5 image reflection technique

Read More
Page 3 of 2312345...Last »