6

Есть такой макет.

введите сюда описание изображения

Овал вокруг надписи "Мужская коллекция" это как будто орбита планеты.
Сам сайт называется - Planeta.

Нужно придумать какую то анимацию с этим овалом. Любую, но хорошую. Сам пока не знаю как это сделать. Можете подсказать что то?


PS Это интернет магазин одежды. Mожно реализовать как наручные часы так, чтобы не было видно стрелок и вокруг этой орбиты вращалась планета. Скорее не SVG анимация, достаточно CSS анимации.

0

5 ответов 5

9

Анимация рисования овала

Используется изменение параметров stroke-dasharray

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:0,1859;
 stroke-dashoffset:-925;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval" attributeName="stroke-dasharray" dur="4s" begin="0s" values="0 1859;1859 0" fill="freeze" />
    </path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>

Туда - обратно

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:0,1859;
 stroke-dashoffset:-925;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
      attributeName="stroke-dasharray"
      dur="8s"
      begin="0s"
      values="
      0 1859;
      1859 0;
      1859 0;
      0 1859"
      repeatCount="indefinite"
      fill="freeze" />
    </path>
<text x="225" y="350" font-size="36px" font-family="sans-serif" font-weight="500" fill="#151515" >МУЖСКАЯ КОЛЛЕКЦИЯ </text>	
</svg>
</div>

Анимация из одной точки

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:0,1859;
 stroke-dashoffset:-925;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100vw" height="100vh" viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate
	  id="an_oval"
	  attributeName="stroke-dasharray"
	  dur="5s"
	  begin="0s"
	  values="
	  0, 929.5 0, 929.5;0 0 1859,0;0, 929.5 0, 929.5"
	  fill="freeze"
	  repeatCount="indefinite" /> 
  
  </path>  
    <text x="225" y="350"  >МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>

1
  • А я как всегда без svg)
    – Qwertiy
    25 дек 2019 в 20:49
8

А может просто пусть что-нибудь летает типа планеты?

section {
  height: 20em;
  width: 20em;
  border: 1px solid silver;
  border-radius: 50%;
  transform: skew(-10deg, -15deg);
  margin: 2em auto;
}

div {
  height: 100%;
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  transform: skew(10deg, 15deg);
}

div::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

i {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  animation: spin 5s linear infinite;
}

i::before {
  content: "";
  position: absolute;
  left: 14.645%;
  top: 14.645%;
  margin: -1em 0 0 -1em;
  width: 2em;
  height: 2em;
  background: antiquewhite;
  box-shadow: 0 0 10px 1px orange;
  border-radius: 50%;
  text-align: center;
  animation: fix-circle 5s linear backwards infinite; 
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}

@keyframes fix-circle {
  from { transform: rotate(1turn) skew(10deg, 15deg) }
  to   { transform: rotate(0)     skew(10deg, 15deg) }
}
<section>
  <i></i>
  <div>Мужская коллекция</div>
</section>

2
  • @Qwerty Здорово. Тут много чего можно придумать. У меня была мысль шарик запустить, помнишь, как-то делал анимацию планет Решил, может автор что-то более конкретное скажет. А то ни кода и даже минимального нарпавления нет. 25 дек 2019 в 20:58
  • @Alexandr_TT, там уже мой плюсик стоит. Но там орбиты круглые, а тут немного побольше шаманства :)
    – Qwertiy
    25 дек 2019 в 21:05
8

Вот такие вот часики с претензией на дискретность хода:

requestAnimationFrame(clock);

function clock(t, t2) {
  requestAnimationFrame(clock);
  relocate(sec, calc(6e4, 1e3, 0.8));
  relocate(min, calc(36e5, 6e4, 0.99));
}

function calc(k1, k2, k3){
  let t = Date.now() % k1;
  let x = t%k2 / k2;
  x = Math.max(0, x - k3);
  x /= 1 - k3;
  t = Math.floor(t/k2) + 3*x*x-2*x*x*x;
  return t*Math.PI/30;
}

function relocate(el, rad) {
  el.setAttribute('cx', Math.cos(rad)*50);
  el.setAttribute('cy', Math.sin(rad)*30);
}
<svg viewbox=-60,-60,120,120 height=90vh width=90vw>
  <g transform=rotate(-55) stroke=black stroke-width=0.5 >
    <ellipse rx=50 ry=30 fill=none />
    <circle id=min r=3 fill=white />
    <circle id=sec r=2 fill=black />
  </g>
</svg>

4
  • @Alexandr_TT привязка к реальным секундам и так тут есть 25 дек 2019 в 21:38
  • Опять скрипт)))
    – Qwertiy
    25 дек 2019 в 21:52
  • @Alexandr_TT, зачем магазину одежды часы?)
    – Qwertiy
    25 дек 2019 в 21:52
  • @Alexandr_TT планета это назвпние сайта, по заявлению топикстартера 26 дек 2019 в 6:44
7

Только как вариант возможной анимации для примера (без svg):

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.box {
  position: relative;
  display: block;
  margin: 30px auto;
  padding: 0;
  color: #000;
  overflow: visible;
  transition: color 0.7s;
  cursor: pointer;
  height: 300px;
}

.box:after, 
.box:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  border: 4px solid rgba(0,0,0,.5);
  margin: -150px 0 0 -150px;

  width: 300px;
  height: 300px;
}


.box:before {
    animation-name: sAnim2, sAnim1;
    animation-duration: 5s, 2s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: ease, linear;
    animation-fill-mode: forwards;
}

.box:after {
    animation-name: sAnim2, sAnim0;
    animation-duration: 5s, 2s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: ease, linear;
    animation-fill-mode: forwards;
}



@keyframes sAnim0 {
  0% {
    transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
  }
}


@keyframes sAnim1 {
  0% {
    transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
  }
  100% {
    transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
  }
}


@keyframes sAnim2 {
  0%, 100% {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
}



h2 {
  position: absolute;
  z-index: 10;
  top:50%;
  left:50%;
  text-align: center;
  transform:translate(-50%, -50%);
  font-family: sans-serif;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.25rem; 
}

h2:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left:50%;
  width: 80%;
  height: 1px;
  background: #000;
  margin-left: -40%;
  transition: height .5s ease-in-out;
}

h2 a {
  color: inherit;
  text-decoration: none;
}

h2:hover:after {
  height: 0;
}
<div class="box">
  <h2><a href="#">Мужская коллекция</a></h2>
</div>

1
5

Анимация вращения сегментов окружности

Полная длина окружности равна 1859px Используется stroke-dasharray для деления окружности на сегменты
stroke-dashoffset - для анимации вращения сегментов

Два сегмента

stroke-dasharray:910.5,19;
stroke-dashoffset:1859;

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:910.5,19;
 stroke-dashoffset:1859;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
	  attributeName="stroke-dashoffset"
	  dur="5s"
	  begin="0s"
	  values="1859;0"
	  fill="freeze"
	  repeatCount="indefinite" />
    </path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>

Три сегмента

stroke-dasharray:600.7,19;

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:600.7,19;
 stroke-dashoffset:1859;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
	  attributeName="stroke-dashoffset"
	  dur="5s"
	  begin="0s"
	  values="1859;0"
	  fill="freeze"
	  repeatCount="indefinite" />
    </path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>

Четыре сегмента

stroke-dasharray:445.75,19;

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 stroke-dasharray:445.75,19;
 stroke-dashoffset:1859;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:36px;
 font-family:sans-serif;
 font-weight:400;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="4" dy="4" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
	  attributeName="stroke-dashoffset"
	  dur="5s"
	  begin="0s"
	  values="1859;0"
	  fill="freeze"
	  repeatCount="indefinite" />
    </path>
<text x="225" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
</svg>
</div>

Update 26.12.2019

Анимация вращения шарика с по орбите с одновременным вращением его вокруг своей оси

Чёрно-белый вариант

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke:silver;
 stroke-width:4px;
 filter:url(#dropshadow);
 
 }
 text {
 font-size:40px;
 font-family:sans-serif;
 font-weight:500;
 fill:silver;
 text-decoration: underline;
 filter:url(#dropshadow);
 fill:url(#gradCirc);
 }
 
.circ{
   fill:url(#gradCirc);
   }
   
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="3" dy="3" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter> 
<linearGradient id="gradCirc">
			<stop offset="5%" stop-color="white"></stop>
			<stop offset="40%" stop-color="silver"></stop>
			<stop offset="100%" stop-color="#151515" ></stop>
		</linearGradient>
  </defs>  
  
  
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
	  attributeName="stroke-dashoffset"
	  dur="5s"
	  begin="0s"
	  values="1859;0"
	  fill="freeze"
	  repeatCount="indefinite" />
    </path>
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
   
 <circle class="circ"  cx="0" cy="0" r="25"  > 
  
    <animateMotion
	  dur="10s"
	  repeatCount="indefinite"
	  additive="sum"
	  rotate="auto-reverse">
          <mpath xlink:href="#oval"/>
    </animateMotion> 
<circle/>	
</svg>
</div>

ЦВЕТНОЙ ВАРИАНТ ЛОГОТИПА

Изменить цветовую гамму по своему вкусу довольно легко, - нужно поменять цвета у двух градиентов:

fill:url(#gradText); - градиент для текста и дуги

fill:url(#gradCirc); - градиент для шарика

В примере ниже сплошная линия заменена на пунктирную - stroke-dasharray:25 8;

Анимация вращения пунктирной линии в разные стороны достигается изменением
stroke-dashoffset от максимального значения до нуля и обратно до максимального значения - values="1859;0;0;1859"

Повторяющиеся значения обеспечивают паузу вращения в крайних точках

.container {
 width:50vw;
 height:50vh;
 }
 #oval {
 fill:none;
 stroke-width:4px;
 stroke-dasharray:25 8;
 stroke:url(#gradText);
 }
 text {
 font-size:40px;
 font-family:sans-serif;
 font-weight:500;
 stroke:silver;
 text-decoration: underline;
  fill:url(#gradText);
 }
 
.circ{
   fill:url(#gradCirc);
   
    }
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 813 733" preserveAspectRatio="xMinYMin meet">
<defs>
    <filter id="dropshadow" height="150%" width="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
      <feOffset dx="3" dy="3" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter> 
<linearGradient id="gradText">
			<stop offset="5%" stop-color="dodgerblue"></stop>
			<stop offset="100%" stop-color="#B34EE9" ></stop>
</linearGradient> 
  <linearGradient id="gradCirc">
			<stop offset="30%" stop-color="dodgerblue"></stop>
			<stop offset="50%" stop-color="white" ></stop>
			<stop offset="80%" stop-color="#B34EE9" ></stop>
		</linearGradient>		
  </defs>  
  
  
  <rect width="100%" height="100%" fill="#F4F4F4" />
  <path id="oval"  d="m661.6 98.6c39.6 16.9 73.9 49.5 81.5 100.2 11.8 78-34.7 158.6-81.5 222.1-59.1 80.1-145 139.2-237.6 180.9-66.9 30.2-138.9 42.9-218.4 28.8-43.9-7.8-89.1-46.4-101.5-90.9C78.2 446.6 146.8 330.5 205 268.7 263.1 206.9 343.6 150.3 424 117.2 497.4 87 588.5 67.3 661.6 98.6Z">
    <animate id="an_oval"
	  attributeName="stroke-dashoffset"
	  dur="16s"
	  begin="0s"
	  values="1859;0;0;1859"
	  fill="freeze"
	  repeatCount="indefinite" />
    </path>
<text x="205" y="350">МУЖСКАЯ КОЛЛЕКЦИЯ </text>
   
 <circle class="circ"  cx="0" cy="0" r="28"  > 
  
    <animateMotion
	  dur="8s"
	  repeatCount="indefinite"
	  additive="sum"
	  rotate="auto-reverse">
          <mpath xlink:href="#oval"/>
    </animateMotion> 
<circle/>	
</svg>
</div>

Более подробно, как это делается здесь

2
  • 2
    Как у вас тут весело! Я даже скучаю)
    – kizoso
    26 дек 2019 в 14:52
  • 2
    @kizoso Приходи в Новогодний конкурс, там будет наверняка весело и поучаствуй конечно 26 дек 2019 в 14:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.