помогите реализовать эффект
на сайте при прокрутке див с 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:03. |