5 ms·

Show HN: Woodsly Lookbook – A parallax/animated photo book

7 points by stagecrew 12y ago

Fuzzwah 12y ago
I love the look of it, but...... First time a website has ever managed to make me feel motion sick.
- stagecrew 12y ago
  The 3d parallax-y thing, or just all of the animation? After we got to a certain point we just figured to commit to it and go nuts!
  - Fuzzwah 12y ago
    Firstly, it wasn't a dramatic "omg I'm going to hurl" thing. It was scrolling down the page pretty swiftly, basically skimming the site, and all the motion and movement caused me to feel a little "off".
    - noir_lord 12y ago
      Essentially the same thing for me I only made it half way down the page (but my eyes are tired and sleep deprived so that may not have helped).
Ryel 12y ago
Hello, Beautiful work. What is that dot you have over the images that references a product info modal. Where did that concept come from? Did you make it?
- stagecrew 12y ago
  I'm not sure where the concept came from, but it just seemed natural. The specific design was ours, but I'm sure somebody's done it before!
mkesper 12y ago
Did not get it, took ages to load. :(
math0ne 12y ago
Quick someone make a site so we can easily make galleries like that!
- stagecrew 12y ago
  I'll take one too! This took me Skrollr and week solid.. And that was after all the photos and design was taken care of for me!
devilshaircut 12y ago
Neat site! If you are looking for feedback, I noticed you were using the skrollr plugin for parallax effect; I only reviewed the code for about 50 seconds but it appears to use the top/bottom/etc CSS properties to achieve the movement effects. On my browser (Chrome Version 35.0.1916.114) running on my 2014 MBP there is some animation chop. I believe you could resolve this by using the CSS translate property instead, which would trigger GPU acceleration to better animate the effects. Alternatively I believe you could simply add the translate property set to 0 on the moving elements and it will also trigger GPU acceleration (I have been told this also works although I have not tested it myself.). It might be difficult to implement since you are using a library, but it may be worth checking out. EDIT: Grammar.
- stagecrew 12y ago
  We tried a lot of stuff and it all comes with trade offs. When we forced the entire page into the gpu it made the things you mentioned (top/bottom, etc) a lot smoother, but it made other sections (notably CSS filters) much laggier.
andybak 12y ago
In my view this pushes an idea to the point where it distracts from whatever it was trying to achieve. The effects overpower the message and branding.
warble 12y ago
This is overdone. It's like when something looks great with orange stripes, it's not okay to dress up like a streetsign. I've been really intriqued with this parallax stuff, and am including it in my wedding site I'm currently building, but this seems klunky and too much. Oh, and LOADING SCREEN. sigh

7 points by stagecrew 12y ago

Fuzzwah 12y ago

I love the look of it, but...... First time a website has ever managed to make me feel motion sick.

stagecrew 12y ago
The 3d parallax-y thing, or just all of the animation? After we got to a certain point we just figured to commit to it and go nuts!
- Fuzzwah 12y ago
  Firstly, it wasn't a dramatic "omg I'm going to hurl" thing. It was scrolling down the page pretty swiftly, basically skimming the site, and all the motion and movement caused me to feel a little "off".
  - noir_lord 12y ago
    Essentially the same thing for me I only made it half way down the page (but my eyes are tired and sleep deprived so that may not have helped).

Ryel 12y ago

Hello, Beautiful work. What is that dot you have over the images that references a product info modal. Where did that concept come from? Did you make it?

stagecrew 12y ago
I'm not sure where the concept came from, but it just seemed natural. The specific design was ours, but I'm sure somebody's done it before!

mkesper 12y ago

Did not get it, took ages to load. :(

math0ne 12y ago

Quick someone make a site so we can easily make galleries like that!

stagecrew 12y ago
I'll take one too! This took me Skrollr and week solid.. And that was after all the photos and design was taken care of for me!

devilshaircut 12y ago

Neat site! If you are looking for feedback, I noticed you were using the skrollr plugin for parallax effect; I only reviewed the code for about 50 seconds but it appears to use the top/bottom/etc CSS properties to achieve the movement effects. On my browser (Chrome Version 35.0.1916.114) running on my 2014 MBP there is some animation chop. I believe you could resolve this by using the CSS translate property instead, which would trigger GPU acceleration to better animate the effects. Alternatively I believe you could simply add the translate property set to 0 on the moving elements and it will also trigger GPU acceleration (I have been told this also works although I have not tested it myself.). It might be difficult to implement since you are using a library, but it may be worth checking out. EDIT: Grammar.

stagecrew 12y ago
We tried a lot of stuff and it all comes with trade offs. When we forced the entire page into the gpu it made the things you mentioned (top/bottom, etc) a lot smoother, but it made other sections (notably CSS filters) much laggier.

andybak 12y ago

In my view this pushes an idea to the point where it distracts from whatever it was trying to achieve. The effects overpower the message and branding.

warble 12y ago

This is overdone. It's like when something looks great with orange stripes, it's not okay to dress up like a streetsign. I've been really intriqued with this parallax stuff, and am including it in my wedding site I'm currently building, but this seems klunky and too much. Oh, and LOADING SCREEN. sigh