SuperHi supports net neutrality.
Help stop ISPs from messing up the internet.

SuperHi Video

Hooking up page scrolling with fading with Javascript

Hooking up page scrolling with fading with Javascript

We explain how to make design elements fade in and out based on the current scroll position of the page, as seen on the Sweet Studio website

10:25

How to make design elements interact with mouse movements

How to make design elements interact with mouse movements

In this video, we talk about how to make arrows rotate to point at the mouse cursor

15:05

How to make a background gradient rotate

How to make a background gradient rotate

On Rik's website, the background of the whole page rotates very subtly. We can't do this with Javascript as gradients are background images so we show you how to fake it with Javascript.

4:38

The ustwo background changing hover effect

The ustwo background changing hover effect

This week, we look at how to make other parts of the page change on hover. With CSS we can only change the tag or inside the tag on hover, but with a bit of Javascript, we can change completely different parts of the page.

17:29

Playground Paris colorful text hover effect

Playground Paris colorful text hover effect

The new site from Playground Paris has a really nice hover effect on its text. We wanted to show how it was done.

7:46

The revealing footer effect

The revealing footer effect

The revealing footer effect is seen on quite a few websites, such as Pitchfork. It's an easy technique to add to your own site using CSS's fixed positioning.

11:08

Git and Github

A few people have heard of Git and Github but don't really know how they work and what they do. Lawrence and Rik go over an introduction to both of them.

16:09

The parallax effect

The parallax effect

On the Firewatch website, there's a lot of layers that scroll at different speeds to make a beautiful effect – this process is called the parallax effect and we wanted to go into some details about it.

8:02

HAWRAF site scrolling

HAWRAF site scrolling

Our friends at creative agency HAWRAF launched their new site recently. We wanted to show how the side scrolling effect they're using works.

6:54

Logo sprite animation

Logo sprite animation

A few people have asked how do we make the logo move on our site. It's not a special Javascript thing but instead using CSS and one long image strip.

9:42

Get Coleman

Get Coleman

This week, freelance copywriter Joe Coleman launched his new site called Get Coleman. We talk about how it was made and how to make your own

7:04

Untitled Sans

Untitled Sans

New Zealand font foundry Klim Type Foundry released a site for their new fonts, Untitled Sans and Untitled Serif. We show you how to make the launch site.

7:04

Barron Webster but with text

On the last video, we spoke about how to make the Barron Webster site, this time we show you how to make it not with images, but with text.

9:56

Barron Webster

Barron Webster

Today, we talk about how to use "mousemove" in Javascript to make the effect as seen on Barron Webster's site

12:47