Simple Parallax effect tutorial using Javascript

Parallax Effect is quite a beautiful trick that you can put on to your website to showcase your products or content in a very cool way. Confused lets see an example #1 this is how you can view the content but obviously its the advance way of doing it . So I’ll be doing in a more simpler way but the concept will be same .

Concept

So parallax is basically a combination of two new fashion of web design workflow one is Single Page design and the other is parallax scrolling . Single Page design means every thing in one page where as parallax scrolling means that as you scroll the page its background image moves slower than the speed at which you scroll .

Lets see some code

I started with using a simple HTML document page with style containing below code


<style>
*{
margin:0;
padding:0;
}

#image{
position: relative;
z-index: -1;
}

#content{
height:750px;
width:100%;
margin-top: -10px;
background-color:#4c4c4c;   //grey color
position: relative;
z-index:1;
}</style>

and in the body part
<body>
<img id="image" src="ime.jpg" height="710px" width="100%">
<div id="content"></div>
</body>

where ime.jpg is my image file. and content is a div ID selector that is basically the grey color background to show you the effect .Now the javascript code add it inside the head below the style close tag . As you know js should be written inside the script tag here’s the code .

<script type="text/javascript">
var ypos,image;
function parallax(){
ypos=window.pageYOffset;
image=document.getElementById('image');
image.style.top= ypos * .6 + 'px';
}
window.addEventListener('scroll', parallax);
</script>

So we have created a function called parallax() the first line inside the function gives the Y axis offset means the scroll location at y-axis , second line gets the element by using the id selector from the html body ie image and the third line does the actual changes to the top of the image element in the document . and the last line ie the window.addEventListener which basically calls the function parallex and has a type ‘scroll’.

Lets play with it , change the .6 value to .2 or .1 but not more than 1 and see the changes . If you saw the changes then you have successfully completed the tutorial . feel free to comment down below.

Advertisements

Github Cheatsheet for Beginners 2

For Github Cheatsheet for Beginners 1 .

To pull along with changes .

git pull https://git link here

git remote rename origin newname [ from origin to newname ]

git remote -v [press enter]

git tag [ to create a tag for previous commit ]

git tag -a v0.1 -m ‘Version 0.1’

git tag [ to see ]

git show v0.1

To create a tag for prev commit [ie i have committed but no tagged then ]

[first show log to do that]

git log –pretty = oneline

[Copy the first 5 or 6 digit hash code of the commit you want to tag ] .

git tag -a v0.2 <past hash> -m ‘Version 0.2’ [press enter]

git push newname –tags

Github Cheatsheet for Beginners 1

Github is a Subversion control system See Wiki or Youtube . I’ll be brief and less descriptive cause it’s the basic commands . If i make a mistake or need to add some thing comment down below .

git config–global user.name “JohnDoe”

git config –global user.email “johnDoe@gmail.com”

git init

git add *.java

git commit -m ‘ write a comment to tell what you changed’

git status

git diff

git diff –cached

git commit -a -m ‘write a thing’ [ “a” is  to skip the staging ie adding the files , it will add everything ]

git rm -f Delete.txt

git rm –cached DeleteMe.txt [to remove from staging area but it is going to be in the drive to check do git status]

git mv filename.txt fielnameChanged.txt [to rename then do git status to check ]

To see commit msg in reverse chronological order we use log .

git log –pretty=oneline [to see in one line]

git log –pretty = format: “%h:%an:%ar:%s” [press enter] [Format to see exactly how you see on the screen]

git log -p -2 [to see last to commit]

git log –since=1 week [last week commit ]

git log –since = “24-01-2014″

git log –author=”Rittamd” [press enter to c changes made by specific author]

git log –before = “24-01-2014”

To undo a commit . 

git commit –amend

To decide to stage a file later you decide not to stage it ie :

git add Delete.txt [staged]

git reset HEAD Delete.txt [Not staged]

git status [press enter to c that Delete.txt is not ready to be committed]

git remote add origin https://github&#8230;../ABC.git

git push origin master

git remote -v

To get the data from remote (or the changed data) but not merge it to the local disk .

git fetch origin

for more visit here

To continue