Tribute Page -- Hirohiko Araki

Tribute Page -- Hirohiko Araki


I decided to host this on gh-pages instead of code pen as I enjoy working with this quite a bit more. I built this using raw CSS and HTML alongside jQuery for the fade in effect. My goal was to complete this with as little use of a framework as possible. Though because I do not know much Javascript, I stuck with pre-defined functions from the jQuery library :slight_smile:

Anyway, here it is :
Tribute Page

Any feedback is much appreciated !


I would just make the long story shorter. From UX point of view, at least for me, its too much scroll down to reveal the timeline. I like the “lazy loading” you have used with that fade in animation.


That’s a good point, it was getting pretty tedious to make as well. I will cut it down more, thank you :slight_smile:


This is a beautiful tribute page!


Quite impressive. Too much scrolling, as already mentioned. A typo in one occurrence of the word ‘Louvre’.


Will Jquery animate the element applied with the animation once it is in the viewport? or did you do something else?


Thank you very much :smile:


Thank you :smile: ! and thanks for catching that spelling mistake.


That’s exactly what I did :slight_smile:


I really liked how each year and content popped up as you scrolled. I also like the color scheme too. A pretty creative Tribute Page. Great job!


Thank you Matt :smile:


You absolutely need to add a static button on the right side that takes you back to the top. You should also create header and footer areas. I would also make the text a little smaller.


Hey ! Thank you :slight_smile:

I completely agree, trying to scroll back up is annoying. Headers and footers are also great idea’s.


Lovely page :grinning: I like the whole concept.


Really beautiful tribute page.
I agree with the long timeline.
Also, the last 3 images did not load for me.



Nicely done!

I just thought I’d mention that when viewed in Firefox, Edge and Internet Explorer 11 (at least on my PC), your fade-in effect appears to have something of an issue when the page is scrolled quickly, where instead of each timeline div fading into view, they flicker/flash into view prior to fading in. And this doesn’t seem to happen in Chrome.

I wish I had a better suggestion as to a solution (I’m just learning the ropes myself), but what appears to be happening is that when you scroll down quickly, each div momentarily appears with an opacity value of 1 instead of 0, before being set back to 0, then fading up to 1 again.

Unwelcome news, no doubt! (But it hope it helps.)



Good catch!
I’ll have to change this asap :slight_smile:

As for all the other changes, if people are still interested I’ve implemented all of the feedback so far, hopefully :stuck_out_tongue: Thanks again to everyone who gave their comments and feedback :smiley: