Web Lab Collection

Ok so I have just done a quick impromptu page for Web Labs. I will edit the page shortly and come up with a better layout, but my aim is to get a collection of other peoples web labs, test, experiments, playground folders.

We all have some place that we put our experiments and more people now are turning to services like codepen.io, jsfiddle etc. I just think it would be great to have the more personal list of labs.

If I can get 20 labs I will release the link to my own labs page that just has such random stuff in there. I once did a mashup that merged HTML5 Voice Recognition, JSONP (running through a PHP proxy that retrieved XML), Alice Bot and Google Translation to get an AI that I could talk to and it would talk back to me…

What cool things have you worked on? Want to share your labs let me know in the comments on here or here.

1 Like no Other Launched

Remember how I posted that Sneak Peek back in September? Well it was for our latest launched website 1 Like no Other! Why not check it out and then come back and read the rest of this article?

I don’t usually do write-ups on the sites that I have worked on but I enjoyed this project so why not.

The homepage for this site has gone through 4 different version that include a CSS3 animated intro, a HTML5 Book where you can click through each page and even a Flash version of the above in hopes that it would be faster to download on slower connections.

1LNO Homepage

The end version the client went for was a subtle parallax effect which works great! It gives you the ability to see all of graphics and illustrations for this seasons clothing. It went through many different revisions and many different layers (9 layers at one point) just goes to show that more is not always better.

1LNO Listing page

The product listing page was also fun to create for this project. The main filter system is pulled in through Ajax to reduce page load and to provide a nicer experience when navigating, who wants a page refresh anyway?

Once an Ajax request is finished all of the products animate to their new locations. This is a great effect and I hadn’t done anything like this before so it was great to learn something new at the same time. Most of the text that is on and around the site in a custom font called Paulson which works really well and is placed on with Cufon.

1LNO Product page

The product page was another nice one to do. I added some subtle animations to the alternate images and to the add to basket just to catch the users eye when they first navigate to it.

We went through a few versions of the carousel at the bottom of the page aswell. This went from a simple left and right carousel, to just one large image in the middle that was more like a zoom of item underneath it. The end version is definitely better and uses the jQuery easing plugin to give the animations a smoother transition.

When the product page was first made we just had a standard zoom on hover effect so that a potential customer could see the detail of the shirts. We found that this didn’t show enough though, instead I created a custom full page zoom to really show them off.

Custom product zoom

Well that’s the main pages of this ecommerce build but I have included more images below for you to look at. Let you know what you think in the comments or even go check out the website for youself and have a look around 😉

Sneak Peak

A sneak peak of what I’m working on here at work. I’m having to animate everything but as you can see this has rotations, which are always fun to try and implement into older browsers.



Luckily I found some great plugins for jQuery that make the job a lot easier.

jQuery Transform
https://github.com/heygrady/transform/
This plugin uses CSS3 transforms if they are supported and if not then relies on the matrix filter for IE8 and below meaning it allows you to transform layers all the way down to IE6 and gives you loads of options like


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Go Crazydd
$('#example').transform({
    matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
    reflect: true, //same as rotate(180deg)
    reflectX: true, //mirrored upside down
    reflectXY: true, //same as reflectX + rotate(-90deg)
    reflectY: true, //mirrored
    rotate: '45deg', //rotates 45 degrees
    skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
    skewX: '10deg', //skews 10 degrees on the x axis
    skewY: '10deg', //skews 10 degrees on the y axis
    scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
    scaleX: 1.5, //scales by 1.5 on the x axis
    scaleY: 1.5, //scales by 1.5 on the y axis
    translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
    translateX: '20px', //moves the transformation 20px on the x axis
    translateY: '20px', //moves the transformation 20px on the y axis
    origin: ['20%', '20%'] //changes the transformation origin
});

jQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/
When animating things its always nice to have more easing options that the standard ‘linear’ or ‘swing’. jQuery Easing gives you around 32 extra easing’s to make your job easier. It also allows you to setup your own custom easings.