Форум на Kuban.ru (http://forums.kuban.ru/)
-   Веб-дизайн и программирование (http://forums.kuban.ru/f1030/)
-   -   Нужен совет по JS (http://forums.kuban.ru/f1030/nuzhen_sovet_po_javascript-8782974.html)

Plutooo 29.12.2018 13:59

Нужен совет по JS
 
Нужен совет по JS, а именно, по анимации. Нужно добавить эффект, чтобы анимация срабатывала при прокрутке страницы. Для этого, конечно, есть wow.js и appear.js, но как именно их применить, не знаю.

SanekSp 30.12.2018 13:04

В jQuery есть обработчик события .scroll()
jQuery(window).scroll(function(){

JS код обработчика при прокрутки

}
);

Например: Копка прокрутки страницы

jQuery(document).ready(function(){ // После загрузки страницы добавляем обработчик Прокрутки

jQuery(window).scroll(function(){
if(jQuery(document).scrollTop()>0){
jQuery(".scrollup").fadeIn('fast'); // Показываем Кнопку
}else{
jQuery(".scrollup").fadeOut('fast'); // Прячем Кнопку
}
});

});

Ну и <div class="scrollup"></div> - Кнопка прокрутки страницы Вверх

Вот и Все !!!

SanekSp 30.12.2018 14:06

Да и кстати у самой jQuery куча Анимации
.animate() - Позволяет выполнить анимацию основанную на изменении CSS свойств.
.fadeIn() - Позволяет плавно изменить прозрачность элементов из скрытого состояния в видимое.
.fadeOut() - Позволяет плавно изменить прозрачность элементов из видимого состояния в скрытое.
.slideDown() - плавно отображает элементы скользящим движением (постепенно увеличивая их высоту).
.slideUp() - плавно скрывает элементы скользящим движением (постепенно уменьшая их высоту).

Plutooo 01.01.2019 22:45

1, 2 -AlexIT > Спасибо за ответ! А как сделать, как указать, чтобы при прокрутке страницы появлялись несколько строк текста (не весь абзац)?

SanekSp 04.01.2019 13:20

Несколько строк текста ограничиваются CSS свойствами блока.
Например при overflow:hidden; будет отображаться только то, что помещается в размеры блока, остальное будет скрыто!
<div style="overflow:hidden; height:36px; width:350px; cursor:pointer;">Текст блока .... </div>
А дальше просто, с помощью JS или jQuery, меняем height на "аuto" и обратно на "36px". - Вот и ВСЕ.
В Инете можно найти кучу вариантов ГАРМОШКИ, с подробным описанием и на JS и на jQuery - выбирай ЛЮБУЮ!

Plutooo 16.01.2019 21:20

Больше никто в JS не соображает что ли?

tiand 22.01.2019 02:07

Есть же документация
[url]https://wowjs.uk/docs.html[/url]

krupenskaya 22.01.2019 11:49

в js соображать в отсутствии jw - это какя-то новая молодежная форма садо-мазо что ли?

SanekSp 24.02.2019 19:49

7-Гость >Вообще то СадоМаза началась еще с Ассемблера, а JS это уже просто замена Розг на Цветочки!!!

Plutooo 26.02.2019 23:16

Может кто помочь с установкой (советом) clipboardjs в prismjs? Сайтов по этому находится не мало, но все какие-то мудрёные. Можно написать в ЛС.

vk 22.02.2022 15:02

да и в bootstrap уже есть анимационные действия
[url]https://mdbootstrap.com/docs/standard/content-styles/animations/[/url]

FROLOff 24.06.2022 10:20

На этом форуме кодеры не обитают. Имеет смысл сходить на тематические ресурсы.


Текущее время: 06:41. Часовой пояс GMT +3.