Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.

Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.
READ MORE

Triggering a ‘finish’ event on an external video with Storyline HTML5

If you have at some point needed to use Articulate Storyline – you have probably come to a point where you want to murder everyone around you (not literally of course!) due to its ridiculous, quirky limitations. More often than not I find myself hacking the published code to make things works how I want.

One of the big limitations in Storyline is video – if you want to trigger something when the video starts or finished you must use the built in player. But the built in player cannot load videos from an external site (such as a streaming server – a common requirement) so you are left with using the ‘video embed code’ option, which doesn’t seem to allow custom embed codes – all I could get to work was YouTube and Vimeo. And even if you can get this to work you can’t add triggers to it for when the video ends.

I found a little hack which uses the Web Object and a custom video player in a HTML page. You can listen for the video complete event in the custom player then change a variable in the Storyline player. Then in Storyline add a trigger for when that particular variable changes, which will be when the video finishes.

Here’s how to do it.
READ MORE

CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

Here is a live demo of the grid:

READ MORE

CSS Hexagonal packed grid

Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between a square and a hexagonal packed grid:

packing

View demo

 

READ MORE

Inspiring Inspiration #15

A collection of cool video, motion graphics and interface design.

READ MORE

A LESS mixin for a transition with a prefixed transition-property

The most common mixin you will find in LESS for CSS3 transitions is something like the following:

1
2
3
4
5
6
7
.transition (@prop, @time, @ease) {
    -webkit-transition: @prop @time @ease;
       -moz-transition: @prop @time @ease;
        -ms-transition: @prop @time @ease;
         -o-transition: @prop @time @ease;
            transition: @prop @time @ease;
}

The proplem with this is that if you want to transition a property that requires a prefix such as transform:

1
.transition(transform, 0.5s, ease-out)

You will end up with:

1
2
3
4
5
-webkit-transition: transform 0.5s ease-out;
   -moz-transition: transform 0.5s ease-out;
    -ms-transition: transform 0.5s ease-out;
     -o-transition: transform 0.5s ease-out;
        transition: transform 0.5s ease-out;

This is not what you want, you need to have the transition-property prefixed as well as the transition. Below is a mixin that I came up with that will solve this problem:

1
2
3
4
5
6
7
.transitionPrefixProp (@prop, @time, @ease) {
    -webkit-transition: e("-webkit-@{prop}") @time @ease;
       -moz-transition:    e("-moz-@{prop}") @time @ease;
        -ms-transition:     e("-ms-@{prop}") @time @ease;
         -o-transition:      e("-o-@{prop}") @time @ease;
            transition:                @prop @time @ease;
}

Which will output:

1
2
3
4
5
-webkit-transition: -webkit-transform 0.5s ease-out;
   -moz-transition:    -moz-transform 0.5s ease-out;
    -ms-transition:     -ms-transform 0.5s ease-out;
     -o-transition:      -o-transform 0.5s ease-out;
        transition:         transform 0.5s ease-out;

This is kind of a brute force approach by adding all prefixes regardless of whether they are required, but it does work well.

Nobody Tells This To Beginners

This little video by Saar Oz of Creavite has a great message and some fantastic animation – check it out below.

Accessing command line arguments with Grunt

I needed to be able to set up a watch task with Grunt to only watch a specific client sub directory. This directory would change depending on the client I was working on and new clients were constantly added so I need a way to watch the specific client that I was working on only, without hard coding all the clients into separate tasks. The only thing I could think of doing this was to pass some sort of parameters when starting the watch task.

This is how I set it up. It might not be the best method but it works for me.

First I had to set a value in the grunt configuration, which would be taken from the command line args. With Grunt you can get them them using:

1
grunt.option('someCommandLineArg');

You can also set a configuration value using:

1
grunt.config.set('myValue', 'someValue');

So combining those two methods, the following will get a command line arg called “watchDir” (and assign a default value of src if it was not specified) and set it in the grunt config. I added this line after initConfig in my Gruntfile:

1
grunt.config.set('watchDir', grunt.option('watchDir') || 'src');

You can then access this property using a template string in your task:

1
2
3
4
5
6
watch: {
      less: {
        files: ['clients/<%= watchDir %>/**/*.less'],
        tasks: ['less']
      }
}

When running the Grunt task, we can specify the option “watchDir” by adding two dashes in front and setting it equal to the desired value:

1
grunt watch --watchDir="clientX"

The watch task above would in this case watch the following directory:

1
'clients/clientX/**/*.less'

This allows you to set up a generic task that can be pointed to different directories when it is started.

Local AJAX calls with IE11

Here is a little snippet to get local AJAX (with jQuery) working when running content locally in IE 11. Local content is not allowed to use the XMLHttpRequest but it can use the proprietary ActiveXObject, so this tells jQuery to always use the ActiveXObject if it’s available.

I needed to use this to run local content on a Surface RT which doesn’t have IIS or any other browsers. This allowed me to run content that relied on AJAX from the desktop in IE modern.

1
2
3
4
5
6
7
8
9
10
11
$.ajaxSetup({
    xhr: function()  {
        if ('ActiveXObject' in window) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        else
        {
            return new XMLHttpRequest();
        }
    }
});

Slide transition effects with CSS

Here are some slide transition experiments I created using CSS.

View Demo

You can view the source of the demos to see how they were made. They have all been tested and work in all the latest browsers – Chrome, Firefox, IE 10+.

There are 6 in total:

Card fall
t1
Card fall forward
t2
Carousel 3D rotate
t3
Cube rotate
t4
Scale and fade
t5
Vertical 2D Carousel
t6