Перенести класс css из html в js в рабочем скрипте
Кнопка с анимацией при скролле:
<a href="#" class="toanimate" data-animation="tada">КНОПКА</a> Где toanimate - класс который меняет js на animated, (анимация css без js работает так: animated tada) а data-animation="tada" вид анимации, его и надо засунуть в js чтобы менять tada уже в самом js. blockToAnimate.each(function(){ if(jQuery(this).offset().top < (jQuery(window).scrollTop() + jQuery(window).outerHeight()) && jQuery(this).offset().top + jQuery(this).outerHeight() > (jQuery(window).scrollTop() ) ) { if (!jQuery(this).hasClass("animated")) { jQuery(this).addClass("animated"); animation_type = jQuery(this).data('animation'); jQuery(this).addClass(animation_type); } } else { jQuery(this).removeClass("animated"); //jQuery(this).trigger('animateOut'); animation_type = jQuery(this).data('animation'); jQuery(this).removeClass(animation_type); } });Буду признателен за помощь :thanks: |
Оно уже засунуто, ну и дальше-то что?
|
Возможно я не правильно выразился :)
Нужно сократить ссылку: <a href="#" class="toanimate" data-animation="tada">КНОПКА</a> До вида: <a href="#" class="toanimate">КНОПКА</a> Тип анимации (data-animation="tada") указывать уже в js. |
Ну или сделать так, что бы ссылка была с двумя классами подряд:
Вместо: <a href="#" class="toanimate" data-animation="tada">КНОПКА</a> Сделать: <a href="#" class="toanimate tada>КНОПКА</a> Но что бы js смог обрабатывать это. |
jQuery -
$("елемент").removeAttr("data-animation") JavaScript - елемент.removeAttribute("data-animation") Это удаления атрибута |
Я ничего все равно не понял, кроме одного - автор знает что надо сделать, что на что поменять, какие строки на какие и все такое - но хочет чтобы это сделали за него?
|
Извиняюсь что не понятно выражаю мысль. Попробую иначе.
Я не знаю пока что поменять в js. Но убрав в хтмл data-animation="tada" необходимо что бы функциональность обьектов, в данном случае ссылок сохранилась (те можно было менять тип анимации уже в самом js. |
mrtdiesel,
1. Зачем убирать ? 2. Если значение для всех объектов идентично, - то да - перенести эту переменную в скрипт - логично, если различно и не имеет неизменного алгоритма применительно к селекторам объектов - перенос нелогичен 3. Приведите все возможные варианты анимаций и их параметры (или алгоритм) Я не понял что означает tada или чтобы менять tada уже в самом js. Оно как-то связано с цифровым значением ? 4. Приведите стиль текущей анимации на css (Для нескольких вариантов tada и т.д.) |
1. Когда в хтмл будет только 1 или 2 класса, без дополнительных типов, ковычек - проще, во всяком случае мне :)
2. Необходимо менять переменную (в данном случае "tada" на другие уже в js, руками по желанию, а не по алгоритму. 3. "Tada" - 1 из видов анимации. При подключенном внешнем css файле работает так: class="animated tada;" Все возможные варианты анимации с сайта animate.css 4. "tada" - вид анимации. И работал бы в кнопке БЕЗ js в таком виде: <a href="#" class="animated tada">КНОПКА</a>, но для управления анимацией через js приходится стоку писать уже с большим кол-вом слов + заключать тип анимации "tada" в ковычки (чего я не хочу делать если перенести смену типа анимации в код js, который, например, можно положить на внешний сервер). <a href="#" class="toanimate" data-animation="tada">КНОПКА</a>, и js уже ищет и меняет класс animate на правильный - animated и подставляет переменную, которую как раз и нужно менять не в хтмл а js. В общем надо управлять типом анимации в js. Так будет понятнее :) а уж попутно решится моя проблема - хтмл строка уменьшится после переноса типа анимации в js)) |
Цитата:
А зачем типы анимации нужны в js? Они и так все указаны в файле css что скачивается с сайта Но все равно сделал. В строчку и столбик. хтмл можно будет таким писать? <a href="#" class="toanimate tada">КНОПКА</a>или еще лучше таким? <a href="#" class="toanimate">КНОПКА</a>Только не привязывайте поиск классов только к ссылкам. Хочется использовать анимацию не только к тегу "a", а к любым обьектам. |
Думаю, понял зачем нужны все типы анимации. Наверно по двум словам сразу - проще искать и при этом будет сразу тип анимации известен и преобразовывать в класс уже в js.
В таком случае я не удобный вид предоставил. Вот более удобный: animate + тип анимации Пусть js смотрит на один из видов, после того как найдет, он должен их переделать с animate tada в animated tada. Тк если сразу написать правильно класс animated tada, то будет срабатывать анимация уже от цсс, а надо не напрямую, а только во время прокрутки. На том сайте откуда взял анимацию цсс, говорится про обьединение js, но я пока слобоват в этом. |
Цитата:
|
Цитата:
Вы лично что хотите сделать, как это должно выглядеть в браузере, в глазах юзера? |
Да, что должно быть в ковычках сделал.
Согласен про слабости и силу. Желаю вам, себе и всем глубоко понять чего мы хотим и захотеть сделать что-то стоящее :) В браузере анимация в обе стороны. js скрипт что я кинул - лишь часть его, но дальше, я думаю сам смогу. Для меня главное сократить строку <a href="#" class="toanimate" data-animation="tada">КНОПКА</a>до вида <a href="#" class="toanimate tada">КНОПКА</a>и менять тип анимации уже в js или в том же хтмл (похоже так выйдет). Еще интересно, если я буду добавлять классы через пробел в хтмл, то js сможет увидеть или нужно то что в ковычках только то что будет искать js и добавив еще один класс по стилю кнопки js уже не найдет то, что должен? |
mrtdiesel,
Ну в основном доделал, сейчас убегаю (выложу к ночи) 1. Хочется посмотреть страницу с примером анимированного контента (любой вариант анимации) 2. Анимация должна возникать сразу по загрузке элемента ? Или после загрузки всей страницы(всех элементов) ? 3. Есть такое предложение: Могу повесить выпадающее меню (<select>) с юзер-выбором типа анимации либо одновременно для всех элементов, либо при наведении на конкретный элемент - появляется менюшка выбора типа анимации именно для этого элемента( стиль менюшки Вы сможете править - поставим уникальный класс). 4. Версия jQuery ? (можно глянуть реальную страницу ?) |
Синхронизации моих ожиданий не получилось, думал до 6 вечера MSK получить от Вас ответы и добить код... Продолжу завтра. Если сегодня будете, - отпишитесь про что сможете по сообщению №15
|
1. Скинул.
2. Анимация работает во время движения вверх и вниз. 3. Не против, в таком случае можно сделать: появление при скролле вниз, в обе стороны, один раз, повторять. Но на этом я не настаиваю. Если есть желание. 4. jQuery v1.11.0 реальную страницу скинул. |
mrtdiesel,
ГМ, открыл файл, увидел что анимация происходит при скролле, Именно при скролле и нужна ? Т.е. пока не очень понял когда и при каких условиях добавлять снимать класс. Сейчас скрипт добавляет класс при скролле страницы и при появлении элемента в пределах окна просмотра контента и снимает за его пределами. |
Все правильно, так и нужно. Я только хотел сократить часть кода в хтмл немного подкорректировав js. Об остальном не просил. Скрипт работает во всех браузерах и во всех разрешениях, его работой я доволен - работает отлично, не то что другие скрипты.
|
mrtdiesel,
Ок, постараюсь, что успею до завтрашнего обеда (15.07.2015) , позже сборы начнутся |
Есть кто живой?
|
Цитата:
|
Часовой пояс GMT +3, время: 21:56. |