WEBGL Background Scroll Spirals

WEBGL Background Scroll Spirals

Using Xoihazard's original tutorial I wanted to use the technique to display editorial content in an engaging way. Besides just being an awesome background, the effect brings flow within the article and to the reader. 

I'll cover how I went about creating Dark Sounds: Trent Reznor and the different elements used. 

 

WEBGL/REGL

Xoihazard lays out the overall structure of the background which can be pretty easily implemented. The element itself is built of a light-weight WebGL wrapper called regl. The only major issue I had in the setup was making sure the image file for scroll spiral was based off the same server location/url. Otherwise the console will come back with a cross-domain error. So unfortunately this cannot be implemented on the squarespace platform (hence the alternate url). 

The one major dynamic I wanted to alter was the speed of the transformation. Which you can find on this line: 

vec2 center = vec2(sin(TWO_PI * time * 0.2), cos(TWO_PI * time * 0.2)) * nsin(time * 0.3) * 0.5;

Simply lay around altering the numbers and see what fits for you. 

You'll also need to use an image to base the spiral off of. I went the easy route and grabbed same one Xoihazard did from Creative Market. I'm sure you can do some really cool stuff playing around with the different images used. 

 

GLITCH TEXT

For the opening text and headers I used a "glitch" effect from Lucas Bebber 

See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.

You'll need to change the background in the CSS depending on your page layout. 

HTML 5 Videos

I really enjoyed The Atlantic's Jaguar Campaign and the use of looped html 5 video to grab attention from the audience. So I wanted to adopt something similar. Because of Trent Reznor's striking live performances and videos this was fairly easy. I used Ryan Bonnell's original coding to perform a loop of the video and simply grabbed youtube content into a light weight mp4. 

See the Pen HTML5 Video Looping Example by ryanjbonnell (@ryanjbonnell) on CodePen.

 

BACKGROUND DISTORTED TEXTURE

So I stumbled upon Destroyer's site one day and immediately fell in love with the gritty texture. To replicate it I simply used the texture Otis Redding from transparenttextures.com

 

SOUNDCITE

Check out my earlier tutorial to see how I implemented the soundcite element into the page. 

 

That's pretty much it! The site itself is incredibly light weight and from the feedback I've received it does pull the reader in. Although, I have noticed more people have been interested in scrolling up and down the page rather than reading the article...so that's something to think about. 

Enjoy!

Using Soundcite's Inline Audio Tool for Digital Storytelling

Using Soundcite's Inline Audio Tool for Digital Storytelling