Показать сообщение отдельно
  #6 (permalink)  
Старый 04.07.2016, 12:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

вертикальный скролл горизонтальное перемещение
Artем,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   html{
    width: 100%;
    height: 3000px;
   }
  body{
    position: relative;
     overflow-x: hidden;
  }

  .first {
    background: #FFCC00;
    width: 100%;
    height: 200px;
    text-align:  center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
     transition:  all .4s ease-out;
}


  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>

    $(window).load(
        function () {
            var l, min = 500, max = 1500, el = $(".first"), width = el.width() ;
            el.css({marginLeft : -width})
           $(window).scroll(function() {
      var scroll =  $(window).scrollTop();
    if(scroll > min && scroll < max )  l = - 104 + (scroll - min)/(max - min) * 208 + "%";
    if(scroll < min) l = "-104%";
    if(scroll > max) l = "104%";
    if(scroll > min + 300 &&  scroll < max - 300 ) l = "0%";
    el.css({marginLeft : l})
})



        }
    );




  </script>
</head>

<body>

<div class='first'>
  блок в середине страницы
</div>


</body>

</html>

Последний раз редактировалось рони, 04.07.2016 в 12:29.
Ответить с цитированием