Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 04.01.2015, 15:40
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Ruslan_xDD
Прикольно, но лучше на чистом JS + CSS3 сделать.
В принципе идея интересная, тут даже наверно css с параметрами анимации мон сделать чисто статическим, а вторым cоздаваемым и закидываемым на body элементом <style> лишь давать новые координаты обрамления. После отключения затемнения, последний <style> изымаем. Есть нюансы в задании анимации, чтобы элементы передвигались состыкованно.
И да, тогда реализация пофег на чём(js/jQ), ибо скорость и вариация анимации задаётся css
Думаю анимация через вектор, пример transform: translate(400px,-200px) ; http://habrahabr.ru/post/135816/

Последний раз редактировалось Deff, 04.01.2015 в 16:14.
Ответить с цитированием
  #42 (permalink)  
Старый 04.01.2015, 16:27
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

а чем CSS3 анимация не канает? http://learn.javascript.ru/play/4Ydgx
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #43 (permalink)  
Старый 04.01.2015, 16:40
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

devote,
Чот у мну во всех браузерах по разному (ХР)
Хорошо работает лишь в Хроме. В опере 12.16 - глючит. В Мозилле глючит на таблице
Про скролл - хорошо, ток оч лениво подгоняет(уравновешиваетс как лабораторные весы на микрограммах), раза в два побыстрей ба

Последний раз редактировалось Deff, 04.01.2015 в 17:12.
Ответить с цитированием
  #44 (permalink)  
Старый 04.01.2015, 17:27
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

рони, я бы на твоём месте сделал все анимации на transition. Т.е., чтобы просто можно было менять свойства стилей и анимация сама происходила.

<!DOCTYPE HTML>
<html>
  
  <head>
    <style type="text/css">
      .transition {
        -moz-transition: all 2s;
        -ms--moz-transition: all 2s;
        -o-moz-transition: all 2s;
        -webkit-moz-transition: all 2s;
        transition: all 2s;
      }
    </style>
  </head>
  
  <body>
    <div id="test" style="border: 3px solid #000; left: 10px; height: 30px; position: fixed; top: 10px; width: 100px;"></div>
    
    <script type="text/javascript">
      var test = document.getElementById('test');
      test.classList.add('transition');
      test.clientHeight;
      test.style.left = '200px';
      test.style.top = '400px';
      test.style.width = '200px';
    </script>
  </body>

</html>
Ответить с цитированием
  #45 (permalink)  
Старый 04.01.2015, 17:34
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

devote, класс!
Ответить с цитированием
  #46 (permalink)  
Старый 04.01.2015, 17:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

devote,
Ответить с цитированием
  #47 (permalink)  
Старый 04.01.2015, 17:54
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Deff
Чот у мну во всех браузерах по разному (ХР)
ну дык понятно жешь, ведь сделано на коленях за 20 минут... Чего ты хотел) Естественно где-то нужно учесть префиксы, где-то события иные, например в сафари вместо события transitionend нужно слушать webkitTransitionEnd ну и т.д.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #48 (permalink)  
Старый 04.01.2015, 17:57
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Deff
Про скролл - хорошо, ток оч лениво подгоняет(уравновешиваетс � как лабораторные весы на микрограммах), раза в два побыстрей ба
подкрути))) Помимо скролла кстати нужно еще и ресайз окна слушать)
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #49 (permalink)  
Старый 04.01.2015, 18:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

devote,
По опыту во вьетнаме лучше скролл(overflow:hidden) запрещать на время затемнений,
На счёт ресайза - возможно... Хотя редкий факт, когда при деяниях с отслеживанием эффекта - юзер будет ресайзить...
Ответить с цитированием
  #50 (permalink)  
Старый 05.01.2015, 05:50
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

devote, слушай, я вот только благодаря твоему примеру узнал о событии transitionend. До этого использовал setTimeout. Интересно узнать, не будет ли двойных срабатывания событий в каких-нибудь браузерах?
Например, если я так сделаю в своём коде:

node.eventAdd('transition|webkitTransitionEnd', function() {
    //
});


Есть вероятность, что он сработает два раза? Мало ли, вдруг в каких-нибудь новых вебкитах есть поддержка и просто transition, и webkitTransition.

P.S.: через ontransition вешать это событие можно? А то не хочется сейчас тестировать.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onClick эвент для всего документа, кроме отдельно взятого элемента DOM el_erizo Events/DOM/Window 5 19.03.2010 15:09