Category Archives: Web Design

Delay loading images with HTML5 data- Attributes


| View Code on JS Bin |


Intro animations (e.g., my Pure CSS3 Sliding Title) can appear jerky on pages loading a large amount of external data. If numerous images or Iframes immediately compete for resources, they initially can can bog down the page. Fortunately, you can delay the loading of those resources with a special combination of pure JavaScript, (jQuery 1.4+) and the HTML5 custom data attributes. This solution requires no AJAX.


HTML and jQuery Library:

< !DOCTYPE html>
<html lang="en" xmlns="">
<script src=""></script>
    <meta charset="utf-8" />
    <title>Pure CSS3 Sliding Title</title>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="" data-original="" />


$(document).ready(function () {
      setTimeout(function () {
        $('.load-delay').each(function () {
            var imagex = $(this);
            var imgOriginal ='original');
            $(imagex).attr('src', imgOriginal);
    }, 3000);


Read the rest
Also posted in HTML5, jQuery | Tagged , , , , , , | Comments closed

Pure CSS3 Sliding Title

CSS3 Logo

| View Code on JS Bin |

What it Does

This professional sliding title uses only CSS3 and HTML. CSS3 animation moves the title from left to right, while CSS3 -linear-gradient properties create a partially transparent css3color gradient. The slider floats over other contents (paragraphs, headers, divs, etc.) if they have a z-index of less than 1000.

How to install It

Read the rest
Also posted in CSS3, Sean's Posts | Tagged , , , , | Comments closed

Making a Webpage fade-in with jQuery (Cross-Browser Compatible)

jQuery logo

jQuery logoGoal

Using lessons from my jQuery class, I added a jQuery fade-in effect to my company’s homepage: It greets visitors with a white page quickly resolving into a site menu. This fade-in effect works on every browser version I tested, including the earlier, opacity-challenged versions of Internet Explorer (IE). It also gracefully degrades if the visitor has disabled JavaScript.


Initial searches on Google and Stack Overflow presented a host of possible solutions, but not all combinations of them worked. Some suggested

Read the rest
Also posted in jQuery, Sean's Posts | Tagged , , , | Comments closed
  • Currently Reading: