Tribute Page -- Hirohiko Araki

Code Feedback
1

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 !

5 Likes
2

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.

3 Likes
3

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

4

This is a beautiful tribute page!

1 Like
5

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

2 Likes
6

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

1 Like
7

Thank you very much :smile:

8

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

9

That’s exactly what I did :slight_smile:

10

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!

1 Like
11

Thank you Matt :smile:

1 Like
12

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.

1 Like
13

Hey ! Thank you :slight_smile:

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

14

Lovely page :grinning: I like the whole concept.

1 Like
15

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

:wink:

1 Like
16

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.)

Denis

1 Like
17

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: