Hi to all, this is my first post about parallax website,
I just share with you what i know about parallax and how will implement that,
I just share with you what i know about parallax and how will implement that,
what is Parallax
parallax website move objects for example images, text, etc.., based on user scroll web page
I just searched about parallax website on more websites , there have most jquery plugins,
my sugestion is we can also create own parallax website using simple jquery,
follow html , css and js code for parallax website
Coding:
Html:
<body>
<div id="section1"><h1>section1</h1></div>
<div id="section2"><h1>section2</h1></div>
<div id="section3"><h1>section3</h1></div>
</body>
Css:
*{ margin: 0; padding: 0;}
#section1{ width: 100%; height: 650px; background: url("http://www.wallsave.com/wallpapers/1280x960/abstact-red/186157/abstact-red-abstract-balls-186157.jpg");}
#section2{ width: 100%; height: 650px; background: url("http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg");}
#section3{ width: 100%; height: 650px; background: url("http://wonderfulengineering.com/wp-content/uploads/2014/01/Technology-Wallpaper-6.jpg");}
h1{ color: chartreuse; text-align: center; line-height: 650px;}
#section2 h1{ color: #fff;}
if we change backgorund position as based on scroll value then automatically scroll image as parallex
Js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( window ).scroll(function() {
var val = $(window).scrollTop();
$("#val").text(val);
$("#section1").css({"background-position":"-"+val*2+"px 50%"});
$("#section2").css({"background-position":"50% -"+val*2+"px"});
$("#section3").css({"background-position":val*2+"px 50%"}); });
</script>
No comments:
Post a Comment