I’ve spent this morning adding to my website and fixings all the problems and just playing around with it. I didn’t take a screen recording cause I thought it would end up being more boring than the last one cause a lot of my time was spent watching tutorials and undoing what I had just done.
1 – The first thing i did was make an outline version of my Odd vs Even title, I then added it to my website. When you hover over the title it changes to the outline version. I thought this was a nice little interactive feature that’ll look cool casue now you can see the whole background image. This was fairly quick and easy to do after all the trouble I had with the last hover feature.
2 -The second thing i did, I tried to make my battlezone video play as you scrolled, so that you didn’t have to click play, you could just scroll to view it. This failed miserably, as you can see by some of the screenshots, it did not work. I think the problem was that I only wanted one part of my website to have this scroll feature and it didn’t like that so I ended up scrapping that idea. So its the same as before, you need to click to start it (it is not allowing me to make it play automatically) but then it loops fine and I’ve made it so it is a seamless loop.
3 – Thirdly, I made a quick and simple gif of the Fibonacci sequence spiralling and zooming. I added this to the divider part between the about part and the Odds. Before it was just an image dividing them but the gif now adds some movement, its on a very low opacity of 20%, so it is just noticeable.
4 – I was having issues with my back to top button, whenever it was clicked it would take you to the top and open the menu which got really annoying, but I managed to sort it out. Initially whenever I tried to fix it, either the menu or back to top button stopped working but they both work now and I’m so happy.
5 – PARALLAX ! I added a parallax feature to my website but yoh did this take long. You can see in the screenshots, whenever I tried to add a parallax to my characters they became massive and my text layout changed a lot. I think the images enlarged because the pngs were big and there was something disrupting the scale that was applied to it. Eventually I realised that in my Menu code there were tags which talked to ‘Unordered lists’ and ‘list items’ directly and so when I tried to parallax something, these things were effecting the images. I ended up changing the tags and the problem was sort of fixed, but not entirely. I decided to just add the parallax to the headers and the text. For the headers I made the data-depth 0.05, so that this is only a slight movement and for the text the data-depth is – 0.2 so there is more movement and it moves the opposite to the header (and mouse).