Although the hand-in for the previous project happened on Wednesday and we have moved on the next task, I decided to return to my redesign of victorianweb.org today because I wasn’t satisfied with the way the pages loaded when viewed online rather than locally.
The content and article pages slide in from side / bottom using the CSS3 transform-animation, function. However I found that the animation was happening before all of the img components that make up the cardboard style folder loaded.
After a bit of research on W3 Schools and StackOverflow I thought this would be a fairly quick and simple task by adding the animation-delay function, adding delay to the animation to give the img components chance to load first.
However, it turned out to not to be a simple task at all, and I spent most of the day trying to get the delay function to work properly. The delay function worked as expected except for the fact that the content/article would disappear as soon as the animation had finished, which hadn’t been an issue before the delay was added.
I decided to isolate the slide function into some raw code, and have a play around with animation/delay functionality without the clutter of code of the project code. However, it still suffered from the same issue.
The result of the practice code can be seen here: http:/www.onebigegg.com/college/delay_practice.html This little disappearing red box has been the tyranny of my Sunday!!!
I posted a query to Stackoverflow.com, and somebody did suggest that I add an ‘animation-fill-mode: forwards;’ command to css but this only seemed to work with Firefox.
In the end I decided to scrap the idea of trying to use CSS3 functionality to achieve the sliding transition and instead try to incorporate a jquery function so that only one page is loaded and the content and article slide in from a jquery command – and it worked – phew!
The result can be seen at http:www.onebigegg.com/college/victorianweb.html
I haven’t incorporated the commands into the category links – I have just linked them to two buttons at the bottom of the categories as I want to move on from this project now that I know that it functions OK. However, I know that it’s going to bug me not being quite complete and no doubt I’ll try to link the slider commands into the <a href> links later in the week…..