Очень интересный эффект имеющий название - эффект параллакса. При движении курсора по экрану движутся и листья, создающие эффект объема, так как перемещаются они в трех параллельных плоскостях.
Установка:
В head
Code
<script src="http://webo4ka.ru/Ucoz5/jquery.parallax-0.2-min_parallakc_effekt.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" href="http://webo4ka.ru/Ucoz5/screen_parallakc_effekt.css" />
<script type="text/javascript">
$('body').parallax({
'elements': [
{
'selector': 'body',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.1,
'invert': true
}
}
}
},
{
'selector': 'div.outer',
'properties': {
'x': {
'background-position-x': {
'initial': 50,
'multiplier': 0.02,
'unit': '%'
}
}
}
},
{
'selector': 'div.inner',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.3
}
}
}
}
]
});
</script>
<link rel="stylesheet" media="screen" type="text/css" href="http://webo4ka.ru/Ucoz5/screen_parallakc_effekt.css" />
<script type="text/javascript">
$('body').parallax({
'elements': [
{
'selector': 'body',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.1,
'invert': true
}
}
}
},
{
'selector': 'div.outer',
'properties': {
'x': {
'background-position-x': {
'initial': 50,
'multiplier': 0.02,
'unit': '%'
}
}
}
},
{
'selector': 'div.inner',
'properties': {
'x': {
'background-position-x': {
'initial': 0,
'multiplier': 0.3
}
}
}
}
]
});
</script>
после body
Code
<div id="main">
<div class="wrapper outer">
<div class="wrapper inner">
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
<div class="wrapper outer">
<div class="wrapper inner">
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
Источник: не указан
0 комментариев