A really neat scroll-animation/effect, interested?

  • irestmyshowcase

    (@irestmyshowcase)


    12 years ago

    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 ??

    —————————————
    Prelude:
    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.

    —————————————
    The creation:
    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.

    One love
    Peace
    /J

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You are clearly a very creative sort, as evidenced by not only your webpage vision, but your presentation here of the issue itself. If I understand your intent correctly, this is not exactly a WP implementation per se because the content generated remains the same, it is how it is handled visually in the browser which you are addressing.

    You will certainly want to use jQuery, not only is it already implemented for WP, but accessing various DOM elements is infinitely easier than straight JS. I would initially attempt such an effect by manipulating the CSS of the various DOM elements, triggered by the current mouse cursor hover or click state, depending on exactly how you envision the focus change occurring. Start out by having this trigger doing something quite basic, even if the remainder of the page does not react accordingly.

    Keep adding various needed effects to your trigger code, working towards your goal. Keep hammering away at it, you will get it eventually. Good luck, and more importantly, have fun with it.

    Thread Starter irestmyshowcase

    (@irestmyshowcase)

    Thanks allot for your input.
    You are correct regarding the implementation. The function itself can be used to more than WP.

    I will try to read more about this method.

    Meanwhile I’ve tried out, and implemented Curtain.js
    And yes, it is right direction to the final product. Still think it is a bit slow tough, probably of the heavy images.

    I will continue update this thread for those who are interested!

    Want to contribute? Gimme a howl.

    One love,
    Peace
    /J

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘A really neat scroll-animation/effect, interested?’ is closed to new replies.

Tags