Javascript-форум - Показать сообщение отдельно

рони · #3 (**permalink**) 20.11.2014, 05:21

ShutTap,
для колеса мышки надо писать свою плавную прокрутку

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .first, html, body {
     height: 100%;
     margin: 0px
  }
  .first {
    background: rgb(140, 0, 86) url(http://www.sib-top.ru/images/photo/sunrize/09.jpg) no-repeat center;
    background-size:  cover;
  }

  .first:nth-child(2) {
    background: rgb(140, 0, 86) url(http://ii1.photocentra.ru/images/main42/424926_main.jpg) no-repeat center; background-size:  cover;
  }

  .first:nth-child(3) {
    background: rgb(140, 0, 86) url(http://aramgurum.ru/w/15/zakat_bereg_more_panorama_1680x1050.jpg) no-repeat center; background-size:  cover;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
function getCoords(elem) { //получаем координаты объекта
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    var top = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return {
        top: Math.round(top),
        left: Math.round(left)
    };
}

function bgscroll() { //прокручиваем
    var elems = document.querySelectorAll('.first');
    pageY = window.pageYOffset || document.documentElement.scrollTop;
    clientY = document.documentElement.clientHeight || document.body.clientHeight;

    for (i = 0; i < elems.length; i++) {

        elemTop = getCoords(elems[i]).top;

        if (elemTop < pageY + clientY && pageY < elemTop + elems[i].offsetHeight) { // если картинка показалась на экране верхним или нижним краем
            elems[i].style.backgroundPosition = "center " + Math.floor((pageY - elemTop) * 0.6) + "px"; // делаем смещение её фона равным разнице между ее расположением относительно начала документа и прокруткой, умноженное на коэффицент (который и создает эффект паралакса)
        }
    }

}

window.onscroll = function() {
    bgscroll()
}
$(function() {
    $(document).on('mousewheel', function(event) {
        var top = $(window).scrollTop() - (event.originalEvent.wheelDelta );
        event.preventDefault();
         $('html, body').stop().animate({
            scrollTop: top
        }, 800);
    })

})
  </script>
</head>

<body>



<div class='first'>
<span class='info orange'>Информация</span>
<div class='main'>
<span class='info_show show '>текст1</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация2</span>
<div class='main'>
<span class='info_show '>текст2</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация3</span>
<div class='main'>
<span class='info_show '>текст3</span>
</div>
</div>




</body>

</html>