Import your desired background image.
In this tutorial, I downloaded an image from Matheus Bandoch in Unsplash.
Rotate the image
Start the marking the partition for cropping
Grab the Brush Tool or simply hit "B" on your keyboard
Start marking the partition
Now that marking partition is done, we could now start cropping each partition
Open the image file again.
Note:You could use the image file with markings for guides :)
but since I am aware of my marking partitions, I am using opening the image file again
Start the cropping selection :)
grab your Pen Tool or hit "P" in your keyboard
*Miss some area ahahaha :)
Rotate the image
Save your .psd file :)
Import your .psd cropped image file
Adjust image size that will fit the artboard
 
I am using an artboard size with 1920 x 1080 pixels :)
Each layers of our cropped image .psd files are imported  here in .xd
In some cases, layers are not properly imported.
So renaming each layers will be a great help
* Just don't forget that when you rename you hit "enter"to apply the changes (don't be like me ahahaha)
Add text
I am using Montserrat Bold for the font style
Modify the size, color and position based on your preference.
Insert the text inside the folder that has your image layers
Arrange the text between the image layers
* I struggle in selecting the text ahahahha
Now try to hide the text between the layers so you could visualize how the parallax effect / animation will work. :)
*Did some text rearranging. ahahahaha
Once you finalized your text position, duplicate the artboard
Now, select the nearest or close layer (which are the grass/tree layer) to the screen
Adjust the position of the selected layer
Adjust the other layers (cropped image and text) position
Now let start the magic trick :)
Go to Prototype
Select and drag the blue arrow to the next artboard
and set the interaction setting
We will use Tap, Auto-Animate,Ease In-Out with the duration of 4 seconds. And the set the destination to the next artboard
Repeat the process
Click the play button and let see if this works :)
yehey! :)
For you to also visualize the parallax effect,
You could select and move upward the second artboard :)
Let us add second page and other website elements/components
I expanded the first  artboard height to add the second page. :)
Add some transition layer between the images using rectangle shape with gradient fill
adjust the gradient fill color and transparency based on your preference
As you can see,  I am using black to gray gradient combination
Now search for the second image background
I would recommend to have an image that is in landscape orientation
*Still looking for the right fit :)
*Finally I was able to choose :)
Simply right click and copy the image to Xd
Adjust the size of the image
Make some adjustments for the rectangle shape that serves as the transition between images
Add some text in your second page :)
Click the second artboard and adjust its height
Select and duplicate the image and text in your second page to your second artboard
not yet :)
To do the effect, change back the original height to 1080 of the second page
Select all layers in the second artboard and move them up
*Yehey!
To add some effects, we could adjust the position of the text and image of the second page on our first artboard
Do not  also forget to change back the size of our first artboard to default which is 1080 px
* I just made some changes with the gradient fill and position of image*
Add the same setting interaction to the second page on the second interaction
Let us see again if everythig is in place
Now let us add a text logo
Let add some header too :)
Let's add some thumb and scroll bar :) using the rectangle tool
Our text logo are not visible though
but we could make those visible by adding rectangle shape with gradient fill and good opacity level
Let's hit the play button :)
To make sure that the  header, text logo and scroll bar will be in place when you move,
tick the option "Fixed position when scrolling" in Prototype Page
Let's have our final preview :)
We did it !!! :)
