A really neat scroll-animation/effect, interested?
Good day World,
I have a question for those who has more knowledge than me regarding js, wp and html. It is a interesting little project.
You may skip the prelude, just scroll down 🙂
Let me put it like this.
The best creations in the world, is never made by one single person.
I’ve got an idea that we could make, and I want to provide the answer for free to anyone who’s interested, if it all works.
Maybe you want to get paid to provide the answer, but I’m broke as hell, so that’s no option.
As I am currently creating my new portfolio, and making my first wp-theme to later provide anyone, I want to make it sleek (nice).
I’m building it on the Handcrafted WP Starter Theme to get a good foundation with html5 and css3. Why Handcrafted? It seems like a good one.
The portfolio is divided in two pages. One, the photo-blog, and the other page containing the portfolio content. But this is all about the blog.
A really neat scroll-animation/effect for the web.
I’m thinking html5, so instead of div, it will be an article-tag, but that does not matter.
- 1. On load, the displaying post is fixed with full height and width of browser-size.
- 2. When scrolling down, the next post is overlapping the current displaying post, as a nice scroll effect, and takes over the ‘position: fixed;’ when in focus.
In the end it may be some pagination because it is WP.
Simple as that.
This function will also be used to the comments-field and social plugins when displaying single post. It may not use full height, but still overlapping the article as explained.
But the background of all it is a bit tricky, right?
- 1. zindex need to increase for every article-tag that is overlapping the previous post.
- 2. Of what I understand, the height of the wrap/body needs to be calculated properly, depending of how many elements that is displaying. If it always is 10 posts on every page, this may fix the problem.
- 3. And every post needs to be “cued” and wait for their turn to be displayed in the scroll-order.
JS needed to actually do it all, but where to start?
Is one of the open-source parallax scripts the solution?
Or is this ‘just a stupid idea of getting the internet to do something fantastic for many designers and developers’ and take thing to the next level?
I would love to hear your thoughts.
- The topic ‘A really neat scroll-animation/effect, interested?’ is closed to new replies.