That intro ain’t a Flash intro

no flash logoLately I’ve been examining intros to websites in order to see how they were created, sort of like my article on “Hidden Animated CSS Logos”.

The technique I’ve adopted is to look out for preloaders because they normally run with JQuery, JavaScript or Flash; and by seeing a preloading within a intro of a website this is mainly how I tell if the intro is done with CSS3 or not.

FYI I’m yet to see anything CSS3 preloaders anywhere on the web. Email me if you have!

Finding Animated CSS Intros

While searching for intros done with CSS3 I was in need of finding the right one that would assist me in creating an intro for a wedding website I’ve been working on.

When discussing plans for this website, the clients brought up the point of their guest not being able to view certain effects because of their limited technical skills and equipment.

So they wanted me to avoid things such as pop-ups or messages that asked for downloads or upgrades of any sort.

They liked the idea of having a flashy intro to welcome their guest to the site, so now it was my job to create an intro for their site and fulfill these request.

Stumbling Upon A Solution

As I started my research on website intro, I stumbled upon a CSS-only slideshow for background images.

I really liked this tutorial because it offered a few different techniques to create an intro with just images and text in HTML and CSS, without the need of flash or any type of plug-ins. And the best thing about it, is that it viewed like it was done in Flash.

So I decided to use this tutorial to create the intro for the wedding site.  Check it out here.

When creating this intro with CSS, I found it to be very simple to create, If it were to be done in flash I know personally, I would have issues with creating the flash transitions with the same effects, and it would definitely involve way more work.

The intro is simply using the CSS3 @keyframe rule and the animation transition property of ease-in-ease-out.

So instead of playing around with the keyframe icons within Flash and insuring that each layer is properly overlaid onto the next layer; by just applying the @keyframe rule and applying this to the text and image elements was all that was needed to achieve this intro.


CSS Animated Intro Pitfalls

The only downfall of this CSS3 intro was that it will not render the animation for Internet Explorer, so the alternative that I came up with for the IE users was to just create a static intro page that welcomed the guest and presented an enter button to proceed onto the site.

Another approach for IE users could have been done with JQuery.

Anyone else rockin’ a CSS Animated Intro on their site? Let us know in the comments, of course!

Leave a Reply

Your email address will not be published. Required fields are marked *