SuperHi Tutorials

Pixelated image lazy loading effect as seen on Teenage Engineering

Pixelated image lazy loading effect as seen on Teenage Engineering

In this tutorial we look at how to build the image lazy loading effect used on the Teenage Engineering site. We'll start with a lo-res pixelated image before replacing it with the full-res version.

8:19

Playing and pausing a video on hover

Playing and pausing a video on hover

On webpages like the Animade portfolio, they're using an effect where, instead of using an animated GIF, they're using a video that plays when your mouse goes over it, and pauses when your mouse moves away. This play and pause effect is pretty simple to add into any site.

5:19

How to make rotate text in CSS

How to make rotate text in CSS

Today, we talk about how to add the graphic design technique of having text around the edges of your page. Using a quick rotation and setting the origin for the rotation, we can place text as we want it quickly and easily.

7:23

Venue – Part 5 – Editing and deleting posts

Venue – Part 5 – Editing and deleting posts

In the final part of our mini-series, we talk about how we edit a post using Rails's edit and update actions and then add a way to delete the posts if needed.

12:43

Venue – Part 4 – getting your code live and hosted with Heroku

Venue – Part 4 – getting your code live and hosted with Heroku

In part 4 of 5 of our series, we talk about how to get your Rails code from just being on your computer to being hosted by Heroku where everyone in the world can view your work. We talk about how to use Git to deploy our code and making your code's configuration safe with secrets.

14:15

Venue – Part 3 – Adding styles to our site using Sass

Venue – Part 3 – Adding styles to our site using Sass

In part 3 of our five part series, we add styling to our Venue site using Sass (think CSS but upgraded!) and talk about Rails's application layouts.

9:24

Venue – Part 2 – Adding images to your site with Amazon S3

Venue – Part 2 – Adding images to your site with Amazon S3

For part 2 of our five-part series, we add image uploads with resizing to our site using Carrierwave (a Ruby 'gem', a.k.a. a library for adding functionality) and a place to store the images, Amazon S3

13:49

Venue – Part 1 – how to make a web app from scratch

Venue – Part 1 – how to make a web app from scratch

In this 5-part series, we talk about how to make an image bookmarking web application using Ruby on Rails, Sass, Git, Amazon S3 and Heroku. If you've ever wanted to make your own custom web software, this is the series for you.

25:58

How to draw and paint using HTML Canvas

How to draw and paint using HTML Canvas

A few sites let you draw all over them but how? We talk about how to use the <canvas> tag and Javascript together to let your visitors draw all over your site!

19:41

How to make a hover slideshow

How to make a hover slideshow

On the On The Rocks Magazine site, there's a great slideshow effect which changes slide depending on how far across the slideshow your mouse is. We talk about how it's done with a tiny bit of CSS and Javascript

12:12

How to use the logistic curve to improve your animations and transitions

How to use the logistic curve to improve your animations and transitions

In this follow up video, we talk about how to use a little bit of mathematics to temper your visual effects to make them more smooth.

7:10

Skew on scroll effect

Skew on scroll effect

The new site by Lionel Durimel has a great visual effect where if you scroll up and down the page, the content will slightly skew to add a new motion to it. We talk about how to achieve this effect.

9:11

Card flip using CSS transforms and perspectives

Card flip using CSS transforms and perspectives

In this follow-up video, we talk about how to add a card flip on hover to see the 'back-side' of a tag – it's in fact two layers with one rotated away from our users!

5:59

3d perspective effect in CSS and Javascript

3d perspective effect in CSS and Javascript

Using CSS's transform and perspective rules, we can make a moving card effect that follows the cursor around the page. When we move left and right, twist around the y-axis and when we move up and down, twist around the x-axis!

11:20

Overlapping layouts with CSS Grid

Overlapping layouts with CSS Grid

In our series of videos on the new CSS Grid layout, we talk about how to make a grid with overlapping images in a modern fashion portfolio.

10:53

Introducing CSS Grids

Introducing CSS Grids

A brand new CSS layout system called CSS Grid is slowly being introduced to the web. It's a two-directional layout system, unlike most other layouts like flexbox and floats. In the first part of a series, we explore the power of CSS Grid.

8:01

Custom cursors and pointing at a point

Custom cursors and pointing at a point

In a previous video, we talked about how to make arrows point at your mouse cursor. This time, we flip it around and make your cursor an arrow that points to a particular spot on the page!

13:27

How to make a navigation with a spotlight hover effect

How to make a navigation with a spotlight hover effect

Today, Lawrence talks about how to make a spotlight effect using CSS based on the Victorian Opera new website.

4:28

How to add a simple loading screen to your site

How to add a simple loading screen to your site

In this video, we add a simple loader to a site using a full-screen fixed-positioned tag, CSS animation and a splash of Javascript

12:12

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