Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/8: Рейтинг темы: голосов - 8, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 18.01.2016
Сообщений: 187
1

Как совместить два эффекта (zoomIn и zoomOut) в одном

25.06.2016, 12:01. Показов 1564. Ответов 6
Метки нет (Все метки)

Есть вот такой вот код - animated infinite zoomIn, позволяющий элементу зациклено всплывать (с помощью эффекта zoomIn), а потом снова прятаться.
А как можно реализовать следующую задумку. Когда элемент всплывает как zoomIn, а затем прячется с с помощью эффекта zoomOut?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.06.2016, 12:01
Ответы с готовыми решениями:

ZoomIn и ZoomOut в QPlainTextEdit
Как можно приблизить текст в QPlainTextEdit ??? Есть ли какая-нибудь альтернатива приближению и...

Задача с CSS и HTML (Совместить два эффекта)
Привет. требуется помощь - нужно совместить два эффекта для текста. первый - градиент, второй -...

Как совместить два графика на одном?
Как совместить два графика в один? В моем случае kg j (r j) должен идти от 0 до 1.633, а kgg t (r...

Как совместить два рисунка на одном figure?
как вывести на одном рисунке ЛАЧХ и окружности????? ЛАЧХ K = 35; w1 = logspace(0,3,100000); ...

__________________
6
Ренегат
Эксперт HTML/CSS
1736 / 1081 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
25.06.2016, 12:49 2
Igorby, открою вам тайну, это не код, это последовательность слов...
покажите нормальный код чтобы можно было хоть как то понять о чём вы говорите
0
Модератор
Эксперт JSЭксперт HTML/CSS
3610 / 2524 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
25.06.2016, 13:18 3
Разработчики animated предлагают такой вариант на JQuery:
HTML5
1
<h1 id="anim" >Example</h1>
Javascript
1
2
3
4
5
6
7
8
9
var animationFirst = 'animated zoomOut';
var animationSecond = 'animated zoomIn';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $('#anim').addClass(animationFirst).one(animationEnd, function(){
        $(this).removeClass(animationFirst);
    $('#anim').addClass(animationSecond).one(animationEnd, function(){
        $(this).removeClass(animationSecond);});
    });
    }
0
0 / 0 / 0
Регистрация: 18.01.2016
Сообщений: 187
26.06.2016, 21:28  [ТС] 4
Цитата Сообщение от BANO Посмотреть сообщение
Igorby, открою вам тайну, это не код, это последовательность слов...
покажите нормальный код чтобы можно было хоть как то понять о чём вы говорите
Что-бы этот код работал, нужно подключить animate.css и библиотеку - wow.min.js, а так-же в шаблоне прописать
Javascript
1
2
3
<script>
 new WOW().init();
</script>
И в css нужно прописать к любому элементу следующие настройки
animation-delay: 0.1s;
animation-name: zoomIn;
animation-duration: 1s;

zoomIn - это один из эффектов. Ознакомиться со всеми можно тут https://daneden.github.io/animate.css/
Так вот зумИн, позволяет элементу выплывать из ниоткуда. А есть эффект зумАут, который напротив уводит элемент в никуда. Как можно было бы объединить эти два эффекта, что-бы элемент появлялся и удалялся.

Я думаю те кто работал с этой библиотекой, должны об этом знать

Цитата Сообщение от mrtoxas Посмотреть сообщение
Разработчики animated предлагают такой вариант на JQuery:
Неужели может помочь только скрипт и нет другого решения с помощью того же css?
0
Ренегат
Эксперт HTML/CSS
1736 / 1081 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
26.06.2016, 21:55 5
Igorby, чисто теоретически можно запилисть свою анимацию, которая бы включала в себе эти две и поставить её на репит (не помню как это делается, но тут люди знают)
так что, если смогут решить без скриптов, то смогут, если нет, то попросите сдешнего модератора перенести тему в js
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
27.06.2016, 00:46 6
Лучший ответ Сообщение было отмечено Igorby как решение

Решение

Igorby,гмх, погуглив секунду, нашел вот такое решение без библиотеки. Только надо подкрутить под себя
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes shadow {
from {color:rgba(0,0,0,0)}
25% {color:rgba(0,0,0,0.5)}
50% {color:rgba(0,0,0,1)}
75% {color:rgba(0,0,0,0.5)}
to {color:rgba(0,0,0,0)}
}
h1 {
font-size: 3.5em;
color: darkmagenta;
-webkit-animation: shadow  2s infinite ease-in-out;
animation: shadow  2s infinite ease-in-out;
}
HTML5
1
2
3
<h1>
123123
</h1>
https://jsfiddle.net/3kjfh0hp/1/
0
0 / 0 / 0
Регистрация: 18.01.2016
Сообщений: 187
28.06.2016, 09:05  [ТС] 7
Цитата Сообщение от boilzzz Посмотреть сообщение
нашел вот такое решение без библиотеки
Вот как раз, то что нужно. Спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.06.2016, 09:05

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как совместить 2 графика на одном чертеже
как в labview показать на waveform graph 2 графика вместе для возможности сравнения?

Как совместить в одном запросе комбобокс и радиобатн
Всем доброго времени суток! Помогите новичку! Решила заняться саморазвитием, в универе изучала С++,...

Как совместить две агрегатные функции в одном запросе
Доброго времени суток! Есть следующий запрос: select fio, count(inq_id) as quantity, sys_name...

Как совместить функциональность EXE и DLL файлов в одном выполняемом.
Мне необходимо в одном выполняемом файле (EXE) совместить два способа загрузки: как DLL и как...

Как совместить запуск команд от root и обычного пользователя в одном сценарии
Как совместить запуск команд от root и обычного пользователя в одном сценарии Пример ...

Как совместить два проекта
Вопрос: Как совместить два проекта в VB, что бы в одном проекте можно было бы вызвать формы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.