search

JaakkoLipsanen / jaakkolipsanen.github.io

Personal website, contains my cycling blog
http://flai.xyz
0 stars 0 forks source link

Better blog UI #16

Open JaakkoLipsanen opened 6 years ago

JaakkoLipsanen commented 6 years ago

Fullscreen "slide" UI?

Inspiration: https://tympanus.net/Development/DraggableDualViewSlideshow/

Could be that the whole blog UI would be "carousel" like that. Full screen images. When text comes, it is it's own slide. Text could be not-fullscreen/full-width to show the next or previous image a bit? :)

JaakkoLipsanen commented 6 years ago

I think I'm going to go with this. The home page is "slide" based (using native scrolling with CSS scroll snap points).

First slide is image carousel:

screen shot 2018-08-25 at 4 08 02 pm

Notes: should animate background-position to cover the whole image area slowly. Also has a linear-gradient that shades top and bottom

Second slide would be "Trips"/tours with a big map:

screen shot 2018-08-25 at 4 14 31 pm

Or

screen shot 2018-08-25 at 4 09 53 pm

Would be interactive, routes will be rendered and are clickable, map will focus/zoom on selected route etc. Mobile is a bit of a question mark. Also grayscale color scheme is not super nice, maybe just google maps á la bikepacking.com? EDIT: I think Google Maps is the way to go tbh

And third slide would be blog post list slide.

I was thinking that singular blog post slide could possibly be a modal. Inside the modal you could navigate to other blog posts as well. But anyways important part is to have the same shared element transition as in tommy jeans story carousel.