Category Archives: Web design

Animated Images

Posted on by
Previous posts of mine discussed animating images. How about animated images in an animated 3-D cube?

My nine GIF Animation posts in the order presented:

1 - Animation – Photos and Otherwise

2 - Animated GIF Images

3 - Animated GIF Software – Rudimentary Features

4 - Adding Falling Snow, Part 1 – Still Images

5 - Adding Falling Snow, Part 2 – Animated Images

6 - Adding Falling Snow, Part 3 – It’s Snowing!

7 - A Plug-in for Making Falling Snow

8 - Animating Sunrise & Sunset

9 - Animated GIF Photos – The End

This next display illustrates that there’s more than one way to animate an image. In fact, this one further animates an already animated (the GIF) image.

Animated 3-D cube + Animated GIF “Running Dog” (pure CSS)

Front side
_DSC4327_nx
Back side
wordpress
Top side
info button
dogrun
Bottom side_DSC4327_nx sep2
Left sidedogrun
Right sidedogrun

 

Hover over the cube for an exploded view
The back of each side properly shows the reverse of its front
Are we having fun yet? 😉

Of the techniques shown in the past three posts, this one is most likely to fail. It works with the current versions of Chrome and Firefox and doesn’t work with any version of IE due to failure to support the CSS3 transform-style: preserve-3d property (as I said in the last post - avoid IE if you can).

Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

More on Comparing Photos

Posted on by
Here’s another photo comparison technique. It’s much less common than others you’ve seen. It approaches the cutting edge in terms of web development code and won’t work if your browser doesn’t have a relatively recent release installed.

 

A work in progress
2015-01-15_18-59-17
Drag this slider in the image below to view the comparison
If you drag elsewhere, the image may turn blue 😦
Just refresh the screen if that happens
2nd problem to be solved is that the overlapping images don’t align vertically

 

_DSC4327_nx

_DSC4327_nx sep2

 

Please let me know if today’s technique fails to change the image on your browser. The cause may be that your browser needs updating or that I made an error in the code. Yesterday’s image comparisons suffered from both of these problems for two Safari browser users. One browser was several releases out date and doesn’t support the custom code. The other was current but I left out the special code needed to make that version work.

Older versions of Internet Explorer (pre-IE v.10) are notorious for failure to abide by international standards. Even the latest version is not implemented to support the newest (around for several years!) web features. Folks, there’s not enough space here to list all of the reasons (security, standards conformance, performance…) why I strongly advise using Chrome or Firefox - or almost anything but IE. And - if you insist on IE but don’t update it regularly (including the weekly Microsoft patch updates) you’re doing yourself a disfavor.

Also, do not use Safari on a Windows PC. Apple stopped supporting it in 2012.

Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Comparing Photos

Posted on by
Many readers of this blog are bloggers themselves. This post illustrates a handy photo blog technique - comparing photos. It’s one you’ve seen often and may have wondered how to do it yourself.

Today I’ll illustrate two basic versions of an image comparison technique. More will be shown tomorrow. The 3rd & final post will discuss the HOW-TO.

#1 - Image Fade

_DSC4327_nx_DSC4327_nx sep2

#2 - Vertical Image Flip

_DSC4327_nx
_DSC4327_nx sep2

 

#3 - Horizontal Image Flip

_DSC4327_nx
_DSC4327_nx sep2

If one or more of these techniques doesn’t change the image on your browser, the cause is an unsupported browser (most likely an OLD release). If this happens to you (it should not since I’ve added a ton of code to prevent it), I’d appreciate a reply that tells me what browser (e.g. Firefox) and what release (e.g. 31) you’re using.

Older versions of Internet Explorer (pre-IE v10) are notorious for failure to abide by international standards.

Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.