{"id":357192,"date":"2021-11-19T07:13:46","date_gmt":"2021-11-19T15:13:46","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357192"},"modified":"2021-11-19T07:13:49","modified_gmt":"2021-11-19T15:13:49","slug":"parallax-powered-by-css-custom-properties","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/parallax-powered-by-css-custom-properties\/","title":{"rendered":"Parallax Powered by CSS Custom Properties"},"content":{"rendered":"\n<p>Good friend Kent C. Dodds has recently dropped his <a href=\"https:\/\/kentcdodds.com\/\" rel=\"noopener\">new website<\/a> which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some &#8220;whimsy&#8221; for the site. &#x2728;<\/p>\n\n\n\n<p>One of the first things that drew my attention was the large image of Kody (&#x1f428;) on the landing page. He&#8217;s surrounded by objects and that, to me, screamed, &#8220;Make me move!&#8221;<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"693\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636491135812_kody-flying_blue.png?resize=700%2C693&#038;ssl=1\" alt=\"Life-like illustration of an animatronic panda in a warn jacket and riding a snowboard while surrounded by a bunch of objects, like leaves, skis, and other gadgets.\" class=\"wp-image-357194\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636491135812_kody-flying_blue.png?w=700&amp;ssl=1 700w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636491135812_kody-flying_blue.png?resize=300%2C297&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636491135812_kody-flying_blue.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636491135812_kody-flying_blue.png?resize=100%2C100&amp;ssl=1 100w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>I have built parallax-style scenes before that respond to cursor movement, but not to this scale and not for a React application. The neat thing about this? We can power the whole thing with only two CSS custom properties.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Let&#8217;s start by grabbing our user&#8217;s cursor position. This is as straightforward as:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const UPDATE = ({ x, y }) => {\n  document.body.innerText = `x: ${x}; y: ${y}`\n}\ndocument.addEventListener('pointermove', UPDATE)<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxLYrVK\" src=\"\/\/codepen.io\/anon\/embed\/xxLYrVK?height=450&amp;theme-id=1&amp;slug-hash=xxLYrVK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxLYrVK\" title=\"CodePen Embed xxLYrVK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We want to map these values around a center point. For example, the left side of the viewport should be <code>-1<\/code> for <code>x<\/code>, and <code>1<\/code> for the right side. We can reference an element and work out the value from its center using a mapping function. In this project, I was able to use <a href=\"https:\/\/greensock.com\/gsap\/\" rel=\"noopener\">GSAP<\/a> and that meant using some of its utility functions. They already provide a <code>mapRange()<\/code> function for this purpose. Pass in two ranges and you&#8217;ll get a function you can use to get the mapped value.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const mapRange = (inputLower, inputUpper, outputLower, outputUpper) => {\n  const INPUT_RANGE = inputUpper - inputLower\n  const OUTPUT_RANGE = outputUpper - outputLower\n  return value => outputLower + (((value - inputLower) \/ INPUT_RANGE) * OUTPUT_RANGE || 0)\n}\n\/\/ const MAPPER = mapRange(0, 100, 0, 10000)\n\/\/ MAPPER(50) === 5000<\/code><\/pre>\n\n\n\n<p>What if we want to use the window as the container element? We can map the value to the width and height of it.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">import gsap from 'https:\/\/cdn.skypack.dev\/gsap'\n\nconst BOUNDS = 100\n\nconst UPDATE = ({ x, y }) => {\n  const boundX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x)\n  const boundY = gsap.utils.mapRange(0, window.innerHeight, -BOUNDS, BOUNDS, y)\n  document.body.innerText = `x: ${Math.floor(boundX) \/ 100}; y: ${Math.floor(boundY) \/ 100};`\n}\n\ndocument.addEventListener('pointermove', UPDATE)<\/code><\/pre>\n\n\n\n<p>That gives us a range of <code>x<\/code> and <code>y<\/code> values that we can plug into our CSS. Note how we are dividing the values by <code>100<\/code> to get a fractional value. This should make sense when we integrate these values with our CSS a little later.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOLZwKX\" src=\"\/\/codepen.io\/anon\/embed\/jOLZwKX?height=450&amp;theme-id=1&amp;slug-hash=jOLZwKX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOLZwKX\" title=\"CodePen Embed jOLZwKX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, what if we have an element that we want to map that value against, and within a certain proximity? In other words, we want our handler to look up the position of the element, work out the proximity range, and then map the cursor position to that range. The ideal solution here is to create a function that generates our handler for us. Then we can reuse it. For the purpose of this article, though, we\u2019re operating on a \u201chappy path\u201d where we are avoiding type checks or checking for the callback value, etc.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const CONTAINER = document.querySelector('.container')\n\nconst generateHandler = (element, proximity, cb) => ({x, y}) => {\n  const bounds = 100\n  const elementBounds = element.getBoundingClientRect()\n  const centerX = elementBounds.left + elementBounds.width \/ 2\n  const centerY = elementBounds.top + elementBounds.height \/ 2\n  const boundX = gsap.utils.mapRange(centerX - proximity, centerX + proximity, -bounds, bounds, x)\n  const boundY = gsap.utils.mapRange(centerY - proximity, centerY + proximity, -bounds, bounds, y)\n  cb(boundX \/ 100, boundY \/ 100)\n}\n\ndocument.addEventListener('pointermove', generateHandler(CONTAINER, 100, (x, y) => {\n  CONTAINER.innerText = `x: ${x.toFixed(1)}; y: ${y.toFixed(1)};`\n}))<\/code><\/pre>\n\n\n\n<p>In this demo, our proximity is <code>100<\/code>. We\u2019ll style it with a blue background to make it obvious. We pass a callback that gets fired each time the values for <code>x<\/code> and <code>y<\/code> get mapped to the <code>bounds<\/code>. We can divide these values in the callback or do what we want with them.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExvQvYy\" src=\"\/\/codepen.io\/anon\/embed\/ExvQvYy?height=450&amp;theme-id=1&amp;slug-hash=ExvQvYy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExvQvYy\" title=\"CodePen Embed ExvQvYy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But wait, there&#8217;s an issue with that demo. The values go outside the bounds of <code>-1<\/code> and <code>1<\/code>. We need to clamp those values. GreenSock has <a href=\"https:\/\/greensock.com\/docs\/v3\/GSAP\/UtilityMethods\/clamp\" rel=\"noopener\">another utility method<\/a> we can use for this. It&#8217;s the equal of using a combination of <code>Math.min<\/code> and <code>Math.max<\/code>. As we already have the dependency, there&#8217;s no point in reinventing the wheel! We could clamp the values in the function. But, choosing to do so in our callback will be more flexible as we\u2019ll show coming up.<\/p>\n\n\n\n<p>We could do this with CSS <code>clamp()<\/code> if we\u2019d like. &#x1f609;<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.addEventListener('pointermove', generateHandler(CONTAINER, 100, (x, y) => {\n  CONTAINER.innerText = `\n    x: ${gsap.utils.clamp(-1, 1, x.toFixed(1))};\n    y: ${gsap.utils.clamp(-1, 1, y.toFixed(1))};\n  `\n}))<\/code><\/pre>\n\n\n\n<p>Now we have clamped values!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxLzjRK\" src=\"\/\/codepen.io\/anon\/embed\/xxLzjRK?height=450&amp;theme-id=1&amp;slug-hash=xxLzjRK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxLzjRK\" title=\"CodePen Embed xxLzjRK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this demo, adjust the proximity and drag the container around to see how the handler holds up.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKvBmgL\" src=\"\/\/codepen.io\/anon\/embed\/KKvBmgL?height=450&amp;theme-id=1&amp;slug-hash=KKvBmgL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKvBmgL\" title=\"CodePen Embed KKvBmgL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That&#8217;s the majority of JavaScript for this project! All that&#8217;s left to do is pass these values to CSS-land. And we can do that in our callback. Let\u2019s use custom properties named <code>ratio-x<\/code> and <code>ratio-y<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const UPDATE = (x, y) => {\n  const clampedX = gsap.utils.clamp(-1, 1, x.toFixed(1))\n  const clampedY = gsap.utils.clamp(-1, 1, y.toFixed(1))\n  CONTAINER.style.setProperty('--ratio-x', clampedX)\n  CONTAINER.style.setProperty('--ratio-y', clampedY)\n  CONTAINER.innerText = `x: ${clampedX}; y: ${clampedY};`\n}\n\ndocument.addEventListener('pointermove', generateHandler(CONTAINER, 100, UPDATE))<\/code><\/pre>\n\n\n\n<p>Now that we have some values we can use in our CSS, we can combine them with <code>calc()<\/code> any way we like. For example, this demo changes the scale of the container element based on the <code>y<\/code> value. It then updates the <code>hue<\/code> of the container based on the <code>x<\/code> value.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvqXjmm\" src=\"\/\/codepen.io\/anon\/embed\/wvqXjmm?height=450&amp;theme-id=1&amp;slug-hash=wvqXjmm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvqXjmm\" title=\"CodePen Embed wvqXjmm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The neat thing here is that the JavaScript doesn&#8217;t care about what you do with the values. It&#8217;s done its part. That&#8217;s the magic of using scoped custom properties.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  --hue: calc(180 - (var(--ratio-x, 0) * 180));\n  background: hsl(var(--hue, 25), 100%, 80%);\n  transform: scale(calc(2 - var(--ratio-y, 0)));\n}<\/code><\/pre>\n\n\n\n<p>Another interesting point is considering whether you want to clamp the values or not. In this demo, if we didn&#8217;t clamp <code>x<\/code>, we could have the <code>hue<\/code> update wherever we are on the page.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOLpwMr\" src=\"\/\/codepen.io\/anon\/embed\/jOLpwMr?height=450&amp;theme-id=1&amp;slug-hash=jOLpwMr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOLpwMr\" title=\"CodePen Embed jOLpwMr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-making-a-scene\">Making a scene<\/h3>\n\n\n<p>We have the technique in place! Now we can do pretty much whatever we want with it. It&#8217;s kinda wherever your imagination takes you. I&#8217;ve used this same set up for a bunch of things.<\/p>\n\n\n\n<p>Our demos so far have only made changes to the containing element. But, as we may as well mention again, <a href=\"https:\/\/css-tricks.com\/the-power-and-fun-of-scope-with-css-custom-properties\/\">the power of custom property scope is epic<\/a>.<\/p>\n\n\n\n<p>My task was to make things move on Kent\u2019s site. When I first saw the image of Kody with a bunch of objects, I could see all the individual pieces doing their own thing\u2014all powered by those two custom properties that we pass in. How might that look though? The key is inline custom properties for each child of our container.<\/p>\n\n\n\n<p>For now, we could update our markup to include some children:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container\">\n  &lt;div class=\"container__item\">&lt;\/div>\n  &lt;div class=\"container__item\">&lt;\/div>\n  &lt;div class=\"container__item\">&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Then we update the styles to include some scoped styles for <code>container__item<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container__item {\n  position: absolute;\n  top: calc(var(--y, 0) * 1%);\n  left: calc(var(--x, 0) * 1%);\n  height: calc(var(--size, 20) * 1px);\n  width: calc(var(--size, 20) * 1px);\n  background: hsl(var(--hue, 0), 80%, 80%);\n  transition: transform 0.1s;\n  transform: \n    translate(-50%, -50%)\n    translate(\n      calc(var(--move-x, 0) * var(--ratio-x, 0) * 100%),\n      calc(var(--move-y, 0) * var(--ratio-y, 0) * 100%)\n    )\n    rotate(calc(var(--rotate, 0) * var(--ratio-x, 0) * 1deg))\n  ;\n}<\/code><\/pre>\n\n\n\n<p>The important part there is how we&#8217;re making use of <code>--ratio-x<\/code> and <code>--ratio-y<\/code> inside the <code>transform<\/code>. Each item declares its own level of movement and rotation via <code>--move-x<\/code>, etc. Each item is also positioned with scoped custom properties, <code>--x<\/code> and <code>--y<\/code>.<\/p>\n\n\n\n<p><strong>That&#8217;s the key to these CSS powered parallax scenes. It&#8217;s all about bouncing coefficients against each other!<\/strong><\/p>\n\n\n\n<p>If we update our markup with some inline values for those properties, here\u2019s what we get:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container\">\n  &lt;div class=\"container__item\" style=\"--move-x: -1; --rotate: 90; --x: 10; --y: 60; --size: 30; --hue: 220;\">&lt;\/div>\n  &lt;div class=\"container__item\" style=\"--move-x: 1.6; --move-y: -2; --rotate: -45; --x: 75; --y: 20; --size: 50; --hue: 240;\">&lt;\/div>\n  &lt;div class=\"container__item\" style=\"--move-x: -3; --move-y: 1; --rotate: 360; --x: 75; --y: 80; --size: 40; --hue: 260;\">&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Leveraging that scope, we can get something like this! That\u2019s pretty neat. It almost looks like a shield.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEJjyqv\" src=\"\/\/codepen.io\/anon\/embed\/ZEJjyqv?height=450&amp;theme-id=1&amp;slug-hash=ZEJjyqv&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEJjyqv\" title=\"CodePen Embed ZEJjyqv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But, how do you take a static image and turn it into a responsive parallax scene? First, we&#8217;re going to have to create all those child elements and position them. And to do this we can use the <a href=\"https:\/\/css-tricks.com\/advice-for-complex-css-illustrations\/#tracing-is-perfectly-acceptable\">&#8220;tracing&#8221; technique we use with CSS art<\/a>.<\/p>\n\n\n\n<p>This next demo shows the image we\u2019re using inside a parallax container with children. To explain this part, we&#8217;ve created three children and given them a red background. The image is <code>fixed<\/code> with a reduced <code>opacity<\/code> and lines up with our parallax container.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxLaJMz\" src=\"\/\/codepen.io\/anon\/embed\/xxLaJMz?height=450&amp;theme-id=1&amp;slug-hash=xxLaJMz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxLaJMz\" title=\"CodePen Embed xxLaJMz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Each parallax item gets created from a <code>CONFIG<\/code> object. For this demo, I&#8217;m using Pug to generate these in HTML for brevity. In the final project, I&#8217;m using React which we can show later. Using Pug here saves me writing out all the inline CSS custom properties individually.<\/p>\n\n\n\n<pre rel=\"Pug\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">-\n  const CONFIG = [\n    {\n      positionX: 50,\n      positionY: 55,\n      height: 59,\n      width: 55,\n    },\n    {\n      positionX: 74,\n      positionY: 15,\n      height: 17,\n      width: 17,\n    },\n    {\n      positionX: 12,\n      positionY: 51,\n      height: 24,\n      width: 19,\n    }\n  ]\n\nimg(src='https:\/\/assets.codepen.io\/605876\/kody-flying_blue.png')\n.parallax\n  - for (const ITEM of CONFIG)\n    .parallax__item(style=`--width: ${ITEM.width}; --height: ${ITEM.height}; --x: ${ITEM.positionX}; --y: ${ITEM.positionY};`)<\/code><\/pre>\n\n\n\n<p>How do we get those values? It&#8217;s a lot of trial and error and is definitely time consuming. To make it responsive, the positioning and sizing use percentage values.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parallax {\n  height: 50vmin;\n  width: calc(50 * (484 \/ 479) * 1vmin); \/\/ Maintain aspect ratio where 'aspect-ratio' doesn't work to that scale.\n  background: hsla(180, 50%, 50%, 0.25);\n  position: relative;\n}\n\n.parallax__item {\n  position: absolute;\n  left: calc(var(--x, 50) * 1%);\n  top: calc(var(--y, 50) * 1%);\n  height: calc(var(--height, auto) * 1%);\n  width: calc(var(--width, auto) * 1%);\n  background: hsla(0, 50%, 50%, 0.5);\n  transform: translate(-50%, -50%);\n}<\/code><\/pre>\n\n\n\n<p>Once we\u2019ve made elements for all the items, we get something like the following demo. This uses the config object from the final work:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYJzzyB\" src=\"\/\/codepen.io\/anon\/embed\/vYJzzyB?height=450&amp;theme-id=1&amp;slug-hash=vYJzzyB&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYJzzyB\" title=\"CodePen Embed vYJzzyB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Don&#8217;t worry if things aren\u2019t perfectly lined up. Everything is going to be moving anyway! That&#8217;s the joy of using a config object\u2014we get tweak it how we like.<\/p>\n\n\n\n<p>How do we get the image into those items? Well, it\u2019s tempting to create separate images for each item. But, that would result in a lot of network requests for each image which is bad for performance. Instead, we can create an image sprite. In fact, that\u2019s exactly what I did.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"369\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=2560%2C369&#038;ssl=1\" alt=\"An image sprite of the original Kody image, showing each object and and Kody lined up from left to right.\" class=\"wp-image-357197\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?w=2560&amp;ssl=1 2560w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=300%2C43&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=1024%2C148&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=768%2C111&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=1536%2C222&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=2048%2C295&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_F0AB372D4DA74E76CD90E65F3A36BCC2547E02186F1F31F213144B72371DA864_1636738778701_kody-spritesheet-all_ak8clo-scaled.webp?resize=1000%2C144&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Then to keep things responsive, we can use a percentage value for the <code>background-size<\/code> and <code>background-position<\/code> properties in the CSS. We make this part of the config and then inline those values, too. The config structure can be anything.<\/p>\n\n\n\n<pre rel=\"Pug\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">-\n  const ITEMS = [\n    {\n      identifier: 'kody-blue',\n      backgroundPositionX: 84.4,\n      backgroundPositionY: 50,\n      size: 739,\n      config: {\n        positionX: 50,\n        positionY: 54,\n        height: 58,\n        width: 55,\n      },\n    },\n  ]\n\n.parallax\n  - for (const ITEM of ITEMS)\n    .parallax__item(style=`--pos-x: ${ITEM.backgroundPositionX}; --pos-y: ${ITEM.backgroundPositionY}; --size: ${ITEM.size}; --width: ${ITEM.config.width}; --height: ${ITEM.config.height}; --x: ${ITEM.config.positionX}; --y: ${ITEM.config.positionY};`)<\/code><\/pre>\n\n\n\n<p>Updating our CSS to account for this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parallax__item {\n  position: absolute;\n  left: calc(var(--x, 50) * 1%);\n  top: calc(var(--y, 50) * 1%);\n  height: calc(var(--height, auto) * 1%);\n  width: calc(var(--width, auto) * 1%);\n  transform: translate(-50%, -50%);\n  background-image: url('kody-sprite.png');\n  background-position: calc(var(--pos-x, 0) * 1%) calc(var(--pos-y, 0) * 1%);\n  background-size: calc(var(--size, 0) * 1%);\n}<\/code><\/pre>\n\n\n\n<p>And now we have a responsive traced scene with parallax items!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdMGGqV\" src=\"\/\/codepen.io\/anon\/embed\/mdMGGqV?height=450&amp;theme-id=1&amp;slug-hash=mdMGGqV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdMGGqV\" title=\"CodePen Embed mdMGGqV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>All that&#8217;s left to do is remove the tracing image and the background colors, and apply transforms.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyzqqEY\" src=\"\/\/codepen.io\/anon\/embed\/dyzqqEY?height=450&amp;theme-id=1&amp;slug-hash=dyzqqEY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyzqqEY\" title=\"CodePen Embed dyzqqEY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the first version, I used the values in a different way. I had the handler return values between <code>-60<\/code> and <code>60<\/code>. We can do that with our handler by manipulating the return values.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const UPDATE = (x, y) => {\n  CONTAINER.style.setProperty(\n    '--ratio-x',\n    Math.floor(gsap.utils.clamp(-60, 60, x * 100))\n  )\n  CONTAINER.style.setProperty(\n    '--ratio-y',\n    Math.floor(gsap.utils.clamp(-60, 60, y * 100))\n  )\n}<\/code><\/pre>\n\n\n\n<p>Then, each item can be configured for:<\/p>\n\n\n\n<ul><li>the x, y, and z positions,<\/li><li>movement on the x and y axis, and<\/li><li>rotation and translation on the x and y axis.<\/li><\/ul>\n\n\n\n<p>The CSS transforms are quite long. This is what they look like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parallax {\n  transform: rotateX(calc(((var(--rx, 0) * var(--range-y, 0)) * var(--allow-motion)) * 1deg))\n    rotateY(calc(((var(--ry, 0) * var(--range-x, 0)) * var(--allow-motion)) * 1deg))\n    rotate(calc(((var(--r, 0) * var(--range-x, 0)) * var(--allow-motion)) * 1deg));\n  transform-style: preserve-3d;\n  transition: transform 0.25s;\n}\n\n.parallax__item {\n  transform: translate(-50%, -50%)\n    translate3d(\n      calc(((var(--mx, 0) * var(--range-x, 0)) * var(--allow-motion)) * 1%),\n      calc(((var(--my, 0) * var(--range-y, 0)) * var(--allow-motion)) * 1%),\n      calc(var(--z, 0) * 1vmin)\n    )\n    rotateX(calc(((var(--rx, 0) * var(--range-y, 0)) * var(--allow-motion)) * 1deg))\n    rotateY(calc(((var(--ry, 0) * var(--range-x, 0)) * var(--allow-motion)) * 1deg))\n    rotate(calc(((var(--r, 0) * var(--range-x, 0)) * var(--allow-motion)) * 1deg));\n  transform-style: preserve-3d;\n  transition: transform 0.25s;\n}<\/code><\/pre>\n\n\n\n<p>What\u2019s that <code>--allow-motion<\/code> thing doing? That\u2019s not in the demo! True. This is a little trick for applying reduced motion. If we have <a href=\"https:\/\/css-tricks.com\/revisiting-prefers-reduced-motion-the-reduced-motion-media-query\/\">users who prefer &#8220;reduced&#8221; motion<\/a>, we can cater for that with a coefficient. The word &#8220;reduced&#8221; doesn&#8217;t have to mean &#8220;none&#8221; after all!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@media (prefers-reduced-motion: reduce) {\n  .parallax {\n    --allow-motion: 0.1;\n  }\n}\n@media (hover: none) {\n  .parallax {\n    --allow-motion: 0;\n  }\n}<\/code><\/pre>\n\n\n\n<p>This &#8220;final&#8221; demo shows how the <code>--allow-motion<\/code> value affects the scene. Move the slider to see how you can reduce the motion.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWaPxBm\" src=\"\/\/codepen.io\/anon\/embed\/XWaPxBm?height=600&amp;theme-id=1&amp;slug-hash=XWaPxBm&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWaPxBm\" title=\"CodePen Embed XWaPxBm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This demo also shows off another feature: the ability to choose a &#8220;team&#8221; that changes Kody\u2019s color. The neat part here is that all that requires is pointing to a different part of our image sprite.<\/p>\n\n\n\n<p>And that&#8217;s it for creating a CSS custom property powered parallax! But, I did mention this was something I built in React. And yes, that last demo uses React. In fact, this worked quite well in a component-based environment. We have an array of configuration objects and we can pass them into a <code>&lt;Parallax&gt;<\/code> component as <code>children<\/code> along with any transform coefficients.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const Parallax = ({\n  config,\n  children,\n}: {\n  config: ParallaxConfig\n  children: React.ReactNode | React.ReactNode[]\n}) => {\n  const containerRef = React.useRef&lt;HTMLDivElement>(null)\n  useParallax(\n    (x, y) => {\n      containerRef.current.style.setProperty(\n        '--range-x', Math.floor(gsap.utils.clamp(-60, 60, x * 100))\n      )\n      containerRef.current.style.setProperty(\n        '--range-y', Math.floor(gsap.utils.clamp(-60, 60, y * 100))\n      )\n    },\n    containerRef,\n    () => window.innerWidth * 0.5,\n)\n\n  return (\n    &lt;div\n      ref={containerRef}\n      className='parallax'\n      style={\n        {\n          '--r': config.rotate,\n          '--rx': config.rotateX,\n          '--ry': config.rotateY,\n        } as ContainerCSS\n      }\n    >\n      {children}\n    &lt;\/div>\n  )\n}\n<\/code><\/pre>\n\n\n\n<p>Then, if you spotted it, there&#8217;s a hook in there called <code>useParallax<\/code>. We pass a callback into this that receives the <code>x<\/code> and <code>y<\/code> value. We also pass in the <code>proximity<\/code> which can be a <code>function<\/code>, and the element to use.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const useParallax = (callback, elementRef, proximityArg = 100) => {\n  React.useEffect(() => {\n    if (!elementRef.current || !callback) return\n    const UPDATE = ({ x, y }) => {\n      const bounds = 100\n      const proximity = typeof proximityArg === 'function' ? proximityArg() : proximityArg\n      const elementBounds = elementRef.current.getBoundingClientRect()\n      const centerX = elementBounds.left + elementBounds.width \/ 2\n      const centerY = elementBounds.top + elementBounds.height \/ 2\n      const boundX = gsap.utils.mapRange(centerX - proximity, centerX + proximity, -bounds, bounds, x)\n      const boundY = gsap.utils.mapRange(centerY - proximity, centerY + proximity, -bounds, bounds, y)\n      callback(boundX \/ 100, boundY \/ 100)\n    }\n    window.addEventListener('pointermove', UPDATE)\n    return () => {\n      window.removeEventListener('pointermove', UPDATE)\n    }\n  }, [elementRef, callback])\n}<\/code><\/pre>\n\n\n\n<p>Spinning this into a custom hook means I can reuse it elsewhere. In fact, removing the use of GSAP makes it a nice micro-package opportunity.<\/p>\n\n\n\n<p>Lastly, the <code>&lt;ParallaxItem&gt;<\/code>. This is pretty straightforward. It&#8217;s a component that maps the props into inline CSS custom properties. In the project, I opted to map the <code>background<\/code> properties to a child of the <code>ParallaxItem<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const ParallaxItem = ({\n  children,\n  config,\n}: {\n  config: ParallaxItemConfig\n  children: React.ReactNode | React.ReactNode[]\n}) => {\n  const params = {...DEFAULT_CONFIG, ...config}\n  return (\n    &lt;div\n      className='parallax__item absolute'\n      style={\n        {\n          '--x': params.positionX,\n          '--y': params.positionY,\n          '--z': params.positionZ,\n          '--r': params.rotate,\n          '--rx': params.rotateX,\n          '--ry': params.rotateY,\n          '--mx': params.moveX,\n          '--my': params.moveY,\n          '--height': params.height,\n          '--width': params.width,\n        } as ItemCSS\n      }\n    >\n      {children}\n    &lt;\/div>\n  )\n}<\/code><\/pre>\n\n\n\n<p>Tie all that together and you could end up with something like this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const ITEMS = [\n  {\n    identifier: 'kody-blue',\n    backgroundPositionX: 84.4,\n    backgroundPositionY: 50,\n    size: 739,\n    config: {\n      positionX: 50,\n      positionY: 54,\n      moveX: 0.15,\n      moveY: -0.25,\n      height: 58,\n      width: 55,\n      rotate: 0.01,\n    },\n  },\n  ...otherItems\n]\n\nconst KodyParallax = () => (\n  &lt;Parallax config={{\n    rotate: 0.01,\n    rotateX: 0.1,\n    rotateY: 0.25,\n  }}>\n    {ITEMS.map(item => (\n      &lt;ParallaxItem key={item.identifier} config={item.config} \/>\n    ))}\n  &lt;\/Parallax>\n)<\/code><\/pre>\n\n\n\n<p>Which gives us our parallax scene!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWaPxBm\" src=\"\/\/codepen.io\/anon\/embed\/XWaPxBm?height=650&amp;theme-id=1&amp;slug-hash=XWaPxBm&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWaPxBm\" title=\"CodePen Embed XWaPxBm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-that-s-it\">That\u2019s it!<\/h3>\n\n\n<p>We just took a static image and turned it into a slick parallax scene powered by CSS custom properties! It\u2019s funny because <a href=\"https:\/\/css-tricks.com\/snippets\/css\/basic-link-rollover-as-css-sprite\/\">image sprites have been around a long time<\/a>, but they still have a lot of use today!<\/p>\n\n\n\n<p>Stay Awesome! \u0295 \u2022\u1d25\u2022\u0294<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some &#8220;whimsy&#8221; for the site. &#x2728; One of the first things that drew my attention was [&hellip;]<\/p>\n","protected":false},"author":265369,"featured_media":357203,"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":"Parallax Powered by CSS Custom Properties by @jh3yy","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[612,1036,506],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/kody.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":334897,"url":"https:\/\/css-tricks.com\/use-css-variables-instead-of-react-context\/","url_meta":{"origin":357192,"position":0},"title":"Use CSS Variables instead of React Context","date":"February 19, 2021","format":false,"excerpt":"Turns out you can use several different libraries to pass color information around components. Or, you could use custom properties, built right into CSS, have no decline in your own developer experience, and deliver a faster experience to your users. Kent proves it here, with demos. For the record, you\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-custom-properties-js-react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300771,"url":"https:\/\/css-tricks.com\/7-uses-for-css-custom-properties\/","url_meta":{"origin":357192,"position":1},"title":"7 Uses for CSS Custom Properties","date":"December 27, 2019","format":false,"excerpt":"I find all seven of these quite clever and useful. I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of code. .some-element { background-color: hsla( var(--h, 120), var(--s, 50), var(--l, 50), var(--a, 1) );\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311801,"url":"https:\/\/css-tricks.com\/global-css-options-with-custom-properties\/","url_meta":{"origin":357192,"position":2},"title":"Global CSS options with custom properties","date":"May 29, 2020","format":false,"excerpt":"With a preprocessor, like Sass, building a logical \"do this or don't\" setting is fairly straightforward: $option: false; @mixin doThing { @if $option { do-thing: yep; } } .el { @include doThing; } Can we do that in native CSS with custom properties? Mark Otto shows that we can. It's\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333595,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/","url_meta":{"origin":357192,"position":3},"title":"A Complete Guide to Custom Properties","date":"April 27, 2021","format":false,"excerpt":"Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as \"CSS Variables\" but that's not their real name.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271136,"url":"https:\/\/css-tricks.com\/a-strategy-guide-to-css-custom-properties\/","url_meta":{"origin":357192,"position":4},"title":"A Strategy Guide To CSS Custom Properties","date":"May 16, 2018","format":false,"excerpt":"CSS preprocessor variables and CSS custom properties (often referred to as \"CSS variables\") can do some of the same things, but are not the same. Practical advice from Mike Riethmuller: If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-variables.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320196,"url":"https:\/\/css-tricks.com\/using-property-for-css-custom-properties\/","url_meta":{"origin":357192,"position":5},"title":"Using @property for CSS Custom Properties","date":"September 2, 2020","format":false,"excerpt":"Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. So rather than something like this: html { --stop: 50%; } ...can be declared with more details like this: @property --stop { syntax: \"<percentage>\"; initial-value: 50%;\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/at-property.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/kody.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357192"}],"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\/265369"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=357192"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357192\/revisions"}],"predecessor-version":[{"id":357205,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357192\/revisions\/357205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/357203"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=357192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=357192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=357192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}