{"id":18103,"date":"2021-04-05T16:40:46","date_gmt":"2021-04-05T20:40:46","guid":{"rendered":"https:\/\/www.ceros.com\/inspire\/?p=18103"},"modified":"2022-04-20T15:34:43","modified_gmt":"2022-04-20T19:34:43","slug":"design-decoded-scroll-snap","status":"publish","type":"post","link":"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/","title":{"rendered":"Design Decoded: Ceros Explains the Scroll Snap"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Welcome to&nbsp;<strong>Design Decoded<\/strong>, our original video series. In each video, we\u2019ll trace the history of some popular UX design element and attempt to explain its ubiquity. In previous videos, we&#8217;ve taken a look at&nbsp;<a href=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-caret\/\">the caret<\/a> and the&nbsp;<a href=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-hamburger-menu\/\">hamburger menu<\/a>. This time, we\u2019re examining&nbsp;<strong>the scroll snap<\/strong>.<\/p>\n\n\n\n<script src=\"https:\/\/fast.wistia.com\/embed\/medias\/4kcpugzor5.jsonp\" async=\"\"><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async=\"\"><\/script><div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"><div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"><span class=\"wistia_embed wistia_async_4kcpugzor5 popover=true popoverAnimateThumbnail=true videoFoam=true\" style=\"display:inline-block;height:100%;position:relative;width:100%\">&nbsp;<\/span><\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><em>Riddle me this\u2014what do this web page, and this app, and this site all have in common? <\/em><\/p>\n\n\n\n<p><em>They snap. <\/em><\/p>\n\n\n\n<p><em>Scroll snapping is a relatively new feature for controlling how an element moves across the screen. With just a little bit of code, designers can guarantee that users won\u2019t accidentally miss anything as they scroll along. You\u2019re probably wondering\u2014what\u2019s so special about web pages that snap? To answer that, let\u2019s go back to the basics of scrolling. <\/em><\/p>\n\n\n\n<p><em>Scrolling has been around since the first basic computers, but it wasn\u2019t until long pages on the web became more common (let\u2019s call it the mid-90s) that scrolling became second nature. What made this possible was the scroll bar. <\/em><\/p>\n\n\n\n<p><em>Remember the scroll bar? It not only helped users move up and down a page, but it also showed them where they were. As with most elements of web design, scrolling changed when the iPhone hit the scene in 2007. Who needs a scroll bar when you can just use your finger? <\/em><\/p>\n\n\n\n<p><em>One of the ways that the iPhone changed the scroll was by introducing the rubber band effect. It\u2019s now a common feature of any touch screen. When you get to the bottom of any page, the screen bounces back into place, to let you know exactly where you are\u2014the bottom.\u00a0<\/em><\/p>\n\n\n\n<p><em>Scroll snap creators felt like they had to alert users that they were at the bottom of a screen because if it stayed still, users would think it was broken.\u00a0First created in Javascript, and now in CSS, the scroll snap gives designers more flexibility in how they display information. But what it\u2019s really good at\u2014kind of like the rubber band effect\u2014is helping to avoid false floors. Thanks to the scroll snap, you won\u2019t get stuck thinking that you\u2019re at the end of the page or carousel when you\u2019re actually not. <\/em><\/p>\n\n\n\n<p><em>So next time you catch yourself looking at your screen, remember that good design isn\u2019t always about the destination. Sometimes, it\u2019s about the journey.<\/em><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<div class=\"myclass\">In this original video, we explore the history of the scroll snap and explain why designers are creating web pages that snap.<\/div>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":18167,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design Decoded: Ceros Explains the Scroll Snap - Ceros Inspire<\/title>\n<meta name=\"description\" content=\"In this original video, we explore the history of the scroll snap and explain why designers are creating web pages that snap.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Decoded: Ceros Explains the Scroll Snap - Ceros Inspire\" \/>\n<meta property=\"og:description\" content=\"In this original video, we explore the history of the scroll snap and explain why designers are creating web pages that snap.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/\" \/>\n<meta property=\"og:site_name\" content=\"Ceros Inspire\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-05T20:40:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-20T19:34:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2021\/04\/770x556-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"556\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Ramsey Neville\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\",\"url\":\"https:\/\/www.ceros.com\/inspire\/\",\"name\":\"Ceros Inspire\",\"description\":\"Just another Ceros Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.ceros.com\/inspire\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2021\/04\/770x556-1.png\",\"width\":770,\"height\":556},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/#webpage\",\"url\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/\",\"name\":\"Design Decoded: Ceros Explains the Scroll Snap - Ceros Inspire\",\"isPartOf\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/#primaryimage\"},\"datePublished\":\"2021-04-05T20:40:46+00:00\",\"dateModified\":\"2022-04-20T19:34:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/0fd443ce9eaa6a8890a9bb85b908b4b8\"},\"description\":\"In this original video, we explore the history of the scroll snap and explain why designers are creating web pages that snap.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ceros.com\/inspire\/originals\/design-decoded-scroll-snap\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/0fd443ce9eaa6a8890a9bb85b908b4b8\",\"name\":\"Ramsey Neville\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d553a588fd518b2ecae8943c0206908a?s=96&d=mm&r=g\",\"caption\":\"Ramsey Neville\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/18103"}],"collection":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/comments?post=18103"}],"version-history":[{"count":15,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/18103\/revisions"}],"predecessor-version":[{"id":19631,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/18103\/revisions\/19631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media\/18167"}],"wp:attachment":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media?parent=18103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/categories?post=18103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/tags?post=18103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}