Pictured above is my wife on our Honeymoon in Cabo san Lucus during the Sharks playoff run in 2014. We brought along our Sharks Territory sign, but it didn’t help much with the crushing loss of that year. But now they’re back in the heat for the cup and I’ve taken my fandom and combined it with some front-end projects to create some Sharks Playoffs coding adventures.
Sharks Logo in CSS
See the Pen San Jose Sharks Logo by Anthony Skelton (@ajskelton) on CodePen.
The first project was to make the San Jose Sharks Logo in HTML and CSS. This was the first time I did a CSS art project and it took a different way of thinking to accomplish. I started with the triangle and then began to create layers of shapes to create the shark. The teeth gave me the hardest time. Using a lot of linear-gradients I was able to create the jagged look and then reverse it for the other side.
I’m really happy with how the logo turned out, but I don’t think I’ll do another project like this for awhile. The pen was very well recieved, and was featured on the front page of Codepen.
Player Cards
See the Pen San Jose Sharks Material Cards by Anthony Skelton (@ajskelton) on CodePen.
I started working with the Material Design elements and wanted to make cards for each of the 2016 roster with their stats. I started by building one card using images and stats from the Sharks website. After I had one built I didn’t want to code out the HTML for each and every card so I built a JSON file with all of the players name, numbers, images and stats. Normally I would use an API to grab this info but I couldn’t find one that had public access. Then I looped through the JSON file creating each card. Now that they’re onto the finals I hope to update this with the playoff stats and perhaps add some animation to reveal the stats.
Power Play Chomp
See the Pen Sharks Chomp by Anthony Skelton (@ajskelton) on CodePen.
When the Sharks go on a Power Play the fans with do a “Chomp” with their arms. With a 27% Power Play in the playoffs they’ve been doing a whole lot of chomping so far. I built this pen at the beginning of the Conference Finals when they took on the St. Louis Blues. The hashtage the team came up with was #SilenceTheBlues so I used this in the text that the teeth are chomping on. I built the text with variables so you can easily update the two sets of text.
For the animation I have the text moving at the opposite direction and speed of the teeth so that they remain stationary in the center. I also use a step-start timing so the text changes instantly when the teeth are fully closed.
More to come
With the Stanly Cup Finals starting on Monday I’ve got some more time to update and work on more pens. Go Sharks!