SuperHi Video Tutorials
The best in digital design techniques, explained
Mouse move glitch collage using HTML canvas
As seen on the Azab site (or when you win at Solitaire), it's fairly straight forward to create a glitch-style collage that draws the image again and again whenever your user moves their mouse. In this video, we build up how to make a site that has a HTML canvas slideshow that reveals each image on click and has a tweening movement.
How to turn any web page into an app with Nativefier
Sometimes it'd be nice to have an app instead of a browser tab for a web service, but that site may not have a native Mac or Windows app. Using Nativefier command line tool, we can make our own app in just a few minutes!
Parallax overlapping sections using sticky positioning
On the Friends With Benefits site, there's a great effect where each section sticks to the top of the page and other sections overlap it in a parallax style. In this tutorial, we talk about how it was achieved.
In the ideology.press site, there's a floating 3d book that rotates and follows your mouse around the page. Using six flat images, we talk about how to turn those images into a digital interactive cube.
How to make a cut out design effect with CSS blend modes
On the Ways Of Knowing Cities site, there's a clever cut out style effect where the background shows through text. We talk how about to make your own similar effect, firstly using a normal design program, then by using CSS's screen blend mode.
Never miss a video!
Want to be notified of any new videos? Just drop your email address below and we'll notified you when a new one is posted
How to make an album art generator
Kanye's new album Ye was announced recently alongside a site that let you to make your own version of the album cover. In the past, my friend Simon and I made two unofficial album art generators that received several million views and mainstream press coverage. They took us 30 minutes to make each. I'll show you how we made The Life of Pablol, If You're Typing This It's Too Late and how to make your own Yenerator.
How to make reactive type as seen on the Airbnb Cereal site
How I got 181,000 followers on Twitter with 35 lines of Ruby code
In this tutorial, I talk about how to build a Twitter bot, based on the @newsycombinator bot, that scrapes content from the web and posts on Twitter hourly. We write a Ruby script which we get on to hosting service Heroku and set up to run automatically once an hour.
How to make a split screen site with sticky sides
On the Bao London site, there's a lovely design effect of the screen split in two as you scroll with one side staying in place. Today, we build a whole site from scratch using a similar technique.
One popular digital design technique at the moment is the ability to click on a site to add a new image – in this tutorial we talk about how to let users click to reveal a new image wherever the mouse is
Sticky overlays with CSS positioning
On the beautiful concreterep.com site, there's lots of clever design techniques that they use through the site. We take apart two: a floating logo and captions that sticky to photo overlays. Both effects use CSS only and are both positioning tricks.
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.
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.
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.
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.
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.
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.
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
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.
How to draw and paint using HTML Canvas
How to make a hover slideshow
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.
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.
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!
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!
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.
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.
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!
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.
How to add a simple loading screen to your site
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
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
How to make a background gradient rotate
The ustwo background changing 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.
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.
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.
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.
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.
Logo sprite animation
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
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.
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.