![ParallaxScrolling11.jpg](https://steemitimages.com/DQmVUJXed8Fm4p7WGXcKoD8fE4yJ1AfNyw2MhZtenFWT1nD/ParallaxScrolling11.jpg) *A mysterious journey to find an ancient temple of Wo-Owl .. deep in the jungle of Kurohaku. The adventure soon turns into a nightmare when emaki spirits trapped.* ![ParallaxScrolling.gif](https://steemitimages.com/DQmV6Z6WZQTnfpbk5Pvzq57Y5BqMGJnZSDuGumBzArZDwxe/ParallaxScrolling.gif) Hi to all steemians especially #steem-cartoon members. Today we are going to talk about **Parallax Scrolling**. What is it actually? How do we create a drawing that applies parallax scrolling? # Perennial's contest # In this post, we will try to illustrate a *Fantasy* theme for my entry to @perennial's contest. The contest is to celebrate the reveal of #steem-cartoon's new logo, The Wo-Owl!... ![logo.jpg](https://steemitimages.com/DQmQyqGuBcRMUXjWd3NRYMzbitXjpdRvzjYRNPorEAXp3KX/logo.jpg) The contest link is here: https://steemit.com/steem-cartoon/@perennial/steem-cartoon-introducing-wo-owl-announcing-our-1-challenge And here is my entry drawing...👍 ![ENTRY.jpg](https://steemitimages.com/DQmW7eGmVox8hMzq4oj3eqrbWxNKR8MaXTw1GCsu7t38ZRi/ENTRY.jpg) # Parallax Scrolling # So ... What is parallax scrolling? Parallax scrolling, also known as "Asymmetrical Scrolling", is a technique in computer graphics especially games, where images in different layers, move by the camera slower than closer images, creating an illusion of depth in a 2D scene. For this project, I create a drawing and also HTML file using Malaybasic (http://www.malaybasic.com). To see the HTML version of this project click [here](http://neuvisual.com/steemit/parallax/ParallaxScrolling.html). Move your mouse left and right to see the parallax effect. It looks like a game but there is no game to play 😉 In the above Parallax scrolling, we create 5 different layers. The layers are like this: ![_P1.jpg](https://steemitimages.com/DQmb3UAER8MnLbteJLFYVtMpp4vJiYRfjSAVNadhuEtxz8k/_P1.jpg) The frontest layer can be called as a front drop. The width of the image must be the longest one. This is because, it will move the most when the mouse moves. ![_P2.jpg](https://steemitimages.com/DQmQs5pQmHy3x4Gf7169x3eBjKkiMgSGyU1CR4GPGMCMNms/_P2.jpg) Then, this is the second layer. ![_P3.jpg](https://steemitimages.com/DQmZN8fjAB6GyZh3VTzjmLPd3SnEwkDuH3sLACQLgazGiSX/_P3.jpg) On the third layer, we put our main subject, which is our Wo-Owl temple. ![_P4.jpg](https://steemitimages.com/DQmcpseg6i6gtseSaLhMYAeMEUG46SKSU2zNLuK3yYQuyiK/_P4.jpg) Then we got 2 backgrounds. The idea here is to make the front background trees look in-front than the rest of the trees. ![_P5.jpg](https://steemitimages.com/DQmbV4suZANWiXujANejN8imBXrpkjhvmuVj5oeggkYQUKM/_P5.jpg) # Coding # This is a Malaybasic code to produce the HTML version of the Parallax Scrolling above. If you know programming you can apply this line of code into your own programming language. ``` Aplikasi ("ParallaxScrolling",1200,740) l#=LebarSkrin() parallax1=SediaGambar("1a.png") parallax1gap#=Lebar(parallax1)-l parallax2=SediaGambar("2a.png") parallax2gap#=Lebar(parallax2)-l parallax3=SediaGambar("3.png") parallax3gap#=Lebar(parallax3)-l parallax4=SediaGambar("4a.png") parallax4gap#=Lebar(parallax4)-l parallax5=SediaGambar("5a.png") parallax5gap#=Lebar(parallax5)-l posPercent#=0.0 fungsi GelungUtama() CuciSkrin() posPercent=(SentuhX()/l) gambar parallax5,-parallax5gap*posPercent,0 gambar parallax4,-parallax4gap*posPercent,0 gambar parallax3,-parallax3gap*posPercent,0 gambar parallax2,-parallax2gap*posPercent,0 gambar parallax1,-parallax1gap*posPercent,0 tamat ``` Or you can download Malaybasic and try the above code yourself. ## The process ## First, I sketch all the drawings and put them all in one PSD file. I test move them to see the correct Parallax effect. This is very important. You want to get the correct size for each of the drawings ![layers.jpg](https://steemitimages.com/DQmZTvKoWdndWujQofCKQ6CeDhEW8ycRt3uqCwKrJJj2BR4/layers.jpg) Then, after it looks good, I detail up the drawing. Next, I create a code in Malaybasic and run into HTML for a test ![malaybasic.jpg](https://steemitimages.com/DQmaPjD2qRDdqnap3fPpCoDzhQoU3MCPVQUPUPct2jcsJ4z/malaybasic.jpg) Finally, I tweak here and there to create a proper lighting effect. ![_process11.jpg](https://steemitimages.com/DQmXSDFXsV1y6Gypr7okVKSoBqZe8kUWVpfgNjJMmAZXook/_process11.jpg) And this is an animated gif for the whole process... ![process.gif](https://steemitimages.com/DQmNUGEAksFrGv6BkDsSM33RAbPyQjzJGV3qQHMJq9ttnkr/process.gif) Okay guys... Until next time! See ya... If you are still blur... 😉 [CLICK THIS](http://neuvisual.com/steemit/parallax/ParallaxScrolling.html). ![steem-cartoon-logo.png](https://steemitimages.com/DQmQk2LL9GuYjXRs1zo6k2fNCf899rTXqr8A2ZuQCrF8DU9/steem-cartoon-logo.png) https://steemitimages.com/DQme5h9uqRtFFTN5uFn3zGAvmD7uWA346R2rQW8D7Qo11i7/U5dtkYqckewxmNRfvjCFDQrVJU8Hwgi.gif ---