{"id":318924,"date":"2020-08-13T07:45:19","date_gmt":"2020-08-13T14:45:19","guid":{"rendered":"https:\/\/css-tricks.com\/?p=318924"},"modified":"2020-08-13T07:45:20","modified_gmt":"2020-08-13T14:45:20","slug":"stacked-cards-with-sticky-positioning-and-a-dash-of-sass","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/stacked-cards-with-sticky-positioning-and-a-dash-of-sass\/","title":{"rendered":"Stacked Cards with Sticky Positioning and a Dash of Sass"},"content":{"rendered":"\n<p>The other day, I spotted this particularly lovely bit from <a href=\"https:\/\/corey.ginnivan.net\/\" rel=\"noopener\">Corey Ginnivan\u2019s website<\/a> where a collection of cards stack on top of one another as you scroll.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-video\"><video controls muted poster=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-12-at-4.11.47-PM.png\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/08\/corey-stacked-cards.mp4\"><\/video><\/figure>\n\n\n\n<p>I started wondering how much JavaScript this would involve and how you\u2019d go about making it when I realized \u2014 <em>ah!<\/em> \u2014 this must be the work of <code>position: sticky<\/code> and a tiny amount of Sass. So, without diving into how Corey did this, I decided to take a crack at it myself.<\/p>\n\n\n\n<p>First up, some default styles for the cards:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">body {\n  background: linear-gradient(#e8e8e8, #e0e0e0);\n}\n\n.wrapper {\n  margin: 0 auto;\n  max-width: 700px;\n}\n\n.card {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  border-radius: 10px;\n  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);\n  color: #333;\n  padding: 40px;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"731\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=1024%2C731&#038;ssl=1\" alt=\"\" class=\"wp-image-318930\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=1024%2C731&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=300%2C214&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=768%2C548&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=1536%2C1096&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?resize=1000%2C714&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-08-at-3.50.19-PM.png?w=1956&amp;ssl=1 1956w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Next, we need to make each card sticky to the top of the wrapper. We can do that like this:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.card {\n  position: sticky;\n  top: 10px;\n  \/\/ other card styles\n}<\/code><\/pre>\n\n\n\n<p>And that leaves us with this:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/08\/card-sticky-1-1.mp4\"><\/video><\/figure>\n\n\n\n<p>But how do we get each of these elements to look like a stack on top of one another? Well, we can use some fancy Sass magic to fix the position of each card. First we\u2019ll loop over every card element and then change the value with each iteration:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@for $i from 1 through 8 {\n  .card:nth-child(#{$i}n) {\n    top: $i * 20px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Which results in this demo, which is totally charming, if I do say so myself:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_a10a07290f047c4f553850f17e0c5c44\" src=\"\/\/codepen.io\/anon\/embed\/a10a07290f047c4f553850f17e0c5c44?height=450&amp;theme-id=1&amp;slug-hash=a10a07290f047c4f553850f17e0c5c44&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed a10a07290f047c4f553850f17e0c5c44\" title=\"CodePen Embed a10a07290f047c4f553850f17e0c5c44\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And there we have it! We could make a few visual changes here to improve things. For example, the <code>box-shadow<\/code> and color of each card, just like Corey\u2019s example. But I wanted to keep experimenting here. What if we switch the order of the cards and made them horizontal instead?<\/p>\n\n\n\n<p>We already do that on this very website:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/08\/css-tricks-stacked.mp4\"><\/video><\/figure>\n\n\n\n<p>After experimenting for a little bit I changed the order of the cards with flexbox and made each item slide in from right to left:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.wrapper {\n  display: flex;\n  overflow-x: scroll;\n}\n\n.card {\n  height: 60vh;\n  min-width: 50vw;\n  position: sticky;\n  top: 5vh;\n  left: 10vw;\n}<\/code><\/pre>\n\n\n\n<p>But I also wanted to make each of the cards come in at different angles so I updated the Sass loop with the random function:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@for $i from 1 through 8 {\n  .card:nth-child(#{$i}n) {\n    left: $i * 20px;\n    left: random(200) + $i * 1px;\n    top: random(130) + $i * 1px;\n    transform: rotate(random(3) - 2 * 1deg);\n  }\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s the bulk of the changes and that results in the following:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_58d3b4c22a7ae18565e29d097ee5dad9\" src=\"\/\/codepen.io\/anon\/embed\/58d3b4c22a7ae18565e29d097ee5dad9?height=600&amp;theme-id=1&amp;slug-hash=58d3b4c22a7ae18565e29d097ee5dad9&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 58d3b4c22a7ae18565e29d097ee5dad9\" title=\"CodePen Embed 58d3b4c22a7ae18565e29d097ee5dad9\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Pretty neat, eh? I love <code>position: sticky;<\/code> so much.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The other day, I spotted this particularly lovely bit from Corey Ginnivan\u2019s website where a collection of cards stack on top of one another as you scroll.<\/p>\n","protected":false},"author":223806,"featured_media":319212,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1018,1300],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/stacked-cards.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/stacked-cards.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318924"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=318924"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318924\/revisions"}],"predecessor-version":[{"id":319214,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318924\/revisions\/319214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/319212"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=318924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=318924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=318924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}