Project Creative Technologies
The assignment
We were given a list of technologies to choose from. We had to pick one of them which we hadn't worked with before. After studying and exploring the technology we had to build an (interactive) application with it.
Motivation
I picked GreenSock as the technology I wanted to master. In the future I would like to work in webdesign and development. GreenSock is a tool to make the web a more interactive place. That's what I like the most about it.
Next to that I also enjoyed the idea of working more with HTML, CSS and JavaScript while working with GreenSock.
Take a look at the video to see what I've made. There is some extra info below the video as well.
API
In order to spice up with my website I decided to include data from an API. I thought long and hard about what I could integrate until I heard that Unsplash has an API you can use. This meant I could circulate through the photos I like and show them on my new website.
Implementation
First I created a collection on their website, I also registered my application. Next I went through their documentation to see how I could get a random photo from my collection.
As the header section already had quite a few animations I didn't want to add photos in a slideshow. The API would only be called when someone loaded the website.
The Unsplash API gives you a lot of possibilities to fetch and use their photos, it also includes an option for my usecase.
In the AJAX call you can detect if the request was successful or not. In the case it was successful got back the imagedata which had a lot of parameters in it. To be able to show the image I added it as a background-image CSS property.
If the request failed for whatever reason, e.g. Unsplash was offline, then I still want to show an image. In that case I would set the background-image property to a default picture.
Useful links
