{"id":300822,"date":"2020-01-02T14:00:46","date_gmt":"2020-01-02T21:00:46","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300822"},"modified":"2020-01-02T14:57:06","modified_gmt":"2020-01-02T21:57:06","slug":"neal-fun","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/neal-fun\/","title":{"rendered":"Neal.fun"},"content":{"rendered":"<p>Hats off to Neal Agarwal for some stellar interactive work lately, like <a href=\"https:\/\/neal.fun\/deep-sea\/\" rel=\"noopener\">The Deep Sea<\/a>, a vertical scrolling experience to help us understand the depth of the oceans, and <a href=\"https:\/\/neal.fun\/size-of-space\/\" rel=\"noopener\">The Size of Space<\/a>, a side-scrolling experience to help us understand the size scale of things in the universe (check out <a href=\"https:\/\/joshworth.com\/dev\/pixelspace\/pixelspace_solarsystem.html\" rel=\"noopener\">Josh Worth&#8217;s similar take<\/a> on distance).<\/p>\n<p>But mostly, way to rock that <code>.fun<\/code> <abbr title=\"Top-Level Domain\">TLD<\/abbr>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hats off to Neal Agarwal for some stellar interactive work lately, like The Deep Sea, a vertical scrolling experience to help us understand the depth of the oceans, and The Size of Space, a side-scrolling experience to help us understand the size scale of things in the universe (check out Josh Worth&#8217;s similar take on [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":300889,"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":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/neal-fun-underwater.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":178538,"url":"https:\/\/css-tricks.com\/pure-css-parallax-scrolling-websites\/","url_meta":{"origin":300822,"position":0},"title":"Pure CSS parallax scrolling websites","date":"August 11, 2014","format":false,"excerpt":"Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element \"away\" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":274060,"url":"https:\/\/css-tricks.com\/your-body-text-is-too-small\/","url_meta":{"origin":300822,"position":1},"title":"Your Body Text is Too Small","date":"July 20, 2018","format":false,"excerpt":"Several years ago, there was a big push by designers to increase the font-size of websites and I feel like we\u2019re living in another era of accessibility improvements where a fresh batch of designers are pushing for even larger text sizing today. Take this post by Christian Miller, for example,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14311,"url":"https:\/\/css-tricks.com\/fancy-scrolling-sites\/","url_meta":{"origin":300822,"position":2},"title":"Fancy Scrolling Sites","date":"September 14, 2011","format":false,"excerpt":"In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history. By \"fancy things\" I mean something happens when scrolling down besides the site scrolling\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Nizo.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":333276,"url":"https:\/\/css-tricks.com\/cancelable-smooth-scrolling\/","url_meta":{"origin":300822,"position":3},"title":"&#8220;Cancelable&#8221; Smooth Scrolling","date":"February 1, 2021","format":false,"excerpt":"Here's the situation: Your site offers a \"scroll back to top\" button, and you've implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325209,"url":"https:\/\/css-tricks.com\/bidirectional-scrolling-whats-not-to-like\/","url_meta":{"origin":300822,"position":4},"title":"Bidirectional scrolling: what\u2019s not to like?","date":"November 6, 2020","format":false,"excerpt":"Some baby bear thinking from Adam Silver. Too hot: [On horizontal scrolling, like Netflix] This pattern is accessible, responsive and consistent across screen sizes. And it\u2019s pretty easy to implement. Too cold: That\u2019s a lot of pros for a pattern that in reality has some critical downsides. Just right: [On\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/link-to-each-category.png?fit=1200%2C717&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":17854,"url":"https:\/\/css-tricks.com\/responsive-web-above-the-fold\/","url_meta":{"origin":300822,"position":5},"title":"Responsive Web Above The Fold","date":"August 28, 2012","format":false,"excerpt":"A guest post by Arley McBlain on using media queries to adjust for available vertical space.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/08\/browsersize.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/neal-fun-underwater.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300822"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=300822"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300822\/revisions"}],"predecessor-version":[{"id":300910,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300822\/revisions\/300910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300889"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=300822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=300822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=300822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}