Uploaded May 2021 | Updated September 2026, 2 weeks ago
What is the easiest way to create endlessly scrolling backgrounds with JavaScript? How to make different layers move at different speeds and create parallax effect? How to make our scroll speed dynamic so that we can easily change it? We will learn all of that and more. Let's build JavaScript game for beginners together!
FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
Parallax scrolling is when background images move past the camera slower than the foreground, creating an illusion of depth in a 2D space. In this step by step tutorial for beginners, I will show how to implement parallax into your JavaScript games, using HTML canvas element. Have fun! :)
⭐️TABLE OF CONTENT ⭐️
00:00 Course Introduction and basic HTML/CSS setup
02:42 How to set up HTML5 canvas project with JavaScript
04:36 How to bring images into HTML5 canvas project
07:21 How to animate on canvas
11:00 Endlessly scrolling backgrounds technique 1
18:01 Background layers with JavaScript ES6 classes
30:49 User input with event listeners
35:01 Endlessly scrolling backgrounds technique 2
42:14 Optimisations
By the end of this JavaScript game development tutorial for beginners, you will have deep understanding about endlessly scrolling backgrounds and how to add parallax effect to your games and websites. We won't use any libraries, just HTML5 canvas, a little bit of CSS3 and plain vanilla JavaScript.
🔥 Recommended UDEMY courses 🔥
☕ Demystifying Parallax: Learn to Create Interactive Web Pages bit.ly/3uueECP
☕ Website Development Build single Page Website Parallax site bit.ly/3uueDyL
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Level Up Your CSS Animation Skills bit.ly/3esJkP8
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
❤ Related Links ❤
Art by bevouliin.com
Project images:
All layers zip: frankslaboratory.co.uk/downloads/backgroundLayers.zip
Layer 1: frankslaboratory.co.uk/downloads/layer-1.png
Layer 2: frankslaboratory.co.uk/downloads/layer-2.png
Layer 3: frankslaboratory.co.uk/downloads/layer-3.png
Layer 4: frankslaboratory.co.uk/downloads/layer-4.png
Layer 5: frankslaboratory.co.uk/downloads/layer-5.png
Backup links:
Layer 1 ibb.co/qs87t6x
Layer 2 ibb.co/0yYGJzF
Layer 3 ibb.co/F3870v3
Layer 4 ibb.co/WFXS3sY
Layer 5 ibb.co/BTpQvgJ
(*** you can use these background images for learning purposes. For commercial projects you can purchase it directly from the artists. To see the full selection of available GAME DEVELOPMENT ART ASSETS, please visit bevouliin.com ***)
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: *** this video ***
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
🎮 More GAME DEVELOPMENT with vanilla JavaScript and HTML canvas:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
What is the easiest way to create endlessly scrolling backgrounds with JavaScript? How to make different layers move at different speeds and create parallax effect? How to make our scroll speed dynamic so that we can easily change it? We will learn all of that and more. Let's build JavaScript game for beginners together!
FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
Parallax scrolling is when background images move past the camera slower than the foreground, creating an illusion of depth in a 2D space. In this step by step tutorial for beginners, I will show how to implement parallax into your JavaScript games, using HTML canvas element. Have fun! :)
⭐️TABLE OF CONTENT ⭐️
00:00 Course Introduction and basic HTML/CSS setup
02:42 How to set up HTML5 canvas project with JavaScript
04:36 How to bring images into HTML5 canvas project
07:21 How to animate on canvas
11:00 Endlessly scrolling backgrounds technique 1
18:01 Background layers with JavaScript ES6 classes
30:49 User input with event listeners
35:01 Endlessly scrolling backgrounds technique 2
42:14 Optimisations
By the end of this JavaScript game development tutorial for beginners, you will have deep understanding about endlessly scrolling backgrounds and how to add parallax effect to your games and websites. We won't use any libraries, just HTML5 canvas, a little bit of CSS3 and plain vanilla JavaScript.
🔥 Recommended UDEMY courses 🔥
☕ Demystifying Parallax: Learn to Create Interactive Web Pages bit.ly/3uueECP
☕ Website Development Build single Page Website Parallax site bit.ly/3uueDyL
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Level Up Your CSS Animation Skills bit.ly/3esJkP8
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
❤ Related Links ❤
Art by bevouliin.com
Project images:
All layers zip: frankslaboratory.co.uk/downloads/backgroundLayers.zip
Layer 1: frankslaboratory.co.uk/downloads/layer-1.png
Layer 2: frankslaboratory.co.uk/downloads/layer-2.png
Layer 3: frankslaboratory.co.uk/downloads/layer-3.png
Layer 4: frankslaboratory.co.uk/downloads/layer-4.png
Layer 5: frankslaboratory.co.uk/downloads/layer-5.png
Backup links:
Layer 1 ibb.co/qs87t6x
Layer 2 ibb.co/0yYGJzF
Layer 3 ibb.co/F3870v3
Layer 4 ibb.co/WFXS3sY
Layer 5 ibb.co/BTpQvgJ
(*** you can use these background images for learning purposes. For commercial projects you can purchase it directly from the artists. To see the full selection of available GAME DEVELOPMENT ART ASSETS, please visit bevouliin.com ***)
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: *** this video ***
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
🎮 More GAME DEVELOPMENT with vanilla JavaScript and HTML canvas:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
