Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2016, 15:26
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

Как добавить класс, если div виден пользователю?
На jQuery есть много различных эффектов, которые постепенно срабатывают при прокрутке страницы как здесь http://codepen.io/rmitchellnet/pen/kqDrE

принцип довольно простой:
изначально див такой
<div class="scrollimate content" style="perspective-origin: 50% 312px;"  data-animation="fadeInRight">What3</div>


как только див при прокрутке появляется в видимой области экрана, он становится таким

<div class="scrollimate content animated fadeInRight" style="perspective-origin: 50% 312px;"  data-animation="fadeInRight">What3</div>



то есть к нему просто добавляется 2 класса, если в нем есть свойство data-animation. один animated, второй берется из свойства дива data-animation.

Думаю такое можно сделать и на чистом javascript, но я не понимаю как сделать событие с див, если он в видимой части экрана. Подскажите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2016, 16:14
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

https://learn.javascript.ru/metrics-window
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2016, 17:19
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

Сообщение от destus Посмотреть сообщение
https://learn.javascript.ru/metrics-window
Это я читал. Я могу узнать положение прокрутки и высоту экрана. и соответственно предел от h1 до h2 в который должен попасть верх див, чтобы поменялся стиль. Но мне это не сильно поможет.
я не хочу всем див c data-animation раздавать при загрузке страницы свои id, а потом вешать событие на onscroll и сравнивать в нем координаты див с текущим окном. Как-то это иначе должно делаться.
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2016, 17:54
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Сообщение от sovsem-nub Посмотреть сообщение
я не хочу всем див c data-animation раздавать при загрузке страницы свои id, а потом вешать событие на onscroll и сравнивать в нем координаты див с текущим окном. Как-то это иначе должно делаться.
Можно по таймеру проверять была прокрутка или нет. А дивы засунуть в массив и по очереди доставать.
var arr = [human,vegetables];
была прокрутка ? var el = arr.shift(); arr.push(el) /* показываем el */
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2016, 18:16
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

оказывается готовая js библиотека есть. подрубил http://mynameismatthieu.com/WOW/ у меня работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
toggly скрывает/раскрывает div, но если не скрыть его а выбрать следующую ссылку div pitbullalex Общие вопросы Javascript 7 20.11.2015 09:34
Подскаите как менять класс у елемента в зависимость от класса другово елемента NirVanea Общие вопросы Javascript 4 10.09.2015 13:51
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42
предупреждение пользователю если он кликнул стрелку "назад" в браузере. greysells Events/DOM/Window 3 22.03.2009 22:08
Как сравнить класс, если их много!? Sc@M Events/DOM/Window 16 29.08.2008 12:47