Форум русской поддержки Joomla!® CMS
10.12.2016, 03:17:55 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Вопрос по CSS в uikit

 (Прочитано 1371 раз)
0 Пользователей и 1 Гость смотрят эту тему.
vlusting
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 20


« : 06.10.2015, 19:43:59 »

Мучаюсь над проблемой 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
на
Код:
uk-animation-slide-top
будет обратный эффект. Все что касается этой "функции" написано здесь http://www.getuikit.ru/docs/scrollspy.html
Разобрался, с этим не возникло проблем, заменил на нужный вариант.гуд.

Ниже начинается главная часть проблемы

Теперь осталось заменить эффект анимации при наведении...
На том же оф. сайте uikit нашел руководство по внедрению "функции" анимации при наведении
Здесь так же четко и ясно все прописано http://www.getuikit.ru/docs/animation.html
Я хочу заменить эффект увеличение при наведении на эффект встряхивание при наведении
Такая "функция" несет название shake \ встряхнуть
Код:
.uk-animation-shake
Исходя из руководство нужно найти функцию
Код:
.uk-animation-*
, и как в случаи с scrollspy просто заменить на нужное.
Но...
Как видим в первом коде ничего подобного нету.
Вопрос 1:  Где искать ?
Опять же, исходя из руководство достаточно добавить строку и все заработает
Я попробовал добавить несколькими способами - ничего не произошло.
В первом случаи иконка исчезла, в другом перестала работать функция scrollspy ( при загрузке страницы оставался статичным, а остальные 3 поднимались снизу вверх )
Вопрос 2:  Как правильно прописать ?

Далее решил покопаться в CSS файле...

Открыв файл theme.css первым делом в поиск вбил
Код:
data-uk-scrollspy
и вот что вышло

Код:
* ========================================================================
   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 знакомые строки...
На сей раз решил пробить
Код:
tm-nite-icons
Вот что вышло
Код:
*
 * 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
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #1 : 07.10.2015, 00:25:44 »

1) юикит - это семантический фреймворк, аналог bootstrap и прочих http://getuikit.com

2) ваш шаблон использует less, учите его, компилятор встроен в шаблон, который также имеет встроенный кастомизатор стилей (правда, анимация в нем не задается), не ищите в CSS, ибо в вашем случае CSS - это скомпилированный less и он не содержит всего, что возможно к использованию

3) ковыряйте less в папке less шаблона, а также в папке warp/vendor/uikit/less - там все исходники, в т.ч. варианты анимации; в доке все стили, подвластные управлению с помощью data-uk-*, описаны преподробно

4) скроллспай и увеличение - разные независимые функции, скролспай - это js (имейте ввиду, что везде, где встречается data-uk-* - это js), увеличение - это стили, в частности transform: scale(1.2) - это оно и есть, его плавность регулируется transition: all 0.1s, гуглите связку transform+transition - чудеса будут вам подвластны
Записан
vlusting
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 20


« Ответ #2 : 07.10.2015, 00:45:42 »

1) юикит - это семантический фреймворк, аналог bootstrap и прочих http://getuikit.com

2) ваш шаблон использует less, учите его, компилятор встроен в шаблон, который также имеет встроенный кастомизатор стилей (правда, анимация в нем не задается), не ищите в CSS, ибо в вашем случае CSS - это скомпилированный less и он не содержит всего, что возможно к использованию

3) ковыряйте less в папке less шаблона, а также в папке warp/vendor/uikit/less - там все исходники, в т.ч. варианты анимации; в доке все стили, подвластные управлению с помощью data-uk-*, описаны преподробно

4) скроллспай и увеличение - разные независимые функции, скролспай - это js (имейте ввиду, что везде, где встречается data-uk-* - это js), увеличение - это стили, в частности transform: scale(1.2) - это оно и есть, его плавность регулируется transition: all 0.1s, гуглите связку transform+transition - чудеса будут вам подвластны

Спасибо за ответ!!
Начну ковырять less'ы...

Как плюсануть тебя, добряк ?)
а то, не могу кнопку найти(
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #3 : 07.10.2015, 01:02:48 »

Спасибо за ответ!!
Как плюсануть тебя, добряк ?)
а то, не могу кнопку найти(

Кнопка появиться после 10 сообщений на форуме. Плюсанул от вас.
Записан
vlusting
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 20


« Ответ #4 : 08.10.2015, 05:28:27 »

В общем ничего у меня не получилось, сколько не ковырял толком ничего не нашел...
единственное нашел less файл компонента animation
Код:
// Name:            Animation
// Description:     Provides a useful set of keyframe animations
//
// Component:       `uk-animation-*`
//
// Modifiers:       `uk-animation-fade`
//                  `uk-animation-scale-up`
//                  `uk-animation-scale-down`
//                  `uk-animation-slide-top`
//                  `uk-animation-slide-bottom`
//                  `uk-animation-slide-left`
//                  `uk-animation-slide-right`
//                  `uk-animation-scale`
//                  `uk-animation-shake`
//                  `uk-animation-reverse`
//                  `uk-animation-15`
//                  `uk-animation-top-left`
//                  `uk-animation-top-center`
//                  `uk-animation-top-right`
//                  `uk-animation-middle-left`
//                  `uk-animation-middle-right`
//                  `uk-animation-bottom-left`
//                  `uk-animation-bottom-center`
//                  `uk-animation-bottom-right`
//
// Sub-objects:     `uk-animation-hover`
//
// Uses:            Scrollspy
//
// Used by:         Dropdown
//                  Icon
//                  Search
//                  Datepicker
//                  Slideshow
//
// ========================================================================


/* ========================================================================
   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;
}


/* Keyframes: Fade
 * Used by dropdown, datepicker and slideshow component
 ========================================================================== */

@-webkit-keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* Keyframes: Fade with slide
 ========================================================================== */

/*
 * Top
 */

@-webkit-keyframes uk-fade-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom
 */

@-webkit-keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Left
 */

@-webkit-keyframes uk-fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Right
 */

@-webkit-keyframes uk-fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Keyframes: Fade with scale
 ========================================================================== */

/*
 * Scale by 0.2
 */

@-webkit-keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.5
 * Used by slideshow component
 */

@-webkit-keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.8
 */

@-webkit-keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Keyframes: Slide
 * Used by slideshow component
 ========================================================================== */

/*
 * Left
 */

@-webkit-keyframes uk-slide-left {
    0% { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/*
 * Right
 */

@-webkit-keyframes uk-slide-right {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/*
 * Left third
 */

@-webkit-keyframes uk-slide-left-33 {
    0% { -webkit-transform: translateX(33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left-33 {
    0% { transform: translateX(33%); }
    100% { transform: translateX(0); }
}

/*
 * Right third
 */

@-webkit-keyframes uk-slide-right-33 {
    0% { -webkit-transform: translateX(-33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right-33 {
    0% { transform: translateX(-33%); }
    100% { transform: translateX(0); }
}


/* Keyframes: Scale
 ========================================================================== */

@-webkit-keyframes uk-scale-12 {
    0% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1); }
}

@keyframes uk-scale-12 {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* Keyframes: Rotate
 * Used by icon component
 ========================================================================== */

@-webkit-keyframes uk-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}

@keyframes uk-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}


/* Keyframes: Shake
 ========================================================================== */

@-webkit-keyframes uk-shake {
    0%, 100% { -webkit-transform: translateX(0); }
    10% { -webkit-transform: translateX(-9px); }
    20% { -webkit-transform: translateX(8px); }
    30% { -webkit-transform: translateX(-7px); }
    40% { -webkit-transform: translateX(6px); }
    50% { -webkit-transform: translateX(-5px); }
    60% { -webkit-transform: translateX(4px); }
    70% { -webkit-transform: translateX(-3px); }
    80% { -webkit-transform: translateX(2px); }
    90% { -webkit-transform: translateX(-1px); }
}

@keyframes uk-shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-9px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}


/* Keyframes: Fade with slide fixed
 * Used by dropdown and search component
 ========================================================================== */

/*
 * Top fixed
 */

@-webkit-keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom fixed
 */

@-webkit-keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


// Hooks
// ========================================================================

.hook-animation-misc;

.hook-animation-misc() {}

Там прописано то, что мне нужно
Код:
.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

Как присвоить сие чудо моим иконкам - понятия не имею...

и опять же, огорчающая надпись
Цитировать
/* Hide animated element if scrollspy is used */
Как сделать, чтобы совместно работали и animation и scrollspy ...


А так же нашел на оф.сайте гениальное описание по подключению компонентов
Цитировать
Использование

После загрузить UIkit, вы можете найти все дополнительные компоненты в отдельной /css и /js папки:

Код:
/css
    /components
        <!-- Component with the basic style -->
        autocomplete.css
        autocomplete.min.css

        <!-- Component with the Gradient style -->
        autocomplete.gradient.css
        autocomplete.gradient.min.css

        <!-- Component with the Almost flat style -->
        autocomplete.almost-flat.css
        autocomplete.almost-flat.min.css
        ...

/js
    /components
        <!-- JavaScript of the component and minified version -->
        autocomplete.js
        autocomplete.min.js
        ...
Чтобы использовать один из этих компонентов, все, что вам нужно сделать, это добавить CSS и компонента JavaScript в шапке документа.
Пример

Код:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
        <!-- Autocomplete CSS -->
        <link rel="stylesheet" href="components/autocomplete.css">
        <!-- Autocomplete Javascript -->
        <script src="components/autocomplete.js"></script>
    </head>
    <body>
    </body>
</html>

В шапку какого файла - я хз...

Мужики, помогите, пожалуйста...я уже с ума схожу и жестко туплю



Кнопка появиться после 10 сообщений на форуме. Плюсанул от вас.
Спасибо ) не забуду тебя, когда 10 сообщений будет )

Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #5 : 09.10.2015, 01:27:11 »

Там прописано то, что мне нужно
Код:
.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

Как присвоить сие чудо моим иконкам - понятия не имею...
.uk-animation-shake присвоить каждой иконке


Подключение файлов компонентов юикита производится в layouts/theme.config.php, ближе к концу файла будет блок Add assets, это документировано в доке по варпу на сайте ютимс

PS: по поводу обращения в личку, отвечаю: сейчас нет такой возможности, оч. сильно занят, сори
Записан
vlusting
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 20


« Ответ #6 : 09.10.2015, 05:54:48 »

kamaz6141
AlekVolsk

Огромнейшая благодарность за помощь, всех благ Вам!
Тему можно закрыть, kamaz6141 более чем досконально проконсультировал !
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet