![main.jpg](https://steemitimages.com/DQmXhtXdcBPtuHAPqaFRHd4SaUVaZz8HbqapNV52haXJ93D/main.jpg)

# Army at War : Parallax Scrolling Project
#
Today we are going to do a Parallax Scrolling project again. For those who don't know what is parallax scroll, please go to the bottom of the page ... 

![demoGif.gif](https://steemitimages.com/DQmfE5bniF92DcAG8CcVZX34stebkvmDHydK7TQ5XidPFP8/demoGif.gif)

This is the animated gif version. For full working HTML version please click [here](http://neuvisual.com/steemit/parallax2/index.html)

![write1.jpg](https://steemitimages.com/DQmeCCDxY5Lj2HUZ9FC5rkB1CaZeJGaViDCZ8Q2a7tE2jK6/write1.jpg)
[source](https://www.pexels.com/photo/shoot-army-machine-gun-armed-35825/)

This is the picture that I choose. It looks pretty good but what more important is.. it can give a good impact when we make our 3d scroll parallax effect.

## The making
##

First, I crop the main army and put it on one layer. I use a polygonal lasso tool for that. 

![process2.jpg](https://steemitimages.com/DQmXpKyr5sL1xsJgSsb7W4W1Wmb1mEoZeDMTWGi37af7sP1/process2.jpg)
![process3.jpg](https://steemitimages.com/DQmRb9ZuGPTu1UGXyrmbrw6shnzeEDnZHyHT2xveAjTDymw/process3.jpg)

Secondly, I edit the second army. I use a  clone stamp tool to draw hidden part (overlap part by the first layer) so that when we scroll the image we can still see the image below the first layer. 

![process4.jpg](https://steemitimages.com/DQmTowrPPmuetjZZRcfPNvJ7NLVS3w9VcZKfneJjyBLcnm7/process4.jpg)
![process5.jpg](https://steemitimages.com/DQmV5AU3WpotKQ2hGgGrVZeQf5yt7EriJRXfKdZUsTYXDep/process5.jpg)

Thirdly, I edit the background. For the most parts, I use clone stamp tool to reproduce the image below the second layer. I also make the image more blurry by using Gaussian Blur filter.

![process6.jpg](https://steemitimages.com/DQmfHdxKqhpFg8Hfr1EqNR95xZpnqNf6GyrW6E7RK2Ek2GQ/process6.jpg)

Then I add some front drop to make more impact on our Parallax Scrolling. This going to be so much fun. Watch out for the bullet! I think the effect of the bullet it's cool.

![process9.jpg](https://steemitimages.com/DQmVNVNRjV9DBKLGryP1hPovGDbTCNtQbsDq9pn5RkA5mb7/process9.jpg)
![process10.jpg](https://steemitimages.com/DQmQJdEj3JWi5EUVE8qx6GKu72TEANosg7bpj9ioeBC5tvb/process10.jpg)

Finally, I do a simple coding in Malaybasic. This is the code...
```
Aplikasi ("ParallaxScrolling",1640,1080)
l#=LebarSkrin()
parallax1=SediaGambar("layer1.png")
parallax1gap#=Lebar(parallax1)-l
parallax1a=SediaGambar("layer1a.png")
parallax1gapa#=Lebar(parallax1a)-l
parallax2=SediaGambar("layer2.png")
parallax2gap#=Lebar(parallax2)-l
parallax3=SediaGambar("layer3.png")
parallax3gap#=Lebar(parallax3)-l
parallax4=SediaGambar("layer4.png")
parallax4gap#=Lebar(parallax4)-l
parallax5=SediaGambar("layer5.jpg")
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 parallax1a,-parallax1gapa*posPercent,0
    gambar parallax1,-parallax1gap*posPercent,0
tamat 
```

.
.
.
.


Okay guys... Until next time!

See ya...

If you are still blur...😉 [CLICK THIS](http://neuvisual.com/steemit/parallax2/index.html) Watch out for the bullet!

Bonus: Process in animated gif...

![processGif.gif](https://steemitimages.com/DQmQ39aKpdxPeahaqdRQVkr1115dR9xXE2P2ZWgNXdUoRm4/processGif.gif)

### Note about Parallax Scrolling
What is it actually? 
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.
https://en.wikipedia.org/wiki/Parallax_scrolling

![steem-cartoon-logo.png](https://steemitimages.com/DQmQk2LL9GuYjXRs1zo6k2fNCf899rTXqr8A2ZuQCrF8DU9/steem-cartoon-logo.png)

---

###### Malaysian! Bitcoin fee is expensive. Use ETH to trade STEEM. Easy buy/sell from [here](https://eth.remitano.com/my?ref=zomag)

---
<img src="https://v-hp.com/steemit/icon/painting.png"><img src="https://v-hp.com/steemit/icon/steemit.png"><img src="https://v-hp.com/steemit/icon/3d.png"><img src="https://v-hp.com/steemit/icon/arts.png"><img src="https://v-hp.com/steemit/icon/bitcoin.png"><img src="https://v-hp.com/steemit/icon/coding.png"><img src="https://v-hp.com/steemit/icon/crypto.png"><img src="https://v-hp.com/steemit/icon/photo.png"><img src="https://v-hp.com/steemit/icon/science.png"><img src="https://v-hp.com/steemit/icon/game.png"><img src="https://v-hp.com/steemit/icon/life.png"><img src="https://v-hp.com/steemit/icon/tips.png">

<img src="https://v-hp.com/steemit/icon/upvote.jpg">