The start of the video is simply the logo animation with no links. The links and a gradient background come in once the logo has cleared and then the rest of the interactions are activated.

The start of a match in the homepage video on easports.com

Here you can see Rory winding up to take his swing. This is part of the homepage video on easports.com.

With Odell Beckham Jr winning the cover for Madden 16 he takes his place as the overtaking image for that game. I really wanted it to be Gronk.

When you hover on a specific game you get an overlay of a key piece of art. In this case it was the cover art for the new Rory McIlroy PGA TOUR game due out in July 2015.

Here in the closing shot of the easports.com homepage video you see Russel Wilson raising his arms in triumph

For this project I was given the art and UX and needed to take that and create the visual representation on the page that would be used for the homepage of easports.com. This primarily used html5 video for the background element and then javascript to handle the overlays. Before moving into some of the more complex conditions I had the first version working with javascript only being used to run the background video, everything else was carefully crafted css selectors and pseudo selectors.

The mobile experience for this was different of course due to the limitation against having background videos on a mobile device. For that we used the background image seen on the desktop view and added a Ken Burns effect to give it some life. This is also one of the few page templates on the site that includes a specific layout for tablet devices.

The goals for this redesign of the homepage were to get the user into their target game quickly so they could get to the meat of what they really were there to do and not linger on the homepage where there used to be postings from all games in a mosaic type layout. Overall the goals set for this redesign were all met. Since launching this page the video and content has already started to evolve which was planned. As new games launch or have new major announcements, like announcing the cover athlete for Rory McIlroy PGA TOUR, that game could get shifted to the top for more prominence before moving back to where it would belong in the normal stacking order.

Home

First Content Block

Scrolling advanced Rory though his swing

An example of where I needed to modify the art to fit the content

Buy page

For this project I worked with two other developers to create this experience that was used by marketing to announce the new game’s release date and cover athlete. This architecture of this page was structured in such a way that all three developers were able to work on it simultaneously without conflicting on our code. This project had a tight deadline and the team pulled together well to get it launched on time and other sports teams were interested in having a version on their site almost immediately after launch.

I specifically worked on the side rail elements and the pre-order page at the end. I also worked with Art to get the final assets in place and had to create or modify some of the new assets so that everything would work with the from art and the content from the Content Managers without causing any visual bugs when assembled.

I had a desire to use Elevator.js for the scroll to top action but was unfortunately denied for probably obvious reasons.