Мучаюсь над проблемой 2-ой день, учитывая неопытность в CSS , да и в целом разработке шаблонов.
Требуется заменить эффект при наведении на иконки.
Помогите, пожалуйста.
И так...
Имеем шаблон YT Nite ( demo
http://yootheme.com/demo/joomla/nite )
Вопрос, как я полагаю, касается непосредственно плагину uikit ( возможно и вовсе не плагин )
На главной странице в центре расположены 4 круглые иконки
При загрузке страницы они поднимаются снизу вверх
А при наведении на них происходит увеличение
Все это дело находится в позиции fullscreen , модуль Home Fullscreen Icons
Вырубаем редактор в общих настройках, заходим в модуль и видим следующее
<div>
<h1 class="uk-heading-large tm-heading-border" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:100}">Our Services</h1>
<p class="uk-text-large" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:200}">We are a growing company <br class="uk-hidden-small">which focuses on modern web technologies.</p>
<ul class="tm-nite-icons">
<li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:100}"><a href="#"><span class="tm-icon-yootheme-uikit"></span></a></li>
<li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:200}"><a href="#"><span class="tm-icon-yootheme-warp"></span></a></li>
<li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}"><a href="#"><span class="tm-icon-yootheme-widgetkit"></span></a></li>
<li data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:400}"><a href="#"><span class="tm-icon-yootheme-pagekit"></span></a></li>
</ul>
</div>
Наши иконки находятся под
<ul class="tm-nite-icons">
Видим, что иконкам задана "функция
data-uk-scrollspy="{cls:'uk-animation-slide-bottom
Это и есть эффект появления снизу вверх. При замене
uk-animation-slide-bottom
на
будет обратный эффект. Все что касается этой "функции" написано здесь
http://www.getuikit.ru/docs/scrollspy.html Разобрался, с этим не возникло проблем, заменил на нужный вариант.гуд.
Ниже начинается главная часть проблемыТеперь осталось заменить эффект анимации при наведении...
На том же оф. сайте uikit нашел руководство по внедрению "функции" анимации при наведении
Здесь так же четко и ясно все прописано
http://www.getuikit.ru/docs/animation.htmlЯ хочу заменить эффект увеличение при наведении на эффект встряхивание при наведении
Такая "функция" несет название shake \ встряхнуть
Исходя из руководство нужно найти функцию
, и как в случаи с scrollspy просто заменить на нужное.
Но...
Как видим в первом коде ничего подобного нету.
Вопрос 1: Где искать ?Опять же, исходя из руководство достаточно добавить строку и все заработает
Я попробовал добавить несколькими способами - ничего не произошло.
В первом случаи иконка исчезла, в другом перестала работать функция scrollspy ( при загрузке страницы оставался статичным, а остальные 3 поднимались снизу вверх )
Вопрос 2: Как правильно прописать ?Далее решил покопаться в CSS файле...
Открыв файл theme.css первым делом в поиск вбил
и вот что вышло
* ========================================================================
Component: Animation
========================================================================== */
[class*='uk-animation-'] {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* Hide animated element if scrollspy is used */
@media screen {
[data-uk-scrollspy*='uk-animation-'] {
opacity: 0;
}
}
/*
* Fade
* Higher specificity (!important) needed because of reverse modifier
*/
.uk-animation-fade {
-webkit-animation-name: uk-fade;
animation-name: uk-fade;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-timing-function: linear !important;
animation-timing-function: linear !important;
}
/*
* Fade with scale
*/
.uk-animation-scale-up {
-webkit-animation-name: uk-fade-scale-02;
animation-name: uk-fade-scale-02;
}
.uk-animation-scale-down {
-webkit-animation-name: uk-fade-scale-18;
animation-name: uk-fade-scale-18;
}
/*
* Fade with slide
*/
.uk-animation-slide-top {
-webkit-animation-name: uk-fade-top;
animation-name: uk-fade-top;
}
.uk-animation-slide-bottom {
-webkit-animation-name: uk-fade-bottom;
animation-name: uk-fade-bottom;
}
.uk-animation-slide-left {
-webkit-animation-name: uk-fade-left;
animation-name: uk-fade-left;
}
.uk-animation-slide-right {
-webkit-animation-name: uk-fade-right;
animation-name: uk-fade-right;
}
/*
* Scale
*/
.uk-animation-scale {
-webkit-animation-name: uk-scale-12;
animation-name: uk-scale-12;
}
/*
* Shake
*/
.uk-animation-shake {
-webkit-animation-name: uk-shake;
animation-name: uk-shake;
}
/* Direction modifiers
========================================================================== */
.uk-animation-reverse {
-webkit-animation-direction: reverse;
animation-direction: reverse;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
/* Duration modifiers
========================================================================== */
.uk-animation-15 {
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
/* Origin modifiers
========================================================================== */
.uk-animation-top-left {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.uk-animation-top-center {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.uk-animation-top-right {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.uk-animation-middle-left {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.uk-animation-middle-right {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.uk-animation-bottom-left {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.uk-animation-bottom-center {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.uk-animation-bottom-right {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/* Sub-object: `uk-animation-hover`
========================================================================== */
/*
* Enable animation only on hover
* Needed for Firefox because animations are not triggered when switching between display `hidden` and `block`
*/
.uk-animation-hover:not(:hover),
.uk-animation-hover:not(:hover) [class*='uk-animation-'],
.uk-touch .uk-animation-hover:not(.uk-hover),
.uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] {
-webkit-animation-name: none;
animation-name: none;
Скинул весь основной код, где и упоминается функция uk-animation-*
В первых же строках смутила надпись
Hide animated element if scrollspy is used */
И вот вроде первая причина почему не работают анимации...ведь у нас работает scrollspy ...
Но сразу же назревает второй вопрос, как же тогда работает функция эффекта увеличение ?
Вопрос 3: Как отключить scrollspy , чтобы работала animation , или же совместно?Так и не разобрался, что к чему и пошел дальше искать в CSS знакомые строки...
На сей раз решил пробить
Вот что вышло
*
* Nite demo icons
*/
.tm-nite-icons {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
}
.tm-nite-icons > li {
display: inline-block;
}
.tm-nite-icons > li > a {
display: inline-block;
border: 3px solid #ffffff;
border-radius: 50%;
width: 80px;
height: 80px;
line-height: 85px;
margin: 15px 15px 0 15px;
padding: 20px;
font-size: 64px;
-webkit-transition: all 0.1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
color: #ffffff;
}
.tm-nite-icons > li > a:hover {
border-color: rgba(0, 0, 0, 0);
background-color: #ffffff;
color: #2b3034;
text-decoration: none;
-webkit-transform: scale(1.2);
}
/* Only phones */
@media (max-width: 768px) {
.tm-nite-icons > li > a {
width: 48px;
height: 48px;
line-height: 53px;
margin: 10px;
padding: 12px;
font-size: 43px;
Вопрос 4: Может быть здесь прописана функция анимации увеличение ? В общем то все...
Помогите разобраться, уже сил нет.
И еще вопрос...
Как двигать этими иконками ? вправо, влево...ближе друг к другу..
Спасибо большое.
Полный CSS
Скачатьtheme.css