Coffee Coffee - 1 month ago 7
CSS Question

How to add Parallax effect to Web Page?

I really don't know how to get this type of effect!

I'm referring to this kind of effect where the images make you feel like they are in the back of the content.

I'm really interested in how you can achieve this, any help or hint would be appreciated.

Answer

As you asked for the effect is called as parallax. and it can be achieved using simple CSS3 coding as well.

CSS Code

#first_background
{   
   background:url(YOUR-URL-IMAGE.jpg) fixed;
   background-size:cover;
   box-shadow: 1px 1px 120px #333333 inset;
}
#second_background
{ background:url(YOUR-URL-IMAGE.png)70% 0 no-repeat }
.text_demo
{
  height:40px;
  padding:10px;
  color:#ffffff;
  font-weight:300;
  font-family:'Roboto';
  text-align:left;
  background-color:#00a096;
  font-size:35px;
}

JavaScript

$(document).ready(function(){
    $('#first_background').parallax("50%", 0.2);
    $('#second_background').parallax("5%", -1.4);
});

HTML

<div>
    <div id="first_background">
        <div id="second_background">
            <div style="height:140px;">&nbsp;</div>
        </div>
    </div>
    <div class="text_demo">PARALLAX</div>
</div>

NECESSARY EXTERNAL RESOURCES :
• jQuery Library: http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
• Ian Lunn's Parallax jQuery Library:
http://ianlunn.co.uk/plugins/jquery-parallax/scripts/jquery.parallax-1.1.3.js