Rossoll Webdesign Rossoll Webdesign

parallax-images with vector

What Program to Use

How to Create a Parallax Image in Vector (Inkscape)

1. Set Up Your Document

  • Open a new document in Inkscape.
  • Press Ctrl + Shift + D to open Document Properties.
  • Change the units to px.
  • Set the width to 3840 px and height to 2160 px (optimal for website scaling).
  • Note: Avoid using sizes like 3000x2250 to prevent stretching.

2. Create layers

  • On right side click on and rename Layer 1 to Sky.
  • Create additional layers: Sun, Mountain, Birds, Valley1, Valley2, Valley3, Valley4, and Valley5.

3. Create the Background Layer (Sky)

  • On the right side click on Sky.
  • Select the Rectangle Tool press R from the left toolbar.
  • Draw a rectangle, then set its width to 3840 px and height to 2160 px in the top-left corner.
  • Press Ctrl + Shift + A to open Align and Distribute, and center the rectangle on both axes.
  • The Sky rectangle should now fill the entire document.
  • Renname rectangle to background

4. Change the Color of the Sky

  • Select the rectangle and click on a color beneath the color palette.
  • If the color doesn't change, click on background below the Sky layer to select it, then try again.

5. Add the Mountain Image

  • You can either freehand draw a mountain (skip to step 7) or use an image Snowcapped mountains
  • To use an image: Ctrl + I to open the folder and paste the image under the Mountain layer.
  • If the image isn't under the Mountain layer, drag it into the layer.

6. Resize the Mountain Image

  • Resize and position the image where you want the mountain to appear in the scene.

7. Draw the Outline of the Mountain

  • Click on Mountain layer
  • Press P to select the Pencil Tool.
  • Draw along the edge of the mountain image and connect the two ends.

8. Duplicate and Mask the Sky Layer

  • In layers click on background file and press Ctrl + D to duplicate it.
  • Hold Ctrl and click on path, ensuring both files are selected (highlighted in blue).
  • Press Ctrl + * to apply a mask, making the outline disappear.
  • Drag the dublicated background file into Mountain layer.
  • rename the dublicated background file to mountain

9. Change Opacity

  • Click on while hovering over mountain file on the right side
  • change the slider to 80%

10. Create Shadows

  • Click on mountain layer
  • press P for Pencil Tool
  • draw along the shadows on the image

11. Group Shadows

  • Click on the first Shadow on the right side
  • Hold Shift and click on the last Shadow
  • Press Ctrl + G to group them all into a folder
  • rename folder to Shadow

12. Hide the Mountain Image

  • Hover over mountain image file on the right side
  • Click on

13. Create Valley 1

  • Click on Valley1 layer on the right side
  • Press P for Pencil Tool
  • Press Ctrl + Shift + F to open Fill and Stroke menu
  • Change L: to a darkere tone
  • Freehand draw a Mountain or a Wave

14. Duplicate and Mask the Sky Layer

  • Click on background file and press Ctrl + D to duplicate it.
  • Hold Ctrl and click on path, ensuring both files are selected (highlighted in blue).
  • Press Ctrl + * to apply a mask, making the outline disappear.
  • Drag the dublicated Background file into Valley1 layer.
  • rename the dublicated Background file to Valley

15. Add Trees

  • Find a tree or use this pinetree.svg
  • Note: when we use images in inkscape or vectors in general, we uses svg images, if u have a tree that is not svg use this website, convertio.co but not every image can be converted to svg
  • Note: remember images needs to be noncpoyright if u havent gotten promition from the owner
  • Click on the tree image and press D for Dropper tool
  • Note: if u duplicate the trees they will stack on eachother so just move it
  • Add more Trees
  • Note: ive only used 1 tree but ive changed the height and width on some fx to make a small tree i just dragged it more under the gound and made it more slim

16. Group Trees

  • Click on the first on the right side tree
  • Hold Shift and click on the last tree
  • Press Ctrl + G to group them all into a folder
  • rename folder to Trees

17. Create Valley 2-4

  • Repeat the process to create Valley2, Valley3 and Valley4
  • Draw Vallys using the Pencil Tool and mask them similarly.
  • Add and group trees within the valley layers

18. Create Valley 5

  • Draw a valley in Valley5
  • Draw a cliff formation on the left side of the valley (for the animal)
  • Find a animal or use this deer.svg
  • Add the animal on the cliff
  • Find a boders or use this bolder.svg

Create Sun

  • Click on Sun layer on the right side
  • Press E for Ellispe/Arc Tool
  • Make a circle
  • Rename it to Inner
  • Press S for Selector Tool
  • Click on the Sun file
  • Set its width and height to 300 px in the top-left corner.
  • Press D Duplicate
  • Rename it to Glow
  • Press Ctrl + Shift + F to open Fill and Stroke menu
  • Change Opacity to 50%

Create Birds

  • Find some birds or use this birds.svg
  • To use an image: Ctrl + I to open the folder and paste the image under the Sun layer.
  • If the image isn't under the Sun layer, drag it into the layer.
  • Press Ctrl + G to ungroup them
  • Note: Since we are using svg we can ungroup if there is more then one entity it will make them to their own file
  • Drag the individuel birds into the bottom right corner of the sun

Export Images

  • Click on on every layer except one on the right side
  • Press Ctrl + Shift + E to open Export menu
  • Click on Page in center top
  • Click on Export

HTML

<div class="glass">
  <h1>Glass Effect</h1>
</div>

CSS

.parallax-container {
  position: relative;

  width: 100%;
}

[class^="parallax-image"] {
  position: absolute;
}

[class^="parallax-image"] img {
  display: block;

  width: 100%;
}

JS

let scrollTop = 0;

window.addEventListener("scroll", () => {
  scrollTop = window.pageYOffset;
  requestAnimationFrame(updateValley);
  requestAnimationFrame(updateSun);
});

function updateValley() {
  const layers = document.querySelectorAll(
    "[class^='parallax-image']:not(.parallax-image-1, .parallax-image-2)"
  );

  layers.forEach((layer, index) => {
    const depth = index * 1;
    const movement = (scrollTop / (depth + 1)) * 2.5;
    layer.style.transform = `translateY(${movement}px)`;
  });
}

function updateSun() {
  const layers = document.querySelectorAll(
    ".parallax-image-1, .parallax-image-2"
  );

  layers.forEach((layer) => {
    const movement = scrollTop * 1.5;
    layer.style.transform = `translateY(${movement}px)`;
  });
}