9 ms·

It would be nice if we had the html for some of the flip content, especially for the a/b content

by someguy101010 10y ago

purple-dragon 10y ago
Each 'card' is simply a couple of div elements. You can replicate it pretty easily by inspecting the elements.
- someguy101010 10y ago
  That is true, but if the website is meant to be used as a resource then it should be designed to be easy to use and implement instead of having to look at the website's actual source html to get a feature working
  - tekromancr 10y ago
    Wow, someguy. You're right. Fuck them for creating and giving away free _CSS_ animations because you don't like how they are packaged. Webdevs shouldn't be expected to apply CSS classes to things without handholding. /s
    - always_good 10y ago
      ...Yikes. They were giving pretty reasonable and, I dare say, obvious feedback. The site should provide an HTML snippet like just about every other demo page out there. I can't see the author disagreeing with that. You could copy and paste your "fuck them, right? /s" snark on just about every bit of feedback everywhere. I don't think that's very constructive, and it demonstrates a misreading of the parent comment.
- doc_gunthrop 10y ago
  You don't even need to inspect the elements. The code is available right there on the page by clicking the third circular icon at the top-right (the hover text says "Generate code"). Clicking on the icon `{.}` will slide out a div that contains the code for the CSS animation.
  - purple-dragon 10y ago
    You're talking about the CSS code. He's talking about the HTML structure needed to correctly apply it to 'front' and 'back' card elements.
andrewclunn 10y ago
There are a list of div objects (with the class "anim-object"). The one with the active class is the one displayed. The site uses onclick events to change the classes and stylings of the divs to trigger the events. Open developer tools or view source. It's clearly meant to be agnostic as to the triggering event for the various animations.

It would be nice if we had the html for some of the flip content, especially for the a/b content

purple-dragon 10y ago

Each 'card' is simply a couple of div elements. You can replicate it pretty easily by inspecting the elements.

someguy101010 10y ago
That is true, but if the website is meant to be used as a resource then it should be designed to be easy to use and implement instead of having to look at the website's actual source html to get a feature working
- tekromancr 10y ago
  Wow, someguy. You're right. Fuck them for creating and giving away free _CSS_ animations because you don't like how they are packaged. Webdevs shouldn't be expected to apply CSS classes to things without handholding. /s
  - always_good 10y ago
    ...Yikes. They were giving pretty reasonable and, I dare say, obvious feedback. The site should provide an HTML snippet like just about every other demo page out there. I can't see the author disagreeing with that. You could copy and paste your "fuck them, right? /s" snark on just about every bit of feedback everywhere. I don't think that's very constructive, and it demonstrates a misreading of the parent comment.
doc_gunthrop 10y ago
You don't even need to inspect the elements. The code is available right there on the page by clicking the third circular icon at the top-right (the hover text says "Generate code"). Clicking on the icon `{.}` will slide out a div that contains the code for the CSS animation.
- purple-dragon 10y ago
  You're talking about the CSS code. He's talking about the HTML structure needed to correctly apply it to 'front' and 'back' card elements.

andrewclunn 10y ago

There are a list of div objects (with the class "anim-object"). The one with the active class is the one displayed. The site uses onclick events to change the classes and stylings of the divs to trigger the events. Open developer tools or view source. It's clearly meant to be agnostic as to the triggering event for the various animations.