{"id":2180,"date":"2011-04-26T09:00:00","date_gmt":"2011-04-26T09:00:00","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2180"},"modified":"2011-04-26T09:00:00","modified_gmt":"2011-04-26T09:00:00","slug":"scrolling-websites-8-great-examples","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/scrolling-websites-8-great-examples\/","title":{"rendered":"Scrolling websites: 10 great examples"},"content":{"rendered":"<p>The fold is dead, scrolling is fun. Here is a gallery of websites that turn scrolling into a pleasant interaction.<\/p>\n<p><!--more--><\/p>\n<h3>Down to the Wire : The Story of New Zealand&#8217;s Internet<\/h3>\n<p>This website made by Heyday uses a <a href=\"http:\/\/downtothewire.co.nz\/mysite\/themes\/dttw\/js\/jquery.heyday.gearedscrolling.js\">custom jQuery plugin<\/a> to create a &#8220;geared scrolling&#8221; effect.<\/p>\n<p><a href=\"http:\/\/downtothewire.co.nz\/the-beginning-1989\/\" hreflang=\"en\">http:\/\/downtothewire.co.nz\/the-beginning-1989\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/PWbN9UokhcQ?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Beercamp at SXSW 2011<\/h3>\n<p>In this case, CSS3 transforms are used to create a 3D effect when you scroll.<\/p>\n<p><a href=\"http:\/\/2011.beercamp.com\/\" hreflang=\"en\">http:\/\/2011.beercamp.com\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/vLOA9FKRUZw?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Heyday Digital<\/h3>\n<p>The navigation menu stays on top and automatically highlights the current section.<\/p>\n<p><a href=\"http:\/\/heyday.co.nz\/about\/\" hreflang=\"en\">http:\/\/heyday.co.nz\/about\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/YKibDgP1ufo?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Ben The Bodyguard<\/h3>\n<p>Ben the Bodyguard walks down the street as you scroll.<\/p>\n<p><a href=\"http:\/\/benthebodyguard.com\/\" hreflang=\"en\">http:\/\/benthebodyguard.com\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/SYhaFi77jdM?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Bloom.io<\/h3>\n<p>A parallax effect happens as you scroll. Notice the great use of blurred transparent PNGs to create a sense of depth.<\/p>\n<p><a href=\"http:\/\/bloom.io\/\" hreflang=\"en\">http:\/\/bloom.io\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/1sO3WtjeYqs?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Nike Better World<\/h3>\n<p>Great use of parallax effect<\/p>\n<p><a href=\"http:\/\/www.nikebetterworld.com\/\" hreflang=\"en\">http:\/\/www.nikebetterworld.com\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/kmGDwm5-a80\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Coco Cola Daft Punk<\/h3>\n<p>Another parallax effect, very similar to Nike Better World.<\/p>\n<p><a href=\"http:\/\/coca-cola.fr\/daftcoke\/index.html\" hreflang=\"en\">http:\/\/coca-cola.fr\/daftcoke\/index.html<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/5hATsbGl6Xk?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>TED x Portland<\/h3>\n<p>Typography &#8220;teleports&#8221; to the bottom of the page<\/p>\n<p><a href=\"http:\/\/tedxportland.com\/\" hreflang=\"en\">http:\/\/tedxportland.com\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/ZX406UH2mKc?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Atlantis World&#8217;s Fair<\/h3>\n<p>Travel to Atlantis by scrolling the page. In this case, no javascript, only CSS with <code>position: fixed<\/code>.<\/p>\n<p><a href=\"http:\/\/lostworldsfairs.com\/atlantis\/\" hreflang=\"en\">http:\/\/lostworldsfairs.com\/atlantis\/<\/a><\/p>\n<p> <iframe loading=\"lazy\" title=\"YouTube video player\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/WM-lUbAONBU?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>ala.ch<\/h3>\n<p><a href=\"http:\/\/ala.ch\/\" hreflang=\"en\">http:\/\/ala.ch\/<\/a> (via <a href=\"http:\/\/larlet.com\/\">David Larlet<\/a>)<\/p>\n<p> <iframe loading=\"lazy\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/IYjdM506310?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<h3>Jan Ploch<\/h3>\n<p><a href=\"http:\/\/www.janploch.de\/\" hreflang=\"en\">http:\/\/www.janploch.de\/<\/a> (via <a href=\"http:\/\/www.stpo.fr\/\">STPo<\/a>)<\/p>\n<p> <iframe loading=\"lazy\" width=\"640\" height=\"390\" src=\"http:\/\/www.youtube.com\/embed\/NUZqEx5Yilo?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe> <\/p>\n<p>Let me know if you have more great examples of scrolling websites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The fold is dead, scrolling is fun. Here is a gallery of websites that turn scrolling into a pleasant interaction.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2180"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2180"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2180\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}