{"id":240734,"date":"2016-04-19T18:41:35","date_gmt":"2016-04-20T01:41:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=240734"},"modified":"2020-06-25T05:51:59","modified_gmt":"2020-06-25T12:51:59","slug":"creating-wavescroll","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-wavescroll\/","title":{"rendered":"Creating Wavescroll"},"content":{"rendered":"\n<p>This article is a walkthough of how I made this demo of a unique way scroll through panels:<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wMOVXz\" src=\"\/\/codepen.io\/anon\/embed\/wMOVXz?height=450&amp;theme-id=1&amp;slug-hash=wMOVXz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wMOVXz\" title=\"CodePen Embed wMOVXz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The code in this demo is (hopefully) pretty straightforward and easy-to-understand. No npm modules or ES2015 stuff here, I went with classic jQuery, SCSS, and HTML (plus a little Greensock).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-got-the-idea-from-a-random-twitter-link\">I got the idea from a random Twitter link<\/h3>\n\n\n<p>Browsing through my Twitter feed the other day, I saw link to <a href=\"http:\/\/jetlag.photos\/\" rel=\"noopener\">jetlag.photos<\/a>. I was amazed at the effect, and thought I&#8217;d try to recreate it without peeking at their source code.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-240746\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/04\/jetlag-photos.gif\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Later on, when I did peek, I saw their implementation was based on <code><canvas><\/canvas><\/code>, which I&#8217;m bad at anyway, so I&#8217;m glad I went with my skill set.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-start-with-the-html\">Let&#8217;s start with the HTML<\/h3>\n\n\n<p>We&#8217;ll need a full screen sized container with some containing blocks inside for each panel. We&#8217;re namespacing everything here with <code>ws-<\/code> for &#8220;wavescroll&#8221;.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"ws-pages\">\n  &lt;div class=\"ws-bgs\">\n    &lt;div class=\"ws-bg\">&lt;\/div>\n    &lt;div class=\"ws-bg\">&lt;\/div>\n    &lt;div class=\"ws-bg\">&lt;\/div>\n    &lt;div class=\"ws-bg\">&lt;\/div>\n    &lt;div class=\"ws-bg\">&lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>We have an additional container, because later we&#8217;ll need a place to put our text headings.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"and-now-do-basic-styling-with-sass\">And now do basic styling with Sass<\/h3>\n\n\n<p>We&#8217;re using the SCSS syntax here, and it&#8217;s helping make the namespacing part very easy:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.ws {\n  &amp;-pages {\n    overflow: hidden;\n    position: relative;\n    height: 100vh; \/\/ main container should be 100% height of the screen\n  }\n  &amp;-bgs {\n    position: relative;\n    height: 100%;\n  }\n  &amp;-bg {\n    display: flex;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now we need to create background slices. Each slice of the \u201cwave\u201d will be it\u2019s own\u00a0<code>&lt;div><\/code>. Our goal is to make them look like one big background, which is centered and resized with help of\u00a0<code>background-size: cover<\/code>.<\/p>\n\n\n\n<p>Every slice will be 100% of screen width (not just the visual width of a slice) and shifted to the left with each step.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.ws-bg {\n  &amp;__part {\n    overflow: hidden; \/\/ every part must show content only within it's own dimensions\n    position: relative;\n    height: 100%;\n    cursor: grab;\n    user-select: none; \/\/ significantly improves mouse-drag experience, by preventing background-image drag event\n    &amp;-inner {\n      position: absolute;\n      top: 0;\n      \/\/ `left` property will be assigned through JavaScript\n      width: 100vw; \/\/ each block takes 100% of screen width\n      height: 100%;\n      background-size: cover;\n      background-position: center center;\n    }\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"then-append-the-background-slices-with-javascript\">Then append the background slices with JavaScript<\/h3>\n\n\n<p>The slices we can create dynamically with a JavaScript <code>for<\/code> loop. I originally tried to do all of this in SCSS with loops and even using <code>::before<\/code> elements to reduce the HTML, but this way is easier and better, because you don&#8217;t need to sync variables between Sass and JavaScript:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">var $wsPages = $(\".ws-pages\");\nvar bgParts = 24; \/\/ variable for amount of slices\nvar $parts;\n\nfunction initBgs() {\n  var arr = [];\n  var partW = 100 \/ bgParts; \/\/ width of one slice in %\n\n  for (var i = 1; i &lt;= bgParts; i++) {\n    var $part = $('&lt;div class=\"ws-bg__part\">'); \/\/ a slice\n    var $inner = $('&lt;div class=\"ws-bg__part-inner\">'); \/\/ inner slice\n    var innerLeft = 100 \/ bgParts * (1 - i); \/\/ calculating position of inner slice\n    $inner.css(\"left\", innerLeft + \"vw\"); \/\/ assigning `left` property for each inner slice with viewport units\n    $part.append($inner);\n    $part.addClass(\"ws-bg__part-\" + i).width(partW + \"%\"); \/\/ adding class with specific index for each slice and assigning width in %\n    arr.push($part);\n  }\n\n  $(\".ws-bg\").append(arr); \/\/ append array of slices\n  $wsPages.addClass(\"s--ready\"); \/\/ we'll need this class later\n  $parts = $(\".ws-bg__part\"); \/\/ new reference to all slices\n};\n\ninitBgs();<\/code><\/pre>\n\n\n\n<p>Near the end of this function we adding an <code>s--ready<\/code> class (<code>s<\/code> is for state, as controlled by JavaScript) to container. We need it to remove the static <code>background-image<\/code> from <code>.ws-bg<\/code>, which we show initially so the user sees something right away (perceived performance!).<\/p>\n\n\n\n<p>After the slices are added, the background for original container becomes useless (and harmful, because they won&#8217;t be moving), so let&#8217;s fix that:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.ws-bg {\n  .ws-pages.s--ready &amp; {\n    background: none;\n  }\n}\n\/\/ Sass loop to set backgrounds\n.ws-bg {\n  @for $i from 1 through 5 {\n    $img: url(..\/images\/onepgscr-#{$i + 3}.jpg);\n    &amp;:nth-child(#{$i}) {\n      background-image: $img;\n      .ws-bg__part-inner {\n        background-image: $img;\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"handling-mouse-movement\">Handling Mouse Movement<\/h3>\n\n\n<p>Let&#8217;s attach handlers for mouse swiping, which do the panel-changing.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var numOfPages = $(\".ws-bg\").length;\n\n\/\/ save the window dimensions\nvar winW = $(window).width();\nvar winH = $(window).height();\n\n\/\/ Not debouncing since setting variables is low cost.\n$(window).on(\"resize\", function() {\n  winW = $(window).width();\n  winH = $(window).height();\n});\n\nvar startY = 0;\nvar deltaY = 0;\n\n\/\/ Delegated mouse handler, since all the parts are appended dynamically\n$(document).on(\"mousedown\", \".ws-bg__part\", function(e) { \n  startY = e.pageY; \/\/ Y position of mouse at the beginning of the swipe\n  deltaY = 0; \/\/ reset variable on every swipe\n\n  $(document).on(\"mousemove\", mousemoveHandler); \/\/ attaching mousemove swipe handler\n\n  $(document).on(\"mouseup\", swipeEndHandler); \/\/ and one for swipe end\n});\n\nvar mousemoveHandler = function(e) {\n  var y = e.pageY; \/\/ Y mouse position during the swipe\n\n  \/\/ with the help of the X mouse coordinate, we are getting current active slice index (the slice the mouse is currently over)\n  var x = e.pageX;\n  index = Math.ceil(x \/ winW * bgParts);\n\n  deltaY = y - startY; \/\/ calculating difference between current and starting positions\n  moveParts(deltaY, index); \/\/ moving parts in different functions, by passing variables\n};\n\nvar swipeEndHandler = function() {\n  \/\/ removing swipeMove and swipeEnd handlers, which were attached on swipeStart\n  $(document).off(\"mousemove\", mousemoveHandler);\n  $(document).off(\"mouseup\", swipeEndHandler);\n\n  if (!deltaY) return; \/\/ if there was no movement on Y axis, then we don't need to do anything else\n\n  \/\/ if \"swipe distance\" is bigger than half of the screen height in specific direction, then we call the function to change panels\n  if (deltaY \/ winH >= 0.5) navigateUp();\n  if (deltaY \/ winH &lt;= -0.5) navigateDown();\n\n  \/\/ even if the panel doesn't change, we still need to move all parts to their default position for the current panel\n  changePages(); \n};\n\n\/\/ Update the current page\nfunction navigateUp() {\n  if (curPage > 1) curPage--;\n};\n\nfunction navigateDown() {\n  if (curPage &lt; numOfPages) curPage++;\n};<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-the-wave-movement\">Adding the Wave Movement<\/h3>\n\n\n<p>Time to add the wave!<\/p>\n\n\n\n<p>Each slice is positioned according to the &#8220;active&#8221; slice (the one the cursor is on), based on the &#8220;deltaY&#8221; and &#8220;index&#8221; variables. The slices move on Y axis with some delay based on how far away it is from the active slice. This &#8220;delay&#8221; is not a static number, it is a number that decreases the further away from static slice it is, even down to zero (becoming flat).<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var staggerStep = 4; \/\/ each slice away from the active slice moves slightly less\nvar changeAT = 0.5; \/\/ animation time in seconds\n\nfunction moveParts(y, index) {\n\n  var leftMax = index - 1; \/\/ max index of slices left of active\n  var rightMin = index + 1; \/\/ min index of slices right of active\n\n  var stagLeft = 0;\n  var stagRight = 0;\n  var stagStepL = 0;\n  var stagStepR = 0;\n  var sign = (y > 0) ? -1 : 1; \/\/ direction of swipe\n\n  movePart(\".ws-bg__part-\" + index, y); \/\/ move active slice\n\n  for (var i = leftMax; i > 0; i--) { \/\/ starting loop from right to left with slices, which are on the left side from the active slice\n\n    var step = index - i;\n    var sVal = staggerVal - stagStepL;\n\n    \/\/ the first 15 steps we are using the default stagger, then reducing it to 1\n    stagStepL += (step &lt;= 15) ? staggerStep : 1;\n\n    \/\/ no negative movement\n    if (sVal &lt; 0) sVal = 0;\n\n    stagLeft += sVal;\n    var nextY = y + stagLeft * sign; \/\/ Y value for current step\n\n    \/\/ if the difference in distance of the current step is more than the deltaY of the active one, then we fix the current step on the default position\n    if (Math.abs(y) &lt; Math.abs(stagLeft)) nextY = 0;\n    movePart(\".ws-bg__part-\" + i, nextY);\n  }\n\n  \/\/ same as above, for the right side\n  for (var j = rightMin; j &lt;= bgParts; j++) {\n    var step = j - index;\n    var sVal = staggerVal - stagStepR;\n    stagStepR += (step &lt;= 15) ? staggerStep : 1;\n    if (sVal &lt; 0) sVal = 0;\n    stagRight += sVal;\n    var nextY = y + stagRight * sign;\n    if (Math.abs(y) &lt; Math.abs(stagRight)) nextY = 0;\n    movePart(\".ws-bg__part-\" + j, nextY);\n  }\n\n};\n\nfunction movePart($part, y) {\n  var y = y - (curPage - 1) * winH;\n\n  \/\/ GSAP for animation\n  TweenLite.to($part, changeAT, {y: y, ease: Back.easeOut.config(4)});\n};<\/code><\/pre>\n\n\n\n<p>I&#8217;m using GSAP (<a href=\"https:\/\/greensock.com\/\" rel=\"noopener\">Greensock<\/a>) for animations. Usually I don&#8217;t use animation libraries, but in this case, we need realtime animation (e.g. pausing and restarting on every mousemove event) without losing smoothness and GSAP does a great job with that.<\/p>\n\n\n\n<p>Here&#8217;s the actual function for changing pages:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var waveStagger = 0.013; \/\/ we don't want to move all slices at the same time, so we add a 13ms stagger\n\/\/ we will remove the cumulative delay from animation time, because we don't want user to wait extra time just for this interaction\n\nfunction changePages() {\n  var y = (curPage - 1) * winH * -1; \/\/ position, based on current page variable\n  var leftMax = index - 1;\n  var rightMin = index + 1;\n\n  TweenLite.to(\".ws-bg__part-\" + index, changeAT, {y: y});\n\n  for (var i = leftMax; i > 0; i--) {\n    var d = (index - i) * waveStagger;\n    TweenLite.to(\".ws-bg__part-\" + i, changeAT - d, {y: y, delay: d});\n  }\n\n  for (var j = rightMin; j &lt;= bgParts; j++) {\n    var d = (j - index) * waveStagger;\n    TweenLite.to(\".ws-bg__part-\" + j, changeAT - d, {y: y, delay: d});\n  }\n};\n\n\/\/ call the function on resize to reset pixel values. you may want to debounce this now\n$(window).on(\"resize\", function() {\n  winW = $(window).width();\n  winH = $(window).height();\n  changePages();\n});<\/code><\/pre>\n\n\n\n<p>Now we can swipe! Here&#8217;s a demo of where we&#8217;re at so far:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_92b6f162b32893078b470035c8b17fde\" src=\"\/\/codepen.io\/anon\/embed\/92b6f162b32893078b470035c8b17fde?height=450&amp;theme-id=1&amp;slug-hash=92b6f162b32893078b470035c8b17fde&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 92b6f162b32893078b470035c8b17fde\" title=\"CodePen Embed 92b6f162b32893078b470035c8b17fde\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"paginating-with-the-mouse-wheel-and-arrow-keys\">Paginating with the mouse wheel and arrow keys<\/h3>\n\n\n<p><a href=\"https:\/\/twitter.com\/elifitch\" rel=\"noopener\">@EliFitch<\/a> helped me name it &#8220;WaveScroll&#8221;. These these UX improvements make it feel more wave-like.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ used to block scrolling so one wheel spin doesn't go through all the panels\nvar waveBlocked = false;\n\nvar waveStartDelay = 0.2;\n\n\/\/ mousewheel handlers. DOMMouseScroll is required for Firefox\n$(document).on(\"mousewheel DOMMouseScroll\", function(e) {\n  if (waveBlocked) return;\n  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail &lt; 0) {\n    navigateWaveUp();\n  } else { \n    navigateWaveDown();\n  }\n});\n\n$(document).on(\"keydown\", function(e) {\n  if (waveBlocked) return;\n  if (e.which === 38) { \/\/ key up\n    navigateWaveUp();\n  } else if (e.which === 40) { \/\/ key down\n    navigateWaveDown();\n  }\n});\n\nfunction navigateWaveUp() {\n  if (curPage === 1) return;\n  curPage--;\n  waveChange();\n};\n\nfunction navigateWaveDown() {\n  if (curPage === numOfPages) return;\n  curPage++;\n  waveChange();\n};\n\nfunction waveChange() {\n  waveBlocked = true; \/\/ blocking scroll waveScroll\n  var y = (curPage - 1) * winH * -1;\n\n  for (var i = 1; i &lt;= bgParts; i++) {\n    \/\/ starting animation for each vertical group of slices with staggered delay\n    var d = (i - 1) * waveStagger + waveStartDelay;\n    TweenLite.to(\".ws-bg__part-\" + i, changeAT, {y: y, delay: d});\n  }\n\n  var delay = (changeAT + waveStagger * (bgParts - 1)) * 1000; \/\/ whole animation time in ms\n  setTimeout(function() {\n    waveBlocked = false; \/\/ remove scrollBlock when animation is finished\n  }, delay);\n};<\/code><\/pre>\n\n\n\n<p>Now all the parts have been put together and we have a final demo.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"mobile-performance\">Mobile Performance<\/h3>\n\n\n<p>After I checked this demo on my phone (Nexus 5) I found some serious performance problems during <code>drag<\/code> event. Then I remembered that usually you need to optimise any move handlers (mousemove\/touchmove), because they are firing too many times in small period of time.<\/p>\n\n\n\n<p><code>requestAnimationFrame<\/code> was the solution. requestAnimationFrame is a special browser API created for performant animations. You can read more about it <a href=\"https:\/\/css-tricks.com\/using-requestanimationframe\/\">here<\/a>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Polyfill for rAF\nwindow.requestAnimFrame = (function() {\n  return window.requestAnimationFrame ||\n    window.webkitRequestAnimationFrame ||\n    window.mozRequestAnimationFrame ||\n    function(callback) {\n      window.setTimeout(callback, 1000 \/ 60);\n    };\n})();\n\n\/\/ Throttling function\nfunction rafThrottle(fn) { \/\/ takes a function as parameter \n  var busy = false;\n  return function() { \/\/ returning function (a closure)\n    if (busy) return; \/\/ busy? go away! \n    busy = true; \/\/ hanging \"busy\" plate on the door \n    fn.apply(this, arguments); \/\/ calling function\n    \/\/ using rAF to remove the \"busy\" plate, when browser is ready\n    requestAnimFrame(function() {\n      busy = false;\n    });\n  };\n};\n\nvar mousemoveHandler = rafThrottle(function(e) {\n  \/\/ same code as before \n});<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-could-we-handle-touch-events\">How could we handle touch events?<\/h3>\n\n\n<p>You can find this code in the demo. It&#8217;s just one additional handler for <code>touchmove<\/code>, which does same stuff as <code>mousemove<\/code>. I decided to not write about this in article, because even after the rAF performance optimization, the mobile performance kinda sucks compared to the original website (jetlag.photos), which works through . Still, it&#8217;s not <em>too<\/em> bad considering it&#8217;s images in DOM elements.<\/p>\n\n\n\n<p>Some browsers have additional problems with black lines on the edges of the slices. This problem appears because of combination of width in % and 3D transforms during the movement, which creates sub-pixel rendering issues, and shows the black background through the cracks.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"thats-all\">That&#8217;s all!<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wMOVXz\" src=\"\/\/codepen.io\/anon\/embed\/wMOVXz?height=450&amp;theme-id=1&amp;slug-hash=wMOVXz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wMOVXz\" title=\"CodePen Embed wMOVXz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you have any suggestions on how I could have done anything better, I&#8217;ll be listening in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is a walkthough of how I made this demo of a unique way scroll through panels:<\/p>\n","protected":false},"author":242297,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":300931,"url":"https:\/\/css-tricks.com\/animate-text-on-scroll\/","url_meta":{"origin":240734,"position":0},"title":"Animate Text on Scroll","date":"January 13, 2020","format":false,"excerpt":"We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo. That demo is here: See the Pen Selfie Crawl by\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/svg-canvas.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364152,"url":"https:\/\/css-tricks.com\/manuel-matuzovics-css-specificity-demo\/","url_meta":{"origin":240734,"position":1},"title":"Manuel Matuzovic&#8217;s CSS Specificity Demo","date":"February 25, 2022","format":false,"excerpt":"If you're looking for a primer on CSS specificity, we've got that. And if you're trying to get ahead of the game, you should be aware of CSS Cascade Layers as well. One of the ways to help get a grasp of CSS specificity is thinking terms of \"what beats\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":176437,"url":"https:\/\/css-tricks.com\/guide-responsive-friendly-css-columns\/","url_meta":{"origin":240734,"position":2},"title":"Guide to Responsive-Friendly CSS Columns","date":"July 25, 2014","format":false,"excerpt":"With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you're already working with a fluid layout, the columns will reflow automatically. With the right\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":240734,"position":3},"title":"A Cornucopia of Container Queries","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303002,"url":"https:\/\/css-tricks.com\/getting-fancy-with-position-sticky\/","url_meta":{"origin":240734,"position":4},"title":"Getting Fancy with position: sticky;","date":"February 6, 2020","format":false,"excerpt":"Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/sticky-figcaption.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":167745,"url":"https:\/\/css-tricks.com\/frosting-glass-css-filters\/","url_meta":{"origin":240734,"position":5},"title":"Frosting Glass with CSS Filters","date":"April 7, 2014","format":false,"excerpt":"While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240734"}],"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\/242297"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=240734"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240734\/revisions"}],"predecessor-version":[{"id":314364,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240734\/revisions\/314364"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=240734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=240734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=240734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}