{"id":394,"date":"2025-07-08T16:39:45","date_gmt":"2025-07-08T06:39:45","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=394"},"modified":"2025-07-08T16:39:45","modified_gmt":"2025-07-08T06:39:45","slug":"parallax-backgrounds-endless-scroll","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/08\/parallax-backgrounds-endless-scroll\/","title":{"rendered":"Parallax backgrounds\/endless scroll"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">Parallax backgrounds\/endless scroll<\/h1>\n\n\n<p>See also:<\/p>\n\n\n\n<p>System:<\/p>\n\n\n\n<p>needs a single variable to control the scrolling &#8211; otherwise there may be a gap which changes over time\u2026<\/p>\n\n\n\n<p>Covered in AGDwJS p 316 (Creating the Scrolling Background)<\/p>\n\n\n\n<p>Requirements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>needs to be dynamic speed<\/li>\n\n\n\n<li>needs to not have gaps<\/li>\n\n\n\n<li>layers move at different relative speeds<\/li>\n\n\n\n<li>functionality easily allows for going in either direction<\/li>\n<\/ul>\n\n\n\n<p>This one works by &#8211;&nbsp;<\/p>\n\n\n\n<p>2 instances of image<\/p>\n\n\n\n<p>one next to another<\/p>\n\n\n\n<p>when image 2 gets to 0, reset both instances: image 1 to 0, image 2 to width of<\/p>\n\n\n\n<p>Layers<\/p>\n\n\n\n<p>(<a href=\"https:\/\/www.youtube.com\/watch?v=GFO_txvwK_c&amp;t=2587s\">JavaScript Game Development Course for Beginners<\/a>)<\/p>\n\n\n\n<p>setup in html<\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html lang=&#8221;en&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&#8221;UTF-8&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Parallax Backgrounds&lt;\/title&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/head&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas id=&#8221;canvas1&#8243;&gt;&lt;\/canvas&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&#8221;script.js&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<p>css<\/p>\n\n\n\n<p>body {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;background: black;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>#canvas1 {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;border: 3px solid white;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;left: 50%;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(-50%, -50%);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;width: 800px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;height: 700px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>setting up in js<\/p>\n\n\n\n<p>const canvas = document.getElementById(&#8216;canvas1&#8217;);<\/p>\n\n\n\n<p>const ctx = canvas.getContext(&#8216;2d&#8217;);<\/p>\n\n\n\n<p>const CANVAS_WIDTH = canvas.width = 800;<\/p>\n\n\n\n<p>const CANVAS_HEIGHT = canvas.height = 800;<\/p>\n\n\n\n<p>How to do in AGDwHTML5 (rudimentary one on p316\u2026)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<p>the kittykat thing&#8230;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See also: System: needs a single variable to control the scrolling &#8211; otherwise there may be a gap which changes over time\u2026 Covered in AGDwJS p 316 (Creating the Scrolling Background) Requirements: This one works by &#8211;&nbsp; 2 instances of image one next to another when image 2 gets to 0, reset both instances: image [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":1,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/394\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}