Разработка Анимация блоков при прокручивании страницы

baltun · 3 Март 2020

baltun разместил(а) новый ресурс:

Анимация блоков при прокручивании страницы - Анимация блоков при прокручивании страницы.

Пишем нашу разметку:

HTML:

<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item"...

Посмотреть страницу этого ресурса...

sparco1988 · 19 Октябрь 2022

Всем привет кто знает как реализовать это на форуме XF 2.2.11

baltun · 19 Октябрь 2022

sparco1988 сказал(а):
Всем привет кто знает как реализовать это на форуме XF 2.2.11

У нас на главной организовано что то подобное, если не это, просто давно делал.

sparco1988 · 19 Октябрь 2022

Ну вот я что то подобное и хочу

hacker · 19 Октябрь 2022

@sparco1988, тут на данном форуме есть такая фича. По интересоваться у автора.

sparco1988 · 19 Октябрь 2022

@hacker, так я у него и интересуюсь Дим

hacker · 19 Октябрь 2022

@baltun, в extra.less посмотрите или модификации шаблона extra.less
Там, что то типо этого:

Код:

.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread, .block-container .message-inner {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-body .node--forum:hover, .structItemContainer .structItem--thread:hover, .structItemContainer-group .structItem--thread:hover, .block-container .message-inner:hover {
-moz-transform: scale(1.015);
-webkit-transform: scale(1.015);
-o-transform: scale(1.015);
-ms-transform: scale(1.015);
transform: scale(1.015);
}

baltun · 19 Октябрь 2022

Там все просто, если не ошибаюсь скачиваете скрипт, css в extra.less, js на добавляете как модификация в нужный шаблон и еще требуется класс добавить для блока который хотите анимировать и все.

sparco1988 · 19 Октябрь 2022

@baltun, Можно пожалуйста как можно подробнее я просто в этом не особо шарю только учусь

hacker · 27 Октябрь 2022

Less:

.block.block--category.block--category150:hover {
    animation:shakeGavel 1.20s;
}
@keyframes shakeGavel{0{
-webkit-transform:translate(0, 0) rotate(0);
-ms-transform:translate(0, 0) rotate(0);
-webkit-transform: translate(0, 0) rotate(0);
 -ms-transform: translate(0, 0) rotate(0);
 -webkit-transform: translate(0, 0) rotate(0);
  -ms-transform: translate(0, 0) rotate(0);
  transform:translate(0, 0) rotate(0)}20%{
  -webkit-transform:translate(-3px, 0) rotate(-25deg);
  -ms-transform:translate(-3px, 0) rotate(-25deg);
  -webkit-transform: translate(-3px, 0) rotate(-25deg);
   -ms-transform: translate(-3px, 0) rotate(-25deg);
   -webkit-transform: translate(-3px, 0) rotate(-25deg);
    -ms-transform: translate(-3px, 0) rotate(-25deg);
    transform:translate(-3px, 0) rotate(-25deg)}30%{
    -webkit-transform:translate(3px, 0) rotate(25deg);
    -ms-transform:translate(3px, 0) rotate(25deg);
    -webkit-transform: translate(3px, 0) rotate(25deg);
     -ms-transform: translate(3px, 0) rotate(25deg);
     -webkit-transform: translate(3px, 0) rotate(25deg);
      -ms-transform: translate(3px, 0) rotate(25deg);
      transform:translate(3px, 0) rotate(25deg)}50%{
      -webkit-transform:translate(-3px, 0) rotate(-15deg);
      -ms-transform:translate(-3px, 0) rotate(-15deg);
      -webkit-transform: translate(-3px, 0) rotate(-15deg);
       -ms-transform: translate(-3px, 0) rotate(-15deg);
       -webkit-transform: translate(-3px, 0) rotate(-15deg);
        -ms-transform: translate(-3px, 0) rotate(-15deg);
        transform:translate(-3px, 0) rotate(-15deg)}60%{
        -webkit-transform:translate(3px, 0) rotate(15deg);
        -ms-transform:translate(3px, 0) rotate(15deg);
        -webkit-transform: translate(3px, 0) rotate(15deg);
         -ms-transform: translate(3px, 0) rotate(15deg);
         -webkit-transform: translate(3px, 0) rotate(15deg);
          -ms-transform: translate(3px, 0) rotate(15deg);
          transform:translate(3px, 0) rotate(15deg)}100%{
          -webkit-transform:translate(0, 0) rotate(0);
          -ms-transform:translate(0, 0) rotate(0);
          -webkit-transform: translate(0, 0) rotate(0);
           -ms-transform: translate(0, 0) rotate(0);
           -webkit-transform: translate(0, 0) rotate(0);
            -ms-transform: translate(0, 0) rotate(0);
            transform:translate(0, 0) rotate(0)}
}

sparco1988 · 27 Октябрь 2022

@hacker, Не сработало!

baltun · 27 Октябрь 2022

sparco1988 сказал(а):
@hacker, Не сработало!

Возможно в вашей теме нет одного из классов .block.block--category.block--category150 или есть но другие и учитывайте тема поворачивается при наведении на нее.

sparco1988 · 27 Октябрь 2022

@baltun, я и на дефолтном стили пробовал :blush:

baltun · 27 Октябрь 2022

Возможно вы в этом классе .block--category150 не поменяли на свою id категории, если у вас тестовый форум тогда класс должен быть .block--category1 полная версия будет такая:

CSS:

.block.block--category.block--category1:hover {
    animation:shakeGavel 1.20s;
}
@keyframes shakeGavel{0{
-webkit-transform:translate(0, 0) rotate(0);
-ms-transform:translate(0, 0) rotate(0);
-webkit-transform: translate(0, 0) rotate(0);
 -ms-transform: translate(0, 0) rotate(0);
 -webkit-transform: translate(0, 0) rotate(0);
  -ms-transform: translate(0, 0) rotate(0);
  transform:translate(0, 0) rotate(0)}20%{
  -webkit-transform:translate(-3px, 0) rotate(-25deg);
  -ms-transform:translate(-3px, 0) rotate(-25deg);
  -webkit-transform: translate(-3px, 0) rotate(-25deg);
   -ms-transform: translate(-3px, 0) rotate(-25deg);
   -webkit-transform: translate(-3px, 0) rotate(-25deg);
    -ms-transform: translate(-3px, 0) rotate(-25deg);
    transform:translate(-3px, 0) rotate(-25deg)}30%{
    -webkit-transform:translate(3px, 0) rotate(25deg);
    -ms-transform:translate(3px, 0) rotate(25deg);
    -webkit-transform: translate(3px, 0) rotate(25deg);
     -ms-transform: translate(3px, 0) rotate(25deg);
     -webkit-transform: translate(3px, 0) rotate(25deg);
      -ms-transform: translate(3px, 0) rotate(25deg);
      transform:translate(3px, 0) rotate(25deg)}50%{
      -webkit-transform:translate(-3px, 0) rotate(-15deg);
      -ms-transform:translate(-3px, 0) rotate(-15deg);
      -webkit-transform: translate(-3px, 0) rotate(-15deg);
       -ms-transform: translate(-3px, 0) rotate(-15deg);
       -webkit-transform: translate(-3px, 0) rotate(-15deg);
        -ms-transform: translate(-3px, 0) rotate(-15deg);
        transform:translate(-3px, 0) rotate(-15deg)}60%{
        -webkit-transform:translate(3px, 0) rotate(15deg);
        -ms-transform:translate(3px, 0) rotate(15deg);
        -webkit-transform: translate(3px, 0) rotate(15deg);
         -ms-transform: translate(3px, 0) rotate(15deg);
         -webkit-transform: translate(3px, 0) rotate(15deg);
          -ms-transform: translate(3px, 0) rotate(15deg);
          transform:translate(3px, 0) rotate(15deg)}100%{
          -webkit-transform:translate(0, 0) rotate(0);
          -ms-transform:translate(0, 0) rotate(0);
          -webkit-transform: translate(0, 0) rotate(0);
           -ms-transform: translate(0, 0) rotate(0);
           -webkit-transform: translate(0, 0) rotate(0);
            -ms-transform: translate(0, 0) rotate(0);
            transform:translate(0, 0) rotate(0)}
}

Проверил все отрабатывает.

sparco1988 · 27 Октябрь 2022

Точно спасибо что то я и не подумал об этом

Разработка Анимация блоков при прокручивании страницы

Вложения