• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Загрузчик магазина женской моды для сайта (Красивая анимированная перезагрузка CSS для модной одежды)
Загрузчик магазина женской моды для сайта
Kosten
 		Понедельник, 29 Июня 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Оригинальный загрузчик страниц по женской моде, что будет отличным решение связано с интернет магазином, где продают модный продукты для женщин.

Так выглядит при загрузки страниц, где будет меняться одежда в центре круга, который поворачивается.



HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>

HTML


CSS

Код
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #1e1f26;
}
h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  font-weight: 600;
  margin: 30px 0 150px 0;
  color: #e0245e;
  text-shadow: 2px 2px 4px rgba(0,0,0,1);
  text-align: center;
}
svg {
  visibility: hidden;
  width: 150px;
  height: 150px;
}

.dress, .mexi, .skirt {
  visibility: hidden;
}
JS

TweenMax.set('svg', {visibility: 'visible'});

const selectAll = function(s) {
  return document.querySelectorAll(s);
}

TweenMax.staggerFromTo('.outer-circle', 3, {drawSVG: '0%', stroke: '#fff'}, {drawSVG: '100%', stroke:"#e0245e", repeat: -1}, 0.1);

TweenMax.set(selectAll('svg path'), {transformOrigin: '50% 50%'})

var tl = new TimelineMax({repeat: -1, yoyo: true, repeatDelay: 1});
    tl.to('.frok', 1.5, {
      morphSVG: {
        shape: '.dress',
        type: 'rotational'
      },
      fill: '#fabc74',
      ease: Power1.easeInOut
    })
   .to('.frok', 1.5, {
       morphSVG: {
         shape: '.mexi',
         type: 'rotational'
       },
     fill: '#f090d9',
      ease: Power1.easeInOut
    })
    .to('.frok', 1.5, {
      morphSVG: {
        shape: '.skirt',
        type: 'rotational'
      },
      fill: '#248ea9',
      ease: Power1.easeInOut
    })

Модный загрузчик для страницы для сайта

Демонстрация
Прикрепления: 0723648.png (7.1 Kb) · women-loader.zip (7.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Загрузчик магазина женской моды для сайта (Красивая анимированная перезагрузка CSS для модной одежды)
  • Страница 1 из 1
  • 1
Поиск: