Mouse Parallax

In the fifth installment of my Parallax deep dive, I discuss how to use mouse movement to apply a parallax effect. Using the same plugin exporting layout data from Illustrator that I discussed in Episode 3. Then we use mouse events to adjust the offsets of our content. We also use Greensock’s TweenMax to apply Mouse Parallax

Scrolling on a Path

In the fourth installment of my Parallax deep dive, I discuss one technique to animate elements along a complex path. I discuss how to use an SVG path created in Illustrator to define an animation path for our element. We leverage Greensock’s TweenMax and it’s bezier plugin to animate along this path. Then we tie Scrolling on a Path

Fixed Canvas Backgrounds

I’ve talked a bit about separating our semantic and non-semantic content within websites. We can take our rich non-semantic content and throw it onto a canvas. This provides a number of benefits, cleaning up our markup, reducing DOM elements and optimizes performance. I’ve put together some examples of how this can be used in both Fixed Canvas Backgrounds

Advanced Parallax

In the third installment of my Parallax deep dive, I go into how to implement more advanced parallax on elements that are further down the page. We explore some more advanced calculations to get specific results based on scroll position at a target point within the viewport. I also utilize canvas to show how we Advanced Parallax

Basic Parallax

In the second installment of my Parallax deep dive, I go into how to implement basic parallax on the web. I also discuss some other things to consider when implementing parallax. We cover the formula of how to offset positions based on an offset, multiplied by the scroll position. newY = scrollY * offsetY; We Basic Parallax

Parallax Deep Dive

Welcome to the first part of my deep dive into parallax. In this part we’re going to talk about what parallax is, how it relates to the web, and whether it’s just a fad. You’ve probably experienced this phenomenon driving in a car looking off towards the horizon. The further away an object is the Parallax Deep Dive

Three.js Geometry

Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your own custom geometry by defining these vertices and faces yourself, but Three.js also has a variety of common shapes for Three.js Geometry

Three.js Getting Started

Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js. The Renderer The first thing we need to do is create a renderer. Because Three.js supports multiple renderers we Three.js Getting Started

Three.js Introduction

Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on the Papervision 3D library. Originally it was created as a renderer agnostic API with a 2D Canvas and SVG Renderer. Three.js Introduction

Three.js Models Update

In my post on Loading Models in Three.js I was using version 79. Three.js is now at version 100 and some changes have been made to how models are loaded. In this video I describe how to export glTF models from Blender and import them into Three.js. You can read the documentation on loading models Three.js Models Update