updates

src/assets/prism/code.css

@@ -1,7 +1,7 @@
 article {
   position: relative;
 }
-figure {
+figure.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;

src/assets/prism/code.html

@@ -7,10 +7,10 @@
 
 	<!-- step text -->
 	<article>
-		<div class='step'>
+		<div class='step' data-index='0'>
 			<p>Step text</p>
 		</div>
-		...
+		<!-- ...more steps -->
 	</article>
 
 </div>

src/css/story/intro.styl

@@ -1,13 +1,18 @@
 .intro
 	margin 0 auto
-	padding 3rem 1rem 1rem 1rem
-	background-color $primary
+	padding 3rem 1rem 1.5rem 1rem
+	background-color $gray
+	background-image url('assets/bg.jpg')
+	bacgkround-repeat no-repeat
+	background-position center center
+	background-size cover
 	margin-bottom 3rem
-
+	text-shadow 0 0 3px $bg
 	.intro-inner
 		padding 0 1rem
 		max-width $column-width
-		margin 0 auto
+		margin 3rem auto 1.5rem auto
+		background-color rgba($bg, 0.4)
 
 	&__hed
 		padding-top 5rem

src/css/story/scrolly-overlay.styl

@@ -32,10 +32,10 @@
 	figure.sticky
 		position sticky
 		width 100%
-		height 50vh
 		background $gray
 		margin 0
 		top 25vh
+		height 50vh
 		left 0
 
 		.bar-outer

src/css/story/story.styl

@@ -7,8 +7,9 @@ section
 		background-color $secondary
 		color $bg
 		font-family $mono
-		padding 0.05em 0.5em
+		padding 0.25em 0.5em
 		font-size 0.8em
+		font-weight 600
 		border-radius 2px
 
 #content

template-data/copy.json

@@ -1 +1 @@
-{"hed":"Easier scrollytelling with position sticky","dek":"Leaning on CSS to simplify the process.","sections":[{"id":"intro","text":[{"type":"text","value":"We’ve written a lot about scrollytelling here at The Pudding. We’ve covered everything from a <a href=https://pudding.cool/process/how-to-implement-scrollytelling/ target=_blank>library comparison</a>, to <a href=https://pudding.cool/process/responsive-scrollytelling/ target=_blank>responsive best practices</a>, to a <a href=https://pudding.cool/process/introducing-scrollama/ target=_blank>deep-dive into Scrollama</a>. But there is always room for improvement. Usually the biggest implementation pain with scrollytelling is the <em>sticky graphic pattern</em>, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude."},{"type":"text","value":"<strong>This post will focus on the easiest development solution we’ve come up with yet: offloading this complexity to CSS, using</strong> <code>position: sticky</code>."}]},{"id":"why","hed":"Why use Sticky?","text":[{"type":"text","value":"The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness."}]},{"id":"sticky","hed":"What is Sticky?","text":[{"type":"text","value":"<a href=https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning>Sticky positioning</a> is the love child of <code>position: relative</code> and <code>position: fixed</code> (in which said love child grows up to do bigger and better things while still retaining the lessons of its parents). An element with a <code>position: sticky</code> declaration remains static in the document until a certain threshold is reached, and then it becomes fixed once scrolled to that threshold</a>. A <em>threshold</em> is defined by any directional declaration such as: <code>top: 0;</code>, which becomes fixed once the element reaches the top edge of its parent."},{"type":"text","value":"A sticky element is always relatively positioned to its parent (much like <code>position: absolute;</code>). This means that these elements will stick and unstick only within the bounds of its parent element, not the viewport; it also means that the thresholds are marked by the edges of the parent. The great thing about this constraint is that you can control the overlap (or lack thereof) of multiple stuck elements."}]},{"id":"demo","hed":"In Action","text":[{"type":"text","value":"And now for the good stuff. The first sticky graphic employs the classic side-by-side approach. Scroll on."}]},{"id":"scrolly-side","text":[{"type":"text","value":"The second graphic showcases the overlay approach. Keep on scrolling!"}]},{"id":"scrolly-overlay","text":[{"type":"text","value":"The sticky graphic is entirely handled by CSS, while the only thing done in JavaScript is handling the step triggers. We chose to use <a href=https://github.com/russellgoldenberg/enter-view target=_blank>enter-view.js</a> here because it has an incredibly simple interface, super lightweight, and Russell wrote it 😀. However, any trigger library will work, be it <a href=http://imakewebthings.com/waypoints/ target=_blank>Waypoints</a>, <a href=https://github.com/russellgoldenberg/scrollama target=_blank>Scrollama</a>, or another library."}]},{"id":"code","hed":"The Code","text":[{"type":"text","value":"Below is the core HTML, CSS and JavaScript that makes this work, excluding the code for aesthetics. You can view the full code for these examples on <a href=https://codepen.io/collection/XBWPqE/ target=_blank>codepen</a> or <a href=https://github.com/the-pudding/blog_scrollytelling-sticky target=_blank>github</a> for the this full article."}]},{"id":"code-html"},{"id":"code-css"},{"id":"code-js"},{"id":"conclusion","hed":"Wrap Up","text":[{"type":"text","value":"You can still implement this behavior in JavaScript, but <code>position: sticky</code> has a few core benefits which give it the upper hand when it comes to development. Scroll listeners in JavaScript aren’t always the best solution: they can inhibit performance and are sometimes quite janky. Depending on the speed of scroll and the device someone is using, the listener might fall out-of-sync and need to catch up with a scroll, causing an element to jump into place instead of displaying a smooth locking behavior. Beyond performance concerns, it’s much simpler to write 2 lines of CSS than a bunch of JavaScript."},{"type":"text","value":"But is it well-supported? <a href=https://caniuse.com/#feat=css-sticky>Yes it is!</a> Apart from a few minor bugs with <code>thead</code> and <code>tr</code> elements, it’s good to go across the latest versions of all major browsers. IE doesn’t support this feature (<em>ugh, of course...</em>), but there are a <a href=https://github.com/wilddeer/stickyfill>few polyfills</a> and <a href=https://github.com/dollarshaveclub/stickybits>companions</a> out there with loose support for certain directional thresholds. If polyfills aren’t your jam or the ones available just aren’t cutting it, you can always… do nothing! The beauty of <code>position: sticky</code> is that it has built-in graceful degradation; if a browser doesn’t support it, the element will stay static in the source order it was added. And if you want to get extra fancy, you can use a <a href=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/>feature query</a> <code>@supports (position: sticky)</code> and implement a fallback layout."}]}]}
+{"hed":"Easier scrollytelling with position sticky","dek":"Leaning on CSS to simplify the process.","sections":[{"id":"intro","text":[{"type":"text","value":"We’ve written a lot about scrollytelling here at The Pudding. We’ve covered everything from a <a href=https://pudding.cool/process/how-to-implement-scrollytelling/ target=_blank>library comparison</a>, to <a href=https://pudding.cool/process/responsive-scrollytelling/ target=_blank>responsive best practices</a>, to a <a href=https://pudding.cool/process/introducing-scrollama/ target=_blank>deep-dive into Scrollama</a>. But there is always room for improvement. One of the biggest implementation pains with scrollytelling is the <em>sticky graphic pattern</em>, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude."},{"type":"text","value":"<strong>This post will focus on the easiest solution we’ve come up with yet: offloading the sticky complexity to CSS, using</strong> <code>position: sticky</code>."}]},{"id":"why","hed":"Why use Sticky?","text":[{"type":"text","value":"The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness."}]},{"id":"sticky","hed":"What is Sticky?","text":[{"type":"text","value":"<a href=https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning>Sticky positioning</a> is the unapologetic love child of <code>position: relative</code> and <code>position: fixed</code> (in which said love child grows up to do bigger and better things while still retaining the lessons of its parents). An element with a <code>position: sticky</code> declaration remains static in the document until a certain threshold is reached, and then it becomes fixed once scrolled to that threshold</a>. A <em>threshold</em> is defined by any directional declaration such as: <code>top: 0;</code>, which becomes fixed once the element reaches the top edge of its parent."},{"type":"text","value":"A sticky element is always relatively positioned to its parent (much like <code>position: absolute;</code>). This means that these elements will stick and unstick only within the bounds of its parent element, not the viewport (making our job easier); it also means that the thresholds are marked by the edges of the parent. The great thing about this constraint is that you can control the overlap (or lack thereof) of multiple stuck elements."}]},{"id":"demo","hed":"In Action","text":[{"type":"text","value":"And now for the good stuff. The first example here uses the classic side-by-side approach. Scroll on."}]},{"id":"scrolly-side","text":[{"type":"text","value":"The second example uses the text overlay approach. Keep on scrolling!"}]},{"id":"scrolly-overlay","text":[{"type":"text","value":"The sticky graphic is entirely handled by CSS, while the only thing done in JavaScript is handling the step triggers. We chose to use <a href=https://github.com/russellgoldenberg/enter-view target=_blank>enter-view.js</a> here because it has an incredibly simple interface, super lightweight, and Russell wrote it 😀. However, any trigger library will work, be it <a href=http://imakewebthings.com/waypoints/ target=_blank>Waypoints</a>, <a href=https://github.com/russellgoldenberg/scrollama target=_blank>Scrollama</a>, or another library."}]},{"id":"code","hed":"The Code","text":[{"type":"text","value":"Below is the core HTML, CSS and JavaScript that makes this work, excluding the code for aesthetics. You can view the full code for these examples on <a href=https://codepen.io/collection/XBWPqE/ target=_blank>codepen</a>, or <a href=https://github.com/the-pudding/blog_scrollytelling-sticky target=_blank>github</a> for the the full article."}]},{"id":"code-html"},{"id":"code-css"},{"id":"code-js"},{"id":"conclusion","hed":"Wrap Up","text":[{"type":"text","value":"You can still implement this behavior in JavaScript, but <code>position: sticky</code> has a few core benefits which give it the upper hand when it comes to development. Scroll listeners in JavaScript aren’t always the best solution: they can inhibit performance and are sometimes quite janky. Depending on the speed of scroll and the device someone is using, the listener might fall out-of-sync and need to catch up with a scroll, causing an element to jump into place instead of displaying a smooth locking behavior. Beyond performance concerns, it’s much simpler to write two lines of CSS than a bunch of JavaScript."},{"type":"text","value":"But is it well-supported? <a href=https://caniuse.com/#feat=css-sticky>Yes it is!</a> Apart from a few minor bugs with <code>thead</code> and <code>tr</code> elements, it’s good-to-go across the latest versions of all major browsers. IE doesn’t support this feature (<em>ugh, of course...</em>), but there are a <a href=https://github.com/wilddeer/stickyfill>few polyfills</a> and <a href=https://github.com/dollarshaveclub/stickybits>companions</a> out there with loose support for certain directional thresholds. If polyfills aren’t your jam or the ones available just aren’t cutting it, you can always… do nothing! The beauty of <code>position: sticky</code> is that it has built-in graceful degradation; if a browser doesn’t support it, the element will stay static in the source order it was added. And if you want to get extra fancy, you can use a <a href=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/>feature query</a> <code>@supports (position: sticky)</code> and implement a fallback layout."}]}]}