Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2015, 15:20
hhh hhh вне форума
Профессор
Отправить личное сообщение для hhh Посмотреть профиль Найти все сообщения от hhh
 
Регистрация: 19.11.2013
Сообщений: 150

Движение элемента при скролле
Подскажите, пожалуйста, как лучше реализовать падение капельки.
Пока только выходит сделать одно падение, а мне надо чтобы при откате сролла, затем при повторном сролле снова происходило событие... И так бесконечно.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
  .wrapper {
    width: 400px;
    height: 400px;
    overflow: auto;
    border: 1px dashed #ccc;
    position: relative;
  }
  .wrapper-inner {
    height: 150%;
  }
  .drop {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: blue;
    position: fixed;
    top: 20px;
    left: 20%;
    margin-left: -25px;
  }
  .drop::after {
    position: absolute;
    bottom: -21px;
    left: 13px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px;
    border-color: blue transparent transparent transparent;
  }
</style>
  <div class="wrapper">
    <div class="wrapper-inner">
      <div class="drop"></div>
    </div>
  </div>
<script>
   var mainScroll = $('.wrapper'),
       innerHeight = $('.wrapper-inner').outerHeight(),
       outerHeight = $('.wrapper').innerHeight(),
       drop = $('.drop'),
       dropTop = $('.drop').position().top,
       i = 0;

   mainScroll.scroll(function (){
   scrollBottom = innerHeight - outerHeight + mainScroll.scrollTop() - 50;
   // console.log(scrollBottom)

     i++;
     // console.log(i)
     if (i == 1) {
      downDrop();
     } 

   });

   function downDrop() {
    drop.css('top', ++dropTop);

    var time = setTimeout(downDrop, 'fast');
    var z = parseInt($(drop).css('top'), 10);
    // console.log(z)
    if (z > scrollBottom) {
      drop.fadeOut('fast', function(){
        clearTimeout(time);
        drop.css('top', 19).fadeIn();
        mainScroll.animate({
          scrollTop: 0
        }, 0)
      });
    }
   }
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2015, 17:55
hhh hhh вне форума
Профессор
Отправить личное сообщение для hhh Посмотреть профиль Найти все сообщения от hhh
 
Регистрация: 19.11.2013
Сообщений: 150

никто не хочет мне помочь, в моем чань скрипте(
все-равно решил, но немножко по-другому
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2015, 18:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

hhh,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
  .wrapper {
    width: 400px;
    height: 400px;
    overflow: auto;
    border: 1px dashed #ccc;
    position: relative;
    z-index: 10;
  }
  .wrapper-inner {
     position: relative;
    height: 150%;
  }
  .drop {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: blue;
    position: fixed;
    top: 20px;
    left: 20%;
    margin-left: -25px;
    z-index: 1;

  }
  .drop::after {
    position: absolute;
    bottom: -21px;
    left: 13px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px;
    border-color: blue transparent transparent transparent;
  }
</style>
  <div class="wrapper">
    <div class="wrapper-inner">
      <div class="drop"></div>
    </div>
  </div>
<script>
   var mainScroll = $('.wrapper'),
       drop = $('.drop'),
       height = mainScroll.height()-drop.height()-19,
       i = 0;
   mainScroll.scroll(function (){
  !i  && (i = mainScroll.scrollTop())&& downDrop();
   });

   function downDrop() {
    drop.css('top', 19).animate({ 'top' : '+='+height
    }, 3000, function() { i = 0;  mainScroll.scrollTop(0);  drop.css('top', 19)

});



   }
</script>

</body>

</html>

Последний раз редактировалось рони, 05.03.2015 в 18:26.
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2015, 19:26
hhh hhh вне форума
Профессор
Отправить личное сообщение для hhh Посмотреть профиль Найти все сообщения от hhh
 
Регистрация: 19.11.2013
Сообщений: 150

Спасибо. Буду разбираться
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2017, 08:57
Новичок на форуме
Отправить личное сообщение для Vladij Посмотреть профиль Найти все сообщения от Vladij
 
Регистрация: 04.10.2017
Сообщений: 1

дык а @keyframes не?
Ответить с цитированием
  #6 (permalink)  
Старый 04.10.2017, 10:04
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,793

Vladij, вопрос уже два с половиной года как закрыт)
Да и каким образом это можно сделать через "keyframes"?
Суть в том, что анимация должна происходить при скролле страницы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заменить class в div при скролле страницы EvilDoom Общие вопросы Javascript 3 10.10.2014 15:56
Закрепление блока при скролле с проигрыванием анимаци VBeregovoy Элементы интерфейса 0 10.04.2014 11:19
Отступы при удалении элемента формы bona Общие вопросы Javascript 7 07.11.2013 14:27
События: движение мыши при нажатой клавише bayah Общие вопросы Javascript 11 18.12.2012 10:18
Изменение фона элемента при клике. psydo Элементы интерфейса 8 28.06.2012 23:53