Parallax Headers

Instructions how to implement this web page design for your project.

  1. Click here to download necessary files. If the .zip doesn't automatically unzip to a folder, then double click on the .zip file to unzip to a folder labeled "parallaxBG" in your Downloads folder.
  2. In the newly downloaded parallaxBG folder, rename the "rename-me.html" file as needed for your project such as conceptual.html, narrative1.html, documentary.html, explorations.html, reflections.html, narrative2.html, zenith.html, portfolio.html, or index.html.
  3. In the parallaxBG folder, change the # on all folders and files with the corresponding project number such as project5, p5-styles.css, p5-scripts.js.
  4. Open the .html file in Dreamweaver and change the # to the corresponding project number on lines 18, 21, and 43.
  5. Save and close the .html file because you going to move it and you can't have the file open when you move it.
  6. Move the files inside the parallaxBG folder into your Websites folder and replace any files and folders with the same names.
  7. In Dreamweaver, open the moved .html file and make your edits. Don't forget to change the "CHANGE MEEE!!!!" on line 16 and add your name to the footer at the bottom of the html file.
  8. Replace the bg#.jpg files in the images folder with your own desired images. Your image should be at least 2000px wide and should be portrait (not landscape) orientation. You should repeat and flip the bottom image like the default bg1.jpg, bg2.jpg, and bg3.jpg.
  9. In your p#-scripts.js file, change the following:
    • Line 5 - how many milliseconds do you want the scroll effect to occur when a button is clicked.
    • Line 35 - change "UsernamE' with your own username.
    • Line 38 - change the scrollFactor number to change the speed of the parallax effect. Smaller numbers move slower, bigger numbers move faster.
Header 2

Article 2

Header 3

Article 3

Header 4

Article 4

Header 5

Article 5