The Anchor Living

The Anchor Living is a website showcasing a specific piece of real estate in North Vancouver, BC. During my employment at Burst! Creative Group, I was the main developer programming the website. This complex website was built using Drupal 7 and features multiple nested sliders, interactive floorplans with a panorama view, and a draggable neighbourhood map.

Tags

  • Drupal
  • Mobile Version

Case Studies

Panorama View

Floorplans on floors 4 and up include a panorama view. The image is the same but the starting position of the view is different depending on the current floorplan.

The panorama plugin was custom-made for The Anchor Living. I created a jQuery plugin that would keep rotating the image. The image would keep rotating as long as the mouse is held onto the left and right arrows.

As this was a single-image rotation, I had to clone it and place it side-by-side so it could keep repeating.

The biggest challenge was the actual rotation. I needed to accelerate and decelerate the animation to ensure the animation was easy on the eyes. It required three different functions; accelerate on mouse down event, maintain speed on accelerate callback, and decelerate on mouse up.

Panorama View

Neighbourhood Map

A custom neighbourhood map was done for The Anchor Living. It includes nearby businesses that are all color-coded according. It is draggable with the mouse as well as touch devices.

I had to program the drag functionality. I log the mouse position on mouse down and calculate the distance as the mouse is moved. Using this information, I had to invert the position of the map in order to make it move in the correct direction.

Neighbourhood Map