_notebooks/2025-01-08-BACKGROUND_LESSON.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## <span style=\"color:rgb(6, 231, 227); text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 1.3em;\">Intro to Backgrounds:</span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <span style=\"color:rgb(0, 8, 255); text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 1.3em;\">Overlaying Backgrounds:</span>\n",
    "\n",
    "Overlaying Backgrounds are simple, and very durable in games. Overlaying Backgrounds can help create a more visually appealing and personalized coding enviornment. They are essentially about stacking multiple backgrounds on top of each other. A couple terms of Overlaying Backgrounds are:\n",
    "\n",
    "Transparency (opacity): Controls how see-through an element is. 1 means it's completely solid, and 0 means it's completely see-through.\n",
    "\n",
    "Transforming (transform): This lets you twist, turn, or even resize an element. \n",
    "\n",
    "There are more key terms to Overlaying Backgrounds but those are just a couple.\n",
    "\n",
    "#### <span style=\"color:rgb(0, 8, 255); text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 1.3em;\">How do They Work?:</span>\n",
    "\n",
    "Overlaying Backgrounds in Javascript involves manipulating the HTML and JS properties to achieve the desired visual effect.\n",
    "\n",
    "Here's a simple example to illustrate how you can do it:\n",
    "\n",
    "1. HTML Structure: First, set up your HTML with elements that will have background images."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "html"
    }
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "  <meta charset=\"UTF-8\">\n",
    "  <title>Overlay Backgrounds with JavaScript</title>\n",
    "</head>\n",
    "<body>\n",
    "  <div id=\"background1\" class=\"background\"></div>\n",
    "  <div id=\"background2\" class=\"background\"></div>\n",
    "  <script src=\"script.js\"></script>\n",
    "</body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "2. JavaScript Interaction:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "// script.js\n",
    "document.addEventListener('DOMContentLoaded', function() {\n",
    "  const background1 = document.getElementById('background1');\n",
    "  const background2 = document.getElementById('background2');\n",
    "\n",
    "  // Apply styles directly with JavaScript\n",
    "  background1.style.position = 'fixed';\n",
    "  background1.style.top = '0';\n",
    "  background1.style.left = '0';\n",
    "  background1.style.width = '100%';\n",
    "  background1.style.height = '100%';\n",
    "  background1.style.backgroundImage = \"url('background1.jpg')\";\n",
    "  background1.style.backgroundSize = 'cover';\n",
    "  background1.style.backgroundPosition = 'center';\n",
    "  background1.style.opacity = '0.8';\n",
    "\n",
    "  background2.style.position = 'fixed';\n",
    "  background2.style.top = '0';\n",
    "  background2.style.left = '0';\n",
    "  background2.style.width = '100%';\n",
    "  background2.style.height = '100%';\n",
    "  background2.style.backgroundImage = \"url('background2.png')\";\n",
    "  background2.style.backgroundSize = 'cover';\n",
    "  background2.style.backgroundPosition = 'center';\n",
    "  background2.style.opacity = '0.6';\n",
    "  background2.style.zIndex = '1';\n",
    "  \n",
    "  // Example: Change background images dynamically\n",
    "  setTimeout(() => {\n",
    "    background1.style.backgroundImage = \"url('newBackground1.jpg')\";\n",
    "    background2.style.backgroundImage = \"url('newBackground2.png')\";\n",
    "  }, 5000); // Change images after 5 seconds\n",
    "});\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To sum things up, HTML sets up the structure with two div elements. JavaScript uses the style property to apply CSS directly to these elements, including positioning, size, background image, opacuty, and z-index.\n",
    "\n",
    "This approach eliminates the need for an external CSS file by handling the syling purely within your JavaScript code."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <span style=\"color:rgb(0, 8, 255); text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 1.3em;\">How to Add a Parallax Background:</span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First of all, what even is a Parallax Background? Parallax Background is a web design technique where background images move at different speeds compared to the foreground content as you scroll. It ends up creating a sense of depth and immersion, making the design more dynamic and engaging.\n",
    "\n",
    "Here is an example on how to create a parallax background effect (without using CSS).\n",
    "\n",
    "HTML Structure:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "html"
    }
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "  <meta charset=\"UTF-8\">\n",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "  <title>Parallax Background without CSS</title>\n",
    "</head>\n",
    "<body>\n",
    "  <div id=\"parallax\"></div>\n",
    "  <div id=\"content\">\n",
    "    <h1>Welcome to My Parallax Page</h1>\n",
    "    <p>Scroll down to see the parallax effect.</p>\n",
    "    <!-- Add more content here -->\n",
    "  </div>\n",
    "  <script src=\"script.js\"></script>\n",
    "</body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "JavaScript:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "// script.js\n",
    "document.addEventListener('DOMContentLoaded', function() {\n",
    "  const parallax = document.getElementById('parallax');\n",
    "  const content = document.getElementById('content');\n",
    "\n",
    "  // Apply initial styles through JavaScript\n",
    "  parallax.style.position = 'fixed';\n",
    "  parallax.style.top = '0';\n",
    "  parallax.style.left = '0';\n",
    "  parallax.style.width = '100%';\n",
    "  parallax.style.height = '100%';\n",
    "  parallax.style.backgroundImage = \"url('your-image.jpg')\";\n",
    "  parallax.style.backgroundSize = 'cover';\n",
    "  parallax.style.backgroundPosition = 'center';\n",
    "  parallax.style.zIndex = '-1'; // Ensure it's behind content\n",
    "\n",
    "  content.style.position = 'relative';\n",
    "  content.style.marginTop = '100vh'; // Enough space to see the parallax effect\n",
    "  content.style.padding = '20px';\n",
    "\n",
    "  // Apply parallax effect with JavaScript\n",
    "  window.addEventListener('scroll', function() {\n",
    "    const scrollPosition = window.pageYOffset;\n",
    "    parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`;\n",
    "  });\n",
    "});\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "HTML sets up a div for the parallax background and another div for the scrollable content. Javascript sets the initial styles for the parallax and content elements directly in JavaScript. It even applies a scroll event listener to create the parallax effect by moving the background image at half the scroll speed using the transform property."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### <span style=\"color:rgb(0, 8, 255); text-shadow: 3px 3px 8px #4682B4; font-weight: bold; font-size: 1.3em;\">How to Change a Background:</span>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Changing the background of an element can be done multiple ways. One of the ways is using JavaScript in VS Code is to manipulate the DOM.\n",
    "\n",
    "1. HTML Structure\n",
    "First, create an HTML file with an element that we want to change the background of."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "html"
    }
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "  <meta charset=\"UTF-8\">\n",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "  <title>Change Background with JavaScript</title>\n",
    "</head>\n",
    "<body>\n",
    "  <div id=\"backgroundDiv\">This is the div with a changeable background.</div>\n",
    "  <button onclick=\"changeBackground()\">Change Background</button>\n",
    "  <script src=\"script.js\"></script>\n",
    "</body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "2. JavaScript\n",
    "Next, create a JavaScropt file to handle the background change."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "// script.js\n",
    "function changeBackground() {\n",
    "  const div = document.getElementById('backgroundDiv');\n",
    "  div.style.backgroundColor = 'lightblue'; // Change to the desired color or image\n",
    "  div.style.backgroundImage = \"url('your-image.jpg')\"; // Change to the desired image\n",
    "  div.style.backgroundSize = 'cover'; // Ensure the image covers the div\n",
    "  div.style.backgroundPosition = 'center'; // Center the background image\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "HTML, the div with the id backgroundDiv is the element whose background we want to change. The button element has an onclick attribute that calls the changeBackground function when clicked.\n",
    "\n",
    "JavaScript, the changeBackground function selets the div by its id and changes its background color and image using the style property."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}