Category Archives: Advanced

Scalable Header Image

Most themes which offer a header image as one of its options have a common problem: the entire image often does not get displayed, i.e., the header is too short or the sides of the image get cut off, especially as the screen width gets narrowed. The reason behind this is that in most cases,… Read More »

Skrollr Demo

This post is still under development. But you can still scroll down to see the work in progress. This post is a demo of how to incorporate the Skrollr Animation library, and uses the concepts from Petr Tichy’s Parallax Scrolling tutorial. Elements can fade in and out Background images are from the World Wildlife Fund… Read More »

Clickable Image for Video

This post demonstrates how to set up a clickable image that turns into a video when clicked. Click on either of the images below, and a YouTube video will play. Here’s how: The first thing you need to do is add some jQuery. This only needs to be done once for your whole site. If… Read More »

Hamburger Menu, Top

This hamburger demo places the mobile menu at the top of the screen. You can see it in action by re-sizing this page to the same width as a tablet or smart phone.

Basic Hamburger Menu

This post demonstrates a basic hamburger menu that replaces the default drop-down menu on mobile viewport sizes. To see a demonstration, re-size this browser window until it is the same width as a smart phone or tablet, and you will see an icon appear with three, short horizontal lines. Clicking or tapping on the icon… Read More »

Grayscale Image Transformations

A lot of people like the transitional effect of the thumbnail images on the blog page. Here is an example of how you can implement the same effect on images within your post, just by assigning a special class name to them. Hover your mouse over either of these images and you should see the… Read More »