Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Carl

What is the most bestest HTML markup for images that will be animated with javascript

Recommended Posts

Hey Guys,

 

Have a sort of "best practices" question here for the community. In creating a variety of GSAP12 javascript demos I am often animating images. I'm wondering what the best way of adding them to my html is. Here are a few options:

 

1: Simply give the image an ID or class

 

#logo {
position:absolute;
top:20px;
left:20px;
}

<img src="logo.png" id="logo" width="200" height="200">

 

 

benefits:

pretty clean and no unnecessary markup.

 

cons:

code bloat. if you use the same image over and over it can look messy (see peacock code below)

 

2: Wrap img in a div and animate the div

 

#logo {
position:absolute;
top:20px;
left:20px;
}

<div id="logo"><img src="logo.png" width="200" height="200"></div>

 

 

benefits

 

perhaps the code is more scannable and finding the class of an element is easier if you just look in the div tags instead of having to find it in the img tag which may already be "cluttered" with attributes.

 

for a single image, is there any real benefit to wrapping it in a div when any additional styling info can be set as an id or class directly on the image?

 

cons:

unnecessary code?

 

3: Set image as background of div

 

#logo{

position:absolute;
top:20px;
left:20px;
width:200px;
height:200px;
background-image: url(img/background.jpg);
background-repeat: no-repeat;
}

<div class="logo"></div>

 

 

benefits:

 

The html is lean and mean and very easy to read. I remember html purists saying that html elements should never be empty. does that argument still have weight?

 

---

 

Personally, I like option 3. Consider the following example:

 



.feather {
 position:absolute;
 width:95px;
 height:288px;
 left:240px;
 top:20px;
 background-image: url(img/feather.png);
}


<div id="peacock">
<div id="feathers">
  <div class="feather left"></div>
  <div class="feather left"></div>
  <div class="feather left"></div>
  <div class="feather left"></div>
  <div class="feather right"></div>
  <div class="feather right"></div>
  <div class="feather right"></div>
  <div class="feather right"></div>
  <div class="feather center"></div>
</div>
<div id="peacockBody"></div>
</div>

 

 

see it in action: http://snorkl.tv/dev/peacockJS/

 

I'd much rather read that code than have a bunch of <img> tags floating around.

 

I know historically that the thinking has been:

 

if the image is part of the content, use an img tag. If the image is "presentational-flair" use css background.

 

When thinking of creating animations like banners, the images you use are going to fall into both camps.

 

what are your thoughts? Is there a clear winner?

 

thanks

 

Carl

  • Like 5
Link to comment
Share on other sites

I mostly favor the approach of using a DIV with its background set to be the desired image instead of nesting an IMAGE tag within the DIV or using the IMAGE tag in some other container element. The CSS can either be inline styles or traditional (shown below) depending on the implementation.

 

EXAMPLE #1:

<head>
<style type="text/css">
  #myDiv {
position: absolute;
overflow: hidden;
width: 300px;
height: 250px;
left: 200px;
top: 0px;
opacity: 1;
z-index: 1;
background-color: rgb(39, 40, 45);
cursor: pointer;
background-image: url("gm/bg_519x712_sky_landscape.jpg");
background-position: 0px -260px;
  }
</style>
</head>
<body>
 <div id="myDiv"></div>
</body>

However, if I'm dragging and dropping, or requiring other mouse events and user interactivity for the image, I'll then sometimes nest the IMAGE tag within a DIV so that I may attach independent mouse events to the image and the parent container. In situations of rare complex interactivity, some mouse events might be shared by both the parent container and the nested image to create unique and interesting affects where multiple events fire off simultaneously.

 

What I like about this method of using the background image is that you can simulate straight-line masking types of affects by simultaneously animating the container and its background image position to achieve wipes or reveals from the top, left, bottom, and right positions with a little bit of "clever" tweening.

  • Like 2
Link to comment
Share on other sites

Thanks Randall

 

Exactly the type of info I was looking for. Very helpful.

 

-Carl

Link to comment
Share on other sites

  • 1 year later...

very helpful post as i start to get feet wet in this stuff. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×