Visit Site

New Mentality

For a company who specializes in new media and modern technologies are website was dry, static and boring. It didn’t reflect the exciting environment we all work in and wasn’t growing at the same speed as the company.

Accessibility doesn’t have to be boring

We wanted the new website to be accessible by anyone anywhere without losing anything in design. This includes video, animations and image heavy content.

Take the image above: It uses only CSS and no images, it works in every browser we tested! We also included video that will play on iPhone, iPad and any device that can handle flash. But one of my favorites is our 3D box render which also works on the iPhone and iPad.

Check for updates

I included a news page on the site so check us out for updates on IPTV, Digital Signage and other broadcasting technologies.

View Demo

Eh! what does it do again?

Well quite simply it updates the web-pages title attribute when a user is inactive or browsing in another tab. When the user returns the title returns to the original state.

Basic Usage

This demo changes the title to show the user they have a new message in their inbox.

     var myVar = new tabAlert({
          text: 'You have one new message.'
     });

More Advanced Usage

This demo shows a goal alert.

     var myVar = new tabAlert({
          text: 'GOAL FLASH: Manchester United 0:1 LEEDS UNITED (Beckford 19',
          ticker: true,
          speed: 200,
          onLoop: function(){
             checkForMoreGoals();
          }
     });

My first Mootools plugin

This is my first MooTools plugin. I don’t usually get to time to write one (The process of submitting your first takes forever)! But it’s up and you can download it here.

View Demo

The Idea

I’ve seen this effect used before but most recently in a tech demo for Microsoft’s “Courier”. Below is a snippet of how this menu system works:

My Idea was to build this using DHTML only. No Flash, Canvas or SVG but pure HTML, CSS and JavaScript.

The Basis

The Pullout menu comprises of five HTML elements a,b,c,d and a handle. Elements a,b,c,d are positioned and then skewed to give the effect of a folding object.

When the handle is pulled outwards the width of the elements is stretched and the skew becomes less. This and some colouring effects in JavaScript give the effect of a fold.

Final Effects

I added a simple “on complete” event that detects when the menu is fully opened. The event can be used to trigger any JavaScript you like. I also tinkered with a revert animation that was triggered if the menu was released without being fully open, although this was cool it made it impossible to view the code frame-by-frame in firebug.

Folding Improvements

The animation I used doesn’t seem natural to me, this was down to my lack of understanding in perspective drawings and transitions. Im sure someone with a better understanding could make a much better example from this concept. Maybe if images, gradients and shadows were introduced the effect would start to feel more natural.

Finally

If anyone does improve the menu could you let me know. I’d be really interested to see it.

View Demo

About Flipping

I first used flipping a few years ago when building touch screen HTML applications for kiosks. The animation would basically make the elements width 0 whilst moving the elements position right. This would give the effect that the element had been “sort of” flipped. It was a very simple solution and would only work if the animation was fast. Tricking the human eye into thinking it was actually flipped.

So what’s changed

Well firstly CSS3 allows you to skew, not screw! but skew. Skew allows you to give a simple pseudo 3D effect. It’s not ideal for this example but until 3D Transforms come in, it greatly adds to the effect of tricking the eye into thinking the element has been flipped.

The Process

The animation works in three steps:

The first step goes from: [width: curWidth, left: 0, skew: 0deg 0deg] to: [width: 0, left: initialWidth/2, skew: 0deg 20deg]. This gives the effect that the element has been flipped like a playing card onto its thinnest edge, essentially you cannot see it at this stage.

The second step triggers any javaScript you want to happen. In my examples I add a class to the element called “toggleTrue” which can be used to change the CSS properties of the box. Potentially videos, images or text could be inserted creating a sort of flipping lightbox.

The third and final step animates the element from it’s side to it’s back-facing plane. The animation goes from: [width: 0, left: initialWidth/2, skew: 0deg -20deg] to: [width: initialWidth, left: 0, skew: 0deg 0deg]. Notice the skew changes from step one’s finishing position to a negative value, without doing this it looks as if the card has gone 90deg and back again.

Flipping an element with background-image set:

When I initially did this a few years ago I would use an image tag and just flip that. This was because changing the width of an image stretches the image and using background-image wouldn’t do that, until now that is. By using the CSS3 property “background-size” I can set the width to 100%, this makes the background-image stretch as the container does.

Why not use CSS3 animation in webkit?

I did experiment with CSS3 animations and failed quite quickly. The problem i found was the absence of a javaScript callback method. There might be one but I couldn’t work out how and without a callback, CSS animations seem quite useless to me.

I also tried using CSS3 3D transforms. This looks much better than skew because the element is actually flipped – No moving the elements position, no tricks of the eye, no fakery! The problem was that JavaScript manipulation of these CSS3 3D transforms seemed to create some crazy artefacts in the picture.

Finally

Take a look at the code in firebug and see how it works. If you know how to use firebug’s console try setting the effects speed using “effectSpeed = 1000;”. This slows the animation down. Please leave your comments and thoughts below.

View Demo

The Extend Code

Bellow is the Mozilla code to extend MooTools with the Border-Radius and Box-Shadow:

var newStyles = new Hash({
     'MozBorderRadius': '@px @px @px @px',
     'MozBoxShadow': '@px @px @px rgb(@, @, @)'
});

$extend(Element.Styles, newStyles);

The WebKit code is slightly different. For some reason i couldn’t get the webkitBorderRadius to work without doing each corner individually. For more info on the differences read this

var newStyles = new Hash({
     'webkitBorderBottomLeftRadius': '@px @px',
     'webkitBorderBottomRightRadius': '@px @px',
     'webkitBorderTopLeftRadius': '@px @px',
     'webkitBorderTopRightRadius': '@px @px',
     'webkitBoxShadow': 'rgb(@, @, @) @px @px @px'
});

$extend(Element.Styles, newStyles);

The CSS3 Animation

For the animations we can now simply use the same MooTools FX and we would use with CSS2. Below is an example for FireFox:

     $("h31").set('morph', {
          duration: 300,
          transition: 'Sine:out'
     });

     $("h31").addEvents({
          'mouseover': function(){
	       this.morph({
                    'MozBorderRadius': '8px 8px 30px 30px'
               });
	   },
          'mouseout': function(){
               this.morph({
                    'MozBorderRadius': '30px 30px 8px 8px'
               });
	   }
       });

And that’s it really. Very simple to set up and the animations are smooth and stylish. The example will work on any WebKit browser including Chrome and Safari and Mozilla browsers including FireFox.

View Site

Design

The only thing I was given before this project was a logo: its rare to get such freedom when designing a website but in this case I had a blank canvas. After only one design proof the client was happy enough to let me get stuck in with the code.

View Demo

Step 1

First i download the QuickTime file opened it and exported it as JPEG images at 1 image per second. I think this produced about 72 images at 40k each.

Step 2 – FAIL!

In my first attempt i tried to show all 72 images positioned on-top of one another. When i needed a specific image I would just change the z-index. The method stank and the results were terribly slow.

Step 3 – RSI!

My next idea was to use it as a CSS sprite. I had no idea this would work but set out adding all 72 images into one very large file. I even thought of writing an app just to do this for me as it may have taken less time. Once done the image dimensions were 880px by 33840px – The problem with this is I couldn’t save it as JPEG/png/gif only TIFF which isnt natively supported in browsers. So… I did some research and found out the height must be less than 30000px to be a JPEG. Once resized and saved i was ready to code.

Step 4 – code!

The coding was simple really: i just change the background position on mouse-move and the animation is done. Take alook at the code on the demo, it’s really easy. I added a few options just in case your using a slow browser or your CPU is slow.

Step 5 – Future work

I really like the effect and might see if speed improvements can be made in canvas. I might also invest in a tri-pod and lightbox and take some stop-motion pictures of my own. I have done a few websites where this would have been great. Any further suggestions please leave them below.

View Demo

Things you need

First get Mootools (This demo uses 1.2.4) and if you want the color plugin I use in the demo you can download this from mootools more.

The JavaScript

Sorry about the mess of this: I haven’t written it to be dynamic as it was rushed out late at night. The positioning of elements is hard-coded but would be simple to adapt if i could be bothered to comment anything. So here it is:

var spacers = "";

function loadDemo(){
     spacers = $("spaceMan").getElements(".spaceOB");
     intSpace();
}

function intSpace(){
     spacers.addEvents({
          'mouseover': function(){
               if(this.getStyle("z-index") != 20){
                    this.setStyle("top", parseInt(this.getStyle("top"))-2);
               }
          },
          'mouseout': function(){
                if(this.getStyle("z-index") != 20){
                     this.setStyle("top", parseInt(this.getStyle("top"))+2);
                }
          },
          'click': function(){
               doSpace(this);
          }
     });

     spacers.each(function(item, index){
          var color = [index*40, 82, 87].hsbToRgb();
          spacers[index].setStyles({
               "z-index": 20-index,
               "background-color": color
          });
          spacers[index].set(
               'morph',
               {
                    duration: 1000-(index*100),
                    transition: 'Sine:out'
               }
          );

          spacers[index].morph(
          {
                opacity: [0, (100-(index*10))/100],
                width: 323-(index*32.3),
                height: 203-(index*20.3),
                left: 60+((index*23.5)/1.5),
                top: 80-(index*(15-(index)))
          });
     });
     setTimeout(function(){$("spaceHelp").fade([0,1]);}, 1000);
}

function doSpace(el){
     $("spaceHelp").fade(0);
     var positionOfClicked = 20 - el.getStyle("z-index");
     var topPos = 0;
     spacers.each(function(item, index){
          var zIndexi = parseInt(spacers[index].getStyle("z-index"));
          if(zIndexi == 20){
               spacers[index].setStyle("z-index", 20-(spacers.length-1));
               spacers[index].set('morph', {
                    duration: '500',
                    transition: 'Sine:out',
                    onComplete: function(){
                         spacers[index].set(
                              'morph',
                              {
                                   duration: '500',
                                   transition: 'Sine:out'
                              }
                         );
                         spacers[index].morph({
                              opacity: [0, 0.5],
                              width: [94,161.5],
                              height: [50, 62.5],
                              left: [170, 138],
                              top: [40, 30]
                         });
               }});
               spacers[index].morph({
                    opacity: 0,
                    width: 400,
                    height: 220,
                    left: 25,
                    top: 110
               });
          }
          else{
               var thisPos = 20-(zIndexi+1);
               spacers[index].setStyle("z-index", zIndexi+1);
               spacers[index].set(
                    'morph',
                    {
                         duration: '500',
                         transition: 'Sine:out'
                    });
                spacers[index].morph({
                     opacity: (100-(thisPos*10))/100,
                     width: 323-(thisPos*32.3),
                     height: 203-(thisPos*20.3),
                     left: 60+((thisPos*23.5)/1.5),
                     top: 80-(thisPos*(15-(thisPos)))
                });
          }
     });
     if(positionOfClicked == 0){
          return false;
     }
     if(positionOfClicked != 1){
          setTimeout(function(){doSpace(el)}, 125);
     }
}

The CSS and HTML

The css:

 #spaceManHolder{
   	width: 450px;
 	height: 500px;
 	margin: 40px auto 0px auto;
 	position: relative;
 }
 #spaceMan{
  	width: 450px;
 	height: 300px;
  	position: relative;
 }

 #spaceHelp{
 	font-size: 10px;
 	color: #fff;
 	text-align: center;
 	opacity: 0;
 }

.spaceOB{
	position: absolute;
	width: 100px;
	height: 100px;
	z-index: 100;
}

and the html:

<div id="spaceManHolder">
     <div id="spaceMan">
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
     </div>
     <div id="spaceHelp">
          Click The front block or try selecting
          a block from the back
     </div>
</div>

If you would like to use or add to this example please do:)

View Demo

The JavaScript

Things you will need first: Mootools (This demo uses 1.2.4) and the ScrollSpy plugin from David Walsh. Next write this for you element:

var ss = new ScrollSpy({
     mode: 'horizontal',
     onTick: function(position,state,enters,leaves) {
          $("sidePanel").style.left = -position.x+"px";
     },
     container: window
});

The CSS

In the CSS use position: fixed; because we have handled the position-x: absolute; in JavaScript. so:

#sidePanel {
     position:fixed;
     left:0;
     top:0;
     width:250px;
     z-index:1000;
}

The above example will keep our sidePanel element from disappearing when you scroll down the page but it will scroll with the page when the user scrolls right.

To do the opposite ie. position-x: fixed; position-y: absolute; In the JavaScript change mode: ‘horizontal’ to mode: ‘vertical’ and -position.x+”px”; to -position.y+”px”; and that’s it any comments, ideas or improvements leave them below.

The following steps show how i made my Halloween Logo:

Step 1: Turn your logo into a mask

To change a logo into a mask simply select the outline of your logo shape. Photoshop: (cmd/ctrl click layer); and remove the selection from a solid square of slightly bigger size. Set the mask-image’s background-color to the background-color of your website (In my case my #141414). Now save the image with a transparent background as .png (or .gif if you care about IE6). View my image

Step 2: The HTML

<div id="headerimg">
     <canvas id="bloodyMess" />
     <a href="http://www.rickyh.co.uk/"/>
</div>

So we have three elements: The holder div, the canvas element and an anchor element.

Step 3: The CSS

#headerimg {
     position:absolute;
     background-color:#141414;
     width:157px;
     height:188px;
     left:45px;
     top:30px;
}

#bloodyMess {
     position:absolute;
     background-color:#141414;
     width:157px;
     height:188px;
     z-index:1;
     left: 0;
     top: 0;
}

#headerimg a {
     position:absolute;
     background-image:url(images/logoIn.png);
     display:block;
     width:157px;
     height:188px;
     left:0;
     top:0;
     z-index:1001;
}

As you can see from the css, all the elements are positioned absolute. This is to take advantage of using z-index to position the anchor element above the canvas element. The anchor element uses the image-mask we created earlier as the background-image.

Step 3: The JavaScript

This example uses a stripped down version of Christophe Résigné amazing Starfield experiment. I also use Mootools version 1.2.4.

var blood_x_save,blood_y_save;
var drip_speed= 0.01;
var blood_drops = 500;
var star=new Array(blood_drops);
var context;
var bloodtimeout = 0;
var bloodfps= 25;

var Page = {
     initialize: function(){
     initBlood();
     doLogo();
     }
}

window.addEvent("domready", Page.initialize);

function doLogo(){
     $("headerimg").getElement("a").addEvents({
          'mouseover': function(){
               $("bloodyMess").fade(1);
               animBlood();
          },
          'mouseout': function(){
               $("bloodyMess").fade(0);
               clearTimeout(bloodtimeout);
          }
     });
} 

function initBlood()
{
     $("bloodyMess").setStyle("opacity", "0");
     var a=0;
     for(var i=0;i<blood_drops;i++)
     {
          star[i]=new Array(5);
          star[i][0]=Math.random()*157*2-78*2;
          star[i][1]=Math.random()*188*2-89*2;
          star[i][2]=Math.round(Math.random()*172.5);
          star[i][3]=0;
          star[i][4]=0;
     }
     var bloodyMess=$('bloodyMess');
     context=bloodyMess.getContext('2d');
     bloodyMess.width = 157;
     bloodyMess.height = 188;
     context.fillStyle='rgb(149,4,4)';
     context.strokeStyle='rgb(0,0,0)';
}

function animBlood()
{
     context.fillRect(0,0,157,188);
     for(var i=0;i<blood_drops;i++)
     {
          test=true;
          blood_x_save=star[i][3];
          blood_y_save=star[i][4];
          star[i][0]+=11>>4;
          if(star[i][0]>78<<1){
               star[i][0]-=157<<1;
               test=false;
          }
          if(star[i][0]<-78<<1){
               star[i][0]+=157<<1;
               test=false;
          }
          star[i][1]+=31>>4;
          if(star[i][1]>89<<1) {
               star[i][1]-=188<<1;
               test=false;
          }
          if(star[i][1]<-89<<1) {
               star[i][1]+=188<<1;
               test=false;
          }
          star[i][2]-=drip_speed;
          if(star[i][2]>172.5) {
               star[i][2]-=172.5;
               test=false;
          }
          if(star[i][2]<0) {
               star[i][2]+=172.5;
               test=false;
          }
          star[i][3]=78+(star[i][0]/star[i][2])*300;
          star[i][4]=89+(star[i][1]/star[i][2])*300;
if(blood_x_save>0&&blood_x_save<157&&blood_y_save>0&&blood_y_save<188&&test)
          {
               context.fillStyle='rgba(149, 4, 4, 0.5)';
               context.lineWidth=(1-0.005*star[i][2])*5;
               context.beginPath();
               context.moveTo(blood_x_save,blood_y_save);
               context.lineTo(star[i][3],star[i][4]);
               context.stroke();
               context.closePath();
          }
     }
     bloodtimeout=setTimeout('animBlood()',bloodfps);
}

This is the most complicated part. First I fire two functions: initBlood() and doLogo() using Mootools domready event.

initBlood() initializes the CANVAS element and the array to handle the blood. It also sets the CANVAS elements opacity to 0 because I didn’t want to view the blood until you hover over it.

doLogo() handles the hover of the anchor element. On mouseover I fade-in the CANVAS element and begin the blood effects. On mouseout I fade out the CANVAS element and stop the effects using clearTimout(); This saves on the clients CPU when the effects not in use.

initBlood() This is used to handle the blood effects. It should run at 25fps given you’re using a browser with a good JavaScript engine and that your CPU isn’t from before the millennium. The function will loop until the clients mouse leaves the anchor element.

Step 4: View the beast

To view my example simply roll your mouse over my logo. Its positioned in the top-left-hand corner.