Tribute Page -- Hirohiko Araki

Tribute Page -- Hirohiko Araki
0

#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 !


#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

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!


#5

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


#6

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


#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!


#11

Thank you Matt :smile:


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


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


#15

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

:wink:


#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


#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: