How to create a parallax side-scrolling effect (weather card) // HTML & CSS in-depth
Learn how to create an awesome parallax effect in this in-depth episode about HTML & CSS and see how to
✔️ embed SVGs in HTML
✔️ manipulate colors in SVGs through CSS
✔️ use CSS transitions
✔️ use CSS grid layout
✔️ reference external fonts in HTML
✔️ use CSS variables and calculations to keep things stable
✔️ use JS to cycle through classes
☕ SUPPORT MY WORK 🙏
https://ko-fi.com/crayoncode
https://www.buymeacoffee.com/crayoncode
⌨️ CODE ⌨️
https://github.com/crayon-code/parall...
🖇️ USEFUL LINKS 🖇️
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 SVG Tutorial on MDN: https://developer.mozilla.org/en-US/d...
🔗 Google Fonts: https://fonts.google.com/
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 querySelector on MDN: https://developer.mozilla.org/de/docs...
🔗 addEventListener on MDN: https://developer.mozilla.org/en-US/d...
⚙️ USEFUL VSCODE EXTENSIONS ⚙️
Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⏱️ TIMESTAMPS ⏱️
00:00 Basic Markup & Backdrops
03:53 JS Class Cycling
02:51 Variable Definitions & Basic Styling
05:33 Parallax Layers
11:49 Weather Icon & Temperature Display
15:40 Clouds
16:41 Pagination
🎨 ARTWORK 🎨
Landscape adapted from vecteezy:
https://www.vecteezy.com/vector-art/2...
Weather icons from vecteezy:
https://www.vecteezy.com/vector-art/1...
Inspired by:
https://dribbble.com/shots/6887377-We...
https://dribbble.com/shots/7085082-Tr...
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #js #tutorial