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
Firechat app opengarden

How to send messages without internet .

Ever thought of creating your own chat app or a network through which you can send and receive messages without using internet at all or worried about your personal details revealed like what we do in whatsapp. There is an app called FireChat (Off-Grid Chat app).

It allows you to chat anonymously without the internet and create a public zone to share your messages for free. The app is available only for IOS and Play Store . It is obvious that you need internet connection in the firstplace to download it from store and install it .After that you need to sign up for the account while signing up you should be connected to the internet . It may ask you for your credentials but you can give a fake one don’t worry it doesn’t verify . Feel free to put your pseudo identity .

How it works ?

It basically uses your wifi or your bluetooth to create a Adhoc network and each device that uses the firechat app acts as a beacon . Now whenever you send a message to lets say person ‘C’ , it travels via person ‘B’ and eventually reaches the destination.

Can Scientist create a computer like JARVIS ?

Have you seen the movie IRONMAN then you might be well aware of this Computer called ‘JARVIS’. By the way for those who don’t know JARVIS is the name of an Artificial Intelligence computer actually it has an acronym Just a Rather Very Intelligent System.

Today i saw this movie again and i thought why can’t we create a Intelligent computer like this that can serve our need mostly gaming [JK] .So i thought of doing some research on how to create such a system. I finally came up with the result .

First of all let me clarify the myths :

1. Can you create a computer like this ?

Ans:  Yes you can .

2. Will it be as intelligent as shown in the movie ?

Ans : Yes can be .

3. How much time will it take to create ?

Ans: In the coming 10 Yrs .

Now in the movie Jarvis can levitate or lets say project the User Interface (UI) of a highly sophisticated system and Robert Jr can easily interact with it by doing some hand motions on air and Jarvis just do the  calculations in seconds that puts up the results on air again .

According to the present researchers , there are people who actually have the facilities and home in which the computer can speak to us and do the basic functionality like if we say play music , Start this and that . Schedule something . You can basically talk but has limited functionality .

People at Facebook AI research has come up with an idea of Memory Networks through which the memory slots in your systems can theoretically talk to each other . For Example .

Figure 1: Example “story” statements, questions and answers generated by a simple simulation. Answering the question about the location of the milk requires comprehension of the actions “picked up” and “left”. The questions also require comprehension of the time elements of the story, e.g., to answer “where was Joe before the office?”.

Memory Networks AI facebook

So that is how the computer should be able to calculate and give you an appropriate answer for a particular context . Similarly , jarvis was using memory networks to give you the answers.

So speaking of the people at FB AI research they have written papers on memory networks .There is a paragraph in the papers stating that “If the memory becomes full, a procedure for “forgetting” could also be implemented by H as it chooses which memory is replaced, e.g., H could score the utility of each memory, and overwrite the least useful.” Now think of a scenario where a computer can learn it’s own way to find the result and also delete the least use once (memory) .

Now coming to the movie again . You might be thinking that jarvis is not just a speaking computer , it also displays UI on air right ? . have you thought of how can we make it possible . how can we display some thing on air and make it appear it from nowhere . the concept behind it ? Yes it’s right . it’s simple the concept is to stop light . Here comes an interesting fact, Scientist at MIT has come up with a way to stop light and it’s not only on papers, they have also done it practically . Let see how did they achieve it.

So they are basically using Bohr Einstein Consolidate of Sodium atoms to stop light. lets see how in details .

At last what i would like to say is that , In future we don’t need a computer that can do what its asked to do but we need a memory that can opt our nature of how we think .

Coding makes you think better

I started coding at the age of 12 then i came to know about how a computer works , My father brought me a Intel Celeron D PC , the first thing that i used was Paint . Then on,  i started exploring the world of programming then i learnt about a programming language called C.I learnt the basics and created my first Hello World program. What i think is that each and every people should start coding cause “Hello World is not the end and there is more to it”.

The programmers of tomorrow are the wizards of the future.


There is a beautiful program called Scratch and the website code.org can help you alot learn programming .

Application idea for train booking system

‘More people will visit if the loading speed of your website is less than 3 seconds’ – quote from web designing and development . that means every website should be optimized such that it get downloaded within 3 seconds. In India we have IRCTC train booking system which is slow , buggy and boring some times it doesn’t even responds to the user.

If we perform a DDOS attack then it’ll go down in seconds . So i thought of creating a IRCTC droid app that can simply take a pic of all your requirements such as Date of journey to arrival , From – To etc .your can write those requirements on a piece of paper and then take a pic then the app will recognize and take the requirements as an input and make a reservation for you .Isn’t it simple ?

I got this idea by seeing this app called PhotoMath.

Real TIme OCR is the technique that we need but i assume that Real TIme OCR is not available for free .

wireless energy transfer

What if we can transfer Energy through Air ?

Now a days the only energy that we consider is the battery life of our smartphones . However there is one energy that can be transferred through air and even vacuum ie: Light . Today i came up with this thought that How can we transfer Energy from one place to another through air ? . What if we succeed and what are the things that we can do ?

Until today our technology has become so advanced that we are able to electromagnetically charge our phones just by keeping our phone on the top of the charge pad . Now we can just touch our phones and transfer messages via NFC (Near Field Communication) . Now what if we can charge our phones on the go ? .

Lets say that the charger is a some kind of a Wi-Fi module that sends a probe request to your smartphone after certain period. If the Phone is at 45% battery life then the phone will accept the probe request to say that its around 45% charge and sends the reply . That Charger should send the Energy modules to the phone so that it can charge it self.

Another idea is that we should create a phone whose screen is a kind of solar cell and also transparent for display . Now when your Phone sends the same reply to your Wi-Fi Charger it will send your phone the amount of Solar Packets it needs to fully charge it self . On receiving the solar packets, the phone should activate its solar cells at this time the phone will act as a solar panel to charge its battery.

Update : Japanese scientists have succeeded in transmitting energy wirelessly, in a key step that could one day make solar power generation in space a possibility.- Japan Aerospace Exploration Agency (JAXA)

you can read the whole article here. Now think what are the possibility of this technology available for free and if these chargers are available to the consumers then length of wire we use in our daily purpose will decrease by 40% .What are your thought let me know by commenting down below .

Time measures everything

street speed travel

Everything is bounded by some thing . Which means every living matter shall die or perish at some point of time , Now the question is what measures it It’s the Time . Time is a constant factor that measures every measurable thing irrespective of place , dimension , cost , value or nature.

Voice of Morgan Freeman“There is nothing so absurd that it cannot be believed as truth if repeated often enough”-William James

We know that light travels at a speed of  299792458 metres per second and we also know that light is a electromagnetic from of energy . When obstructed by a prism disperses beam of white light.

Light_dispersion_conceptual_waves350pxWe can see that light travels in the form of wave . Each wave moves tangential at an angle and thus bends forming a cycle this is the scenario when light travels at that speed similarly each cycle . what if each cycle of wave travels at an infinite speed .Then the light will move travel at a speed such that no element will be visible .   

drupal camp hyderabad 2015

Drupal Camp Hyderabad 2015

Last time i introduced you to Swecha and what will be happening on March 7th and 8th you can check my prev post . The Drupal camp started with an introduction to drupal by Larry Garfield and for the first time i saw some one giving seminar via Hangout it was quiet fun and was feeling excited to see someone in live .

I liked what he said about Open Source

The Right to innovate is not a privilege to be restricted to a tiny minority – FSMI

Present companies like google , amazon , Apple though they use Open source technology they don’t have transparency . Every thing that we create needs to be approachable and should be useable cause unusable tools are useless he said .

The point of Open Source is to give everyone the chance to change or distribute the source in any form for the good of community . then he spoke about the differences between Drupal 7 and 8 what are the core problems that he faced and how did they resolve it . How Drupal gives you a good start right from the begining of creating a website . how you can built real world sites right away out of the box .

The best part was that even Blind people can use Drupal with the help of voice navigation thus gives a greater accessibility .

He spoke not only for the core developers point of view but also in the Front end developers prespective.He spoke about new frameworks and technologies such as Symfony, Twig, Zend Feed, Doctorine, Annotation, Guzzle, Easy RDF .

At last he showed us live counting of how many active members who are contributing and participating to the Drupal Community which was around 2715+ people from whole world.

To want to learn help build it

– Larry Garfield

In the end people asked him some questions .One was that “Why should we use Drupal Over WordPress or Joomla ?”. He answered : Every CMS has its own flavor for eg drupal is known for its content strategic and content management at the enterprise level , Where as if content writing and blog editing is concerned then WordPress is best and also added that Drupal has best security team and most active member in the community that is why people go for drupal .

It was an interactive session and hope to meet you live in future, thank you larry for delivering such a wonderful seminar .

you can follow him on Twitter his twitter handle is right below .