user profile image

Some flippage of magazines here, all in CSS. Can be a little bit glitchy sometimes when you hover over it a bunch of times and the pages can clip.


  1. awesome!!!!

  2. I have that issue :)

  3. Awesome!

  4. Awesome animation! One tiny thing... I think the background animation works better if you change background-position on .box to background-position .2s .51s ease

  5. I love this concept. Very slick!

  6. Love it! I would make the 'read more' stay where it is (or atleast make it still clickable in the same place after the transition) either way, love love love it!

  7. Good job !!!!

  8. Great idea! Very inspiring :) Thank you.

  9. Very impressive! Just wow.

  10. Very nice

  11. Love the idea! The word spot and panel on the lower page are covered up by the open magazine when the transition happens on an iPad. Very cool and smooth.

  12. Hey, I love your pen. I just had the thought .. your scss code is 247 lines of code, and the compiled version has 264. Does it makes sense to write scss, when the compiled code is only 17 lines less code? Don't get me wrong, I use a lot of scss on here, but I think I'd miss the benefit of writing scss when the compiled code isn't a lot more lines

  13. @schoenwaldnils Hey, in this case I've used scss for a different reason other than just to shorten the amount of code needed to be written. The 'make-cube' mixin is taken directly from my pens here http://codepen.io/jcoulterdesign/pen/QEyNzj and here http://codepen.io/jcoulterdesign/pen/KzYPJz which makes it super easy to build lots if basic CSS 3D cubes.

    I mean the 3d helix is 160 lines pre-processed and 1334 complied!!

    So, in this case, scss isn't shortening by much but it was really easy for me to paste in my mixin and @include make-cube(210px, 280px,10px,#FF2BA2,false,8) BOOM cube part done. Go ahead and mess with the dimensions and you'll see what I mean :)

    Could I have been more careful how I've written my scss? Probably. Could have shaved a few lines off here and there. But hey, It was fun and I was too excited to show you all :)

    Thanks for the comment :)

  14. @jcoulterdesign: Yeah its pretty neat using existing code. Makes a lot of stuff faster to code. Btw, since you use this mixin in multiple pens. Why not create a pen just for the mixin and include it in the pen-settings? Like: https://codepen.io/jcoulterdesign/pen/peRgyV.scss

    Regarding scss to css ratio: https://codepen.io/schoenwaldnils/pen/DLiyr
    scss 63 -> css 2041

    Edit: or even better :D
    scss 62 -> css 6512

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.