Be hypnotized with pure CSS3 (creating an animated css3 spiral)

One of the main problems (or rather goals) in web design today is to capture users attention; it has been said that you have no more than 3 seconds to capture the user and suck him into the site. That is quite challenging in my book, and you should definitively do everything you can think of to grab the user and turn him into a customer.

I will show you a technique that would some people probably consider unethical (heck, even i consider it to be unethical), but it is very, very effective. We will hypnotize the user using pure CSS3 techniques.

With hypnotized user, you can do whatever you want; you can make him click the ads, you can make him buy your product, heck, you can even make him subscribe to RSS. But do use a common sense when you do that. We don’t want the whole population of Internet users to go into a trans-like state of half existence, do we?

Please note that this will work only in Webkit browsers (Safari and Chrome). It’ll take some time for other modern browsers to start supporting CSS3 animations. And it will probably take a century or two for IE to jump in the game as well. But that’s not relevant here.

Also, this demo is quite CPU consuming, so if you’re not getting a smooth animation, try to zoom out a bit and it’ll be fine.

This is our basic html5 markup; a whole lot cleaner and easier than the xHTML way. If you want to learn more about HTML5 I recommend you check out Dive into HTML5:

[code lang=”html”]

[/code]

Let’s add a few styles:

[code lang=”css”]
html{
width:100%;
height:100%;
display:table;
text-align:center;
}

body{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#999));
display:table-cell;
vertical-align:middle;
}
[/code]

Html tag will serve us as a container. We want it to stretch for a whole width and height of users screen. Also, we want our spiral to be centered horizontally and vertically. Easiest way to center a div vertically is to set its display value to table-cell and its parent to table.

In our case html tag will be a table, and body tag will be a table-cell. We’ll set vertical-align of the body to middle, and anything we put into it will be perfectly centered.

Now add this to CSS:

[code lang=”css”]
#spin_container{
width:700px;
height:700px;
border-radius:350px;

position:relative;
margin:0 auto;
display:block;

background:#fff;
-webkit-box-shadow:0 0 120px #000;
}
[/code]

Our main spiral outline will be div #spin_container. To create a perfect circle from a 700px wide and 700px high div we just have to set its border-radius to 350px (or half of its size).

This is what you should have by now.

And that’s the simple part; things will get a little bit tricky now.

Since there is no easy way to create a spiral in plain HTML/CSS, we’ll create a optical illusion using just circles (fully rounded divs).

Add a #spin and #spin1 divs into #spin_container. From now on we’ll be stockpiling divs here to create a spiral. You’ll see how this works in a second.

[code lang=”html”]

[/code]

Styles for #spin and #spin1 are as follows:

[code lang=”css”]
#spin{
width:600px; height:600px;
-webkit-border-radius:300px;
top:50px; left:50px;

background:#333;
position:relative;
text-indent:-9999px;
}

#spin div{
position:absolute;
}
#spin1{
width:500px; height:500px;
-webkit-border-radius:250px;
background:#fff;
}
[/code]

You already see where we’re going?

Div #spin will be positioned relatively and all its children will be positioned absolutely. We’ll use two colors to achieve the illusion: dark grey (#333) and white (#fff). Divs of the same color will blend together and the user will see only one (grey) image: the spiral.

To see exactly how it works add a following code one div/style at the time and test as you go. You’ll see it pretty much comes down to playing around with div positioning and sizing.

HTML:

[code lang=”html”]

[/code]

CSS:

[code lang=”css”]
#spin2{
width:500px; height:500px;
-webkit-border-radius:250px;
top:1px; left:50px;
background:#fff;
}

#spin3{
width:500px; height:500px;
-webkit-border-radius:250px;
top:20px; left:10px;
background:#fff;
}

#spin4{
width:500px; height:500px;
-webkit-border-radius:250px;
top:20px; left:-60px;
background:#333;
}

#spin5{
width:420px; height:420px;
-webkit-border-radius:210px;
top:64px; left:107px;
background:#fff;
}

#spin6{
width:420px; height:420px;
-webkit-border-radius:210px;
top:-10px; left:-15px;
background:#fff;
}

#spin7{
width:350px; height:350px;
-webkit-border-radius:175px;
top:-5px; left:55px;
background:#333;
}

#spin8{
width:300px; height:300px;
-webkit-border-radius:150px;
top:8px; left:-20px;
background:#fff;
}

#spin9{
width:280px; height:280px;
-webkit-border-radius:140px;
top:45px; left:25px;
background:#333;
}

#spin10{
width:240px; height:240px;
-webkit-border-radius:120px;
top:-10px; left:39px;
background:#fff;
}

#spin11{
width:180px; height:180px;
-webkit-border-radius:100px;
top:13px; left:-5px;
background:#333;
}

#spin12{
width:150px; height:150px;
-webkit-border-radius:90px;
top:43px; left:6px;
background:#fff;
}

#spin13{
width:140px; height:140px;
-webkit-border-radius:70px;
top:-10px; left:30px;
background:#333;
}

#spin14{
width:140px; height:140px;
-webkit-border-radius:70px;
top:5px; left:-8px;
background:#fff;
}

#spin15{
width:160px; height:160px;
-webkit-border-radius:80px;
top:-5px; left:-17px;
background:#fff;
}

#spin16{
width:140px; height:140px; background:#333;
-webkit-border-radius:70px;
position:absolute; top:-4px; left:27px;
}

#spin17{
width:140px; height:140px;
-webkit-border-radius:70px;
top:3px; left:-10px;
background:#fff;
}
#spin18{
width:130px; height:130px;
-webkit-border-radius:65px;
top:7px; left:15px;
background:#333;
}
#spin19{
width:120px; height:120px;
-webkit-border-radius:60px;
top:-5px; left:0;
background:#fff;
}
#spin20{
width:100px; height:100px;
-webkit-border-radius:50px;
top:19px; left:0px;
background:#fff;
}
[/code]

Lastly, let’s animate the spiral. This will work only in webkit browsers. Firefox will support animate in version 4 (so they say). And we’ll be patient till then, will we?

Add following to CSS:

[code lang=”css”]
#spin{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}

to {
-webkit-transform: rotate(-360deg);
}
}

[/code]

This is a custom animation that will spin the #spin div from 0 to -360 degrees in a 2 seconds infinite number of times. -360 only because effect looks better when spiral rotates anti-clockwise. And that’s about it.

Never mind that a final result won’t be much of a value for you (you don’t really want to hypnotize your users, do you?); much in web development is about finding creative solutions to same old problems; let this inspire you to find a new (and possibly better) solution to a problem you’re facing daily – how to attract users and how to arouse their interest. Or just hypnotize someone, I don’t really care (as long as I’m not a victim).

The owner of this blog is not responsible for any damage inflicted by using techniques described in this post. Neither am I. You should not stare at the result of this tutorial, neither should you force anyone to do so. This is for educational and entertainment purposes only.

Thanks for reading.