помогите реализовать эффект
на сайте при прокрутке див с id='fx_bg' меняет opacity . при подробном исследовании я понял что изменение опасити зависит от дельты $(window).scrollTop(); (так как при стандартном увеличении на ноуте 1366x768 она равна 100, а при 50% она равна 200 ) и соотвественно опасити при увеличении 100% - меняется с шагом 0.1 , а при 50% - 0.2 . Но я не знаю как вытащить дельту из
$(window).scrollTop();:help: |
DynkanMaclaud,
смотрите максимальный скролл и текущий -- больше ничего ненужно |
DynkanMaclaud, дельта передаётся в event ф-ции.
$(window).on('mousewheel', function(e) {
alert( e.wheelDelta );
});
Но можно без дельты:
var scrollHeight = $(document).height();
$(window).scroll(function() {
myElem.style.opacity = 1 / scrollHeight * $(this).scrollTop();
});
|
Scroll and opacity
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 1500px;
}
.wrap {
left:0;
top:0;
margin:0;
padding:0;
width:100%;
height:100%;
position:fixed;
background-color:rgba(0,0,0,0);
color:#fff;
}
div.cnt {
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin:auto;
width:200px;
height:100px;
border: solid 1px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function() {
var o = $(window).scrollTop()/($(document).height()- $(window).height());
$(".wrap").css({"background-color" : "rgba(0,0,0,"+o+")"})
})
});
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" width=30%>
<div class=wrap>
<div class=cnt></div>
</div>
</body>
</html>
|
спасибо!!
|
| Часовой пояс GMT +3, время: 21:23. |