Форум

Artем · #1 (**permalink**) 04.07.2016, 09:20

Добрый день!

Подскажите, пожалуйста, как реализовать на сайте механизм появления элемента при прокрутке экрана - элемент движется по горизонтальной оси (с права налево, или наоборот), в зависимости от прокрутки экрана вверх или вниз. Данный механизм реализован на сайте: mhmgroup.ae
Есть похожий код, но в нем элемент будет просто появляться и исчезать, но я никак не могу найти решение для необходимой мне цели:

<script type="text/javascript">
jQuery(function(f){
    var element = f('#back-top');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);           
    });
});
</script>

Спасибо

рони · #2 (**permalink**) 04.07.2016, 10:54

Artем,
html сделайте и
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Artем · #3 (**permalink**) 04.07.2016, 11:19

Сообщение от рони

Artем,
html сделайте и
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Оформил. Вы можете помочь мне в моем вопросе?

Rasy · #4 (**permalink**) 04.07.2016, 12:06

Artем,
http://mynameismatthieu.com/WOW/

Dilettante_Pro · #5 (**permalink**) 04.07.2016, 12:11

Artем,

<!DOCTYPE html>
<html>
<head>
    <style>
        .scroller 
        { position:fixed;
          top:10px;
          left:0px;
          width:50px;
          height:50px;
          background-color:red
            }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var element = $('#back-top');
            $(window).scroll(function () {
                element.css('left', $(this).scrollTop() * window.innerWidth / $("#container").height() + "px");
            });
        });
</script></head>
<body>
   <div id="container" style="position:absolute;width:100%;height:1500px"></div>
   <div id="back-top" class="scroller"></div>
</body>
</html>

рони · #6 (**permalink**) 04.07.2016, 12:20

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>

рони · #7 (**permalink**) 04.07.2016, 15:23

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 0 ;
    transition:  all 1.2s ease-out ;
}


.right{
    margin-left : 104%;
}
.left{
    margin-left : -104%;
}

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

$(window).load(function() {
    var min = 500,
        max = 1500,
        el = $(".first");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        scroll < min ? el.addClass("left") : el.removeClass("left");
        scroll > max ? el.addClass("right") : el.removeClass("right")
    })
});  </script>
</head>

<body>

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


</body>

</html>

Artем · #8 (**permalink**) 11.07.2016, 21:21

Dilettante_Pro,
Здравствуйте! Спасибо большое Вам за ценную информацию! Сайт я делаю для себя, по урокам в интернете, но по данному моменту мне с трудом удавалось найти правильное решение. Перечитал много одинаковых статей с разными вариантами подключения jQuery, но ничего не выходит. Явно что-то просто недопонимаю и упускал. Ваши знания помогли.
Прошу Вас, пожалуйста, помочь разобраться в некоторых моментах:
1. Как реализовать код, чтобы элемент (#back-top), начал смещаться с исходной позиции (на которой он размещен изначально), при прокрутке экрана? Сейчас же он смещается с левой крайней стороны экрана.
2. Пробовал различные вариации, чтобы при прокрутке экрана вниз, элемент (#back-top), начал двигаться с права налево до определенной позиции (например, до середины экрана), а не наоборот. Для этого менял значение "Left" в коде на "Right", но ничего не получилось. В чем я не прав?
3. Для затухания элемента (#back-top) при прокрутке экрана, пример данной анимации можно увидеть на сайте http://mhmgroup.ae/, я дополнил Ваш код следующим:

var scrollTop = $(window).scrollTop();
        var move = scrollTop / coeff;
        element['fade' + (scrollTop > 800? 'Out' : 'In')](2500);
        element.css('marginLeft', move);

Возможно ли сделать, чтобы затухание элемента начиналось постепенно, от одной точки до другой, до полного исчезновения, при прокрутке экрана (как в примере на сайте)? Приведенный выше код скрывает элемент лишь после прохождения точки в 800px. с указанным временным интервалом.

Спасибо!

Artем · #9 (**permalink**) 11.07.2016, 21:23

рони,
Здравствуйте! Благодарю за помощь!

Dilettante_Pro · #10 (**permalink**) 12.07.2016, 14:17

Artем,
Движение с определенной позиции справа налево с затуханием

<!DOCTYPE html>
<html>
<head>
    <style>
        .scroller 
        { position:fixed;
          top:10px;
          right:100px;
          width:50px;
          height:50px;
          background-color:red
            }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var element = $('#back-top');
             $(window).scroll(function () {
                element.css('right',100 +  $(this).scrollTop() * (window.innerWidth - 200) / $("#container").height() + "px");
                element.css('opacity', 1 - $(this).scrollTop() / $("#container").height());
            });
        });
</script></head>
<body>
   <div id="container" style="position:absolute;width:100%;height:1500px"></div>
   <div id="back-top" class="scroller"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript