{"id":363882,"date":"2022-03-02T07:57:32","date_gmt":"2022-03-02T15:57:32","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363882"},"modified":"2022-03-02T07:57:34","modified_gmt":"2022-03-02T15:57:34","slug":"css-raise-the-curtains-effect","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-raise-the-curtains-effect\/","title":{"rendered":"How to Make a \u201cRaise the Curtains\u201d Effect in CSS"},"content":{"rendered":"\n<p>\u201cRaise the curtains\u201d is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here\u2019s an example where I used the effect on a <a href=\"https:\/\/www.wundermobility.com\/sharing-ready-vehicles\/\" rel=\"noopener\">real-life project<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='289' src='https:\/\/videopress.com\/embed\/VJgwbTsL?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>Want to know how it\u2019s done? I will take you behind the curtain and show you how to raise it, with nothing but HTML and CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"let-s-start-with-the-html\">Let\u2019s start with the HTML<\/h3>\n\n\n<p>What we&#8217;re making is sort of a simplified &#8220;raise the curtain&#8221; effect like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1636\" height=\"736\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=1636%2C736&#038;ssl=1\" alt=\"Showing the raise the curtains effect from dark blue to wheat.\" class=\"wp-image-363923\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?w=1636&amp;ssl=1 1636w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=1024%2C461&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=768%2C346&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=1536%2C691&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?resize=1000%2C450&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The background and text both change color while scrolling over the element.<\/figcaption><\/figure>\n\n\n\n<p>I\u2019m keeping things simple for the sake of clarity, but we can stub this out with three elements:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"curtain\">\n  &lt;div class=\"invert\">\n    &lt;h2>Section title&lt;\/h2>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>First, we need a container for the curtain, which we\u2019ll give a <code>.curtain<\/code> class. Then, inside the <code>.curtain<\/code>, we have the an <code>.invert<\/code> child element that will serve as our \u201csticky\u201d box. And, finally, we have the content inside this box \u2014 a good old-fashioned <code>&lt;h2&gt;<\/code> element for this specific example.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"let-s-set-up-some-css-variables\">Let\u2019s set up some CSS variables<\/h3>\n\n\n<p>There are three values we know we\u2019ll need upfront. Let\u2019s make CSS variables out of them so it\u2019s easy to write them into our styles and easily change them later if we need to.<\/p>\n\n\n\n<ul><li><code>--minh<\/code> &#8211; The height of the container<\/li><li><code>--color1<\/code> &#8211; The light color<\/li><li><code>--color2<\/code> &#8211; The dark color<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  --minh: 98vh;\n  --color1: wheat;\n  --color2: midnightblue;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"time-to-draw-the-curtain\">Time to draw the curtain<\/h3>\n\n\n<p>Next, we can define our <code>.curtain<\/code> element using the following techniques:<\/p>\n\n\n\n<ul><li>A <code>linear-gradient<\/code> for the \u201csplit\u201d background<\/li><li><code>min-height<\/code> for the extra space at the bottom of the container<\/li><\/ul>\n\n\n\n<p>We use the <code>::after<\/code> pseudo-element to add the extra space to the bottom. This way, our \u201csticky\u201d content will actually stick to the container while scrolling past the <code>::after<\/code> element. It\u2019s an illusion.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.curtain {\n  \/** create the \"split\" background **\/\n  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);\n}\n\n\/** add extra space to the bottom (need this for the \"sticky\" effect) **\/\n.curtain::after {\n  content: \"\";\n  display: block;\n  min-height: var(--minh);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"making-sticky-content\">Making sticky content<\/h3>\n\n\n<p>Next up, we need to make our content \u201csticky\u201d in the sense that it sits perfectly inside the container as the background and text swap color values. In fact, we already gave the <code>.curtain<\/code>&#8216;s child element an <code>.invert<\/code> class that we can use as the sticky container.<\/p>\n\n\n\n<p>Stay with me for a moment \u2014 here\u2019s how this is going to play out:<\/p>\n\n\n\n<ul><li><code>position: sticky<\/code> and <code>top<\/code> define the stickiness and where it sticks.<\/li><li><code>mix-blend-mode: difference<\/code> blends the color of the content inside the <code>&lt;h2&gt;<\/code> element into the <code>.curtain<\/code>&#8216;s background gradient.<\/li><li><code>display: flex<\/code> centers the content for presentation.<\/li><li><code>min-height<\/code> defines the height of the container and allows for the extra space at the bottom.<\/li><li><code>color<\/code> sets the color of the <code>h2<\/code> heading.<\/li><\/ul>\n\n\n\n<p>Now to put that into CSS code!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.invert {\n  \/** make the content sticky **\/\n  position: sticky;\n  top: 20px;\n\n  \/** blend the content with the contrast effect **\/\n  mix-blend-mode: difference;\n\n  \/** center the content **\/\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  \/** set the minimum height of the section **\/\n  min-height: var(--minh);\n}\n\nh2 {\n  \/** set the color of the text **\/\n  color: var(--color1);\n}<\/code><\/pre>\n\n\n\n<p>There are many things going on here, so let\u2019s explain each one of them.<\/p>\n\n\n\n<p>First, we have a sticky position that is self-explanatory and flexbox to help <a href=\"https:\/\/css-tricks.com\/centering-css-complete-guide\/\">center the content<\/a>. Nothing new or particularly tricky about this.<\/p>\n\n\n\n<p>The content\u2019s height is set using CSS variable and the value is the same height value as the <code>.curtain::after<\/code> pseudo-element.<\/p>\n\n\n\n<p>The <code>mix-blend-mode: difference<\/code> declaration blends our content with the background. The <code>difference<\/code> value is complicated, but you might visualize it like inverted text color against the background. Here\u2019s a nice demo from the CSS-Tricks Almanac showing off the different <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\"><code>mix-blend-mode<\/code><\/a> values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzWpPLy\" src=\"\/\/codepen.io\/anon\/embed\/YzWpPLy?height=550&amp;theme-id=1&amp;slug-hash=YzWpPLy&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzWpPLy\" title=\"CodePen Embed YzWpPLy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To make the blending work, we need to set the color of our heading. In this case, we&#8217;re assigning a light color value (<code>wheat<\/code>) to the <code>--color1<\/code> variable.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"raise-the-curtains-demo\">&#8220;Raise the Curtains&#8221; Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzEERmQ\" src=\"\/\/codepen.io\/anon\/embed\/YzEERmQ?height=500&amp;theme-id=1&amp;slug-hash=YzEERmQ&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzEERmQ\" title=\"CodePen Embed YzEERmQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"gotchas\">Gotchas<\/h3>\n\n\n<p>I experienced a few problems while working out the details of the &#8220;raise the curtain&#8221; effect. If you want to add images to the \u201csticky\u201d content, for example, avoid using images that don\u2019t look good when their colors are inverted. Here\u2019s a quick demo where I made a simple SVG and transparent PNG image, and it looks good.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExwRmyp\" src=\"\/\/codepen.io\/anon\/embed\/ExwRmyp?height=650&amp;theme-id=1&amp;slug-hash=ExwRmyp&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExwRmyp\" title=\"CodePen Embed ExwRmyp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another gotcha: there\u2019s no way to set <code>mix-blend-mode: difference<\/code> on specific child elements, like headings, while avoiding the effect on images. I discovered there are several reasons why it doesn\u2019t work, the first of which is that <code>position: sticky<\/code> cancels the blending.<\/p>\n\n\n\n<p>The same goes when using something like <code>transform: skewY<\/code> on the container to add a little &#8220;tilt&#8221; to things. I suspect other properties don\u2019t play well with the blending, but I didn\u2019t go that far to find out which ones.<\/p>\n\n\n\n<p>Here\u2019s the demo without scrolling that removes the troubling properties:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEXRKxR\" src=\"\/\/codepen.io\/anon\/embed\/ZEXRKxR?height=650&amp;theme-id=1&amp;slug-hash=ZEXRKxR&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEXRKxR\" title=\"CodePen Embed ZEXRKxR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"curtain-call\">Curtain call!<\/h3>\n\n\n<p>I enjoyed building this component, and I always love it when I can accomplish something using only HTML and CSS, especially when they work smoothly on every browser.<\/p>\n\n\n\n<p>What will make with it? Is there a different way you would approach a \u201craise the curtain\u201d effect like this? Let me know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cRaise the curtains\u201d is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position.<\/p>\n","protected":false},"author":259791,"featured_media":363923,"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":"How to Make a \u201cRaise the Curtains\u201d Effect in CSS by @malimirkeccita","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1552,754,1300],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?fit=1636%2C736&ssl=1","jetpack-related-posts":[{"id":303002,"url":"https:\/\/css-tricks.com\/getting-fancy-with-position-sticky\/","url_meta":{"origin":363882,"position":0},"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":275805,"url":"https:\/\/css-tricks.com\/creating-sliding-effects-using-sticky-positioning\/","url_meta":{"origin":363882,"position":1},"title":"Creating sliding effects using sticky positioning","date":"September 10, 2018","format":false,"excerpt":"Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way! Here\u2019s a typical (um) sticky situation: See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen. Sticky elements (position: sticky;) are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/sticky-featured.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325353,"url":"https:\/\/css-tricks.com\/creating-webgl-effects-with-curtainsjs\/","url_meta":{"origin":363882,"position":2},"title":"Creating WebGL Effects with CurtainsJS","date":"November 18, 2020","format":false,"excerpt":"This article focuses adding WebGL effects to <image> and <video> elements of an already \u201ccompleted\u201d web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject by distilling the process into a few steps:\u00a0 Create a web\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/webgl-effects-curtainsjs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":46,"url":"https:\/\/css-tricks.com\/hangtab-create-a-sticky-tag-from-the-edge-of-the-browser-window-even-with-centered-content\/","url_meta":{"origin":363882,"position":3},"title":"HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)","date":"August 20, 2007","format":false,"excerpt":"It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowadays with monitors getting bigger and bigger and with higher resolution. Sometimes it's nice to break the rules though, for effect. Check out Panic's website for their software\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":271818,"url":"https:\/\/css-tricks.com\/animate-images-and-videos-with-curtains-js\/","url_meta":{"origin":363882,"position":4},"title":"Animate Images and Videos with curtains.js","date":"June 6, 2018","format":false,"excerpt":"While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also tend to use libraries built on top of WebGL such as three.js\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/curtainsjs-featured.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353219,"url":"https:\/\/css-tricks.com\/websites-we-like-md-nichrome\/","url_meta":{"origin":363882,"position":5},"title":"Websites We Like: MD Nichrome","date":"October 6, 2021","format":false,"excerpt":"Here\u2019s a beautiful website: it\u2019s a type specimen for Mass-Driver\u2019s ever-so-lovely type family MD Nichrome. There\u2019s a ton of nifty animations and graphics explaining all the features inside\u2026 If you're wondering how those animations work, they're actually styled <video> elements. There\u2019s lots of great graphic design touches as well, such\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/CleanShot-2021-10-04-at-08.35.26.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/curtain-effect.png?fit=1024%2C461&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363882"}],"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\/259791"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=363882"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363882\/revisions"}],"predecessor-version":[{"id":364870,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363882\/revisions\/364870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/363923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=363882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=363882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=363882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}