Как такое реализовать?

103

24 марта 2021, 09:30

Подскажите, пожалуйста, как реализовать такой динамический скролл:

Чтобы иконка стрелки ездила сверху вниз?

Answer 1

В общем я воспользовался бесплатным векторным редактором inkscape в котором нарисовал все эти элементы

1) Это обычный прямоугольник, с закруглением и stroke-dasharray="60, 60"

2) Это сама стрелка

3) Аннимировал на обычном css в поле defs style

если что то не ясно спрашивайте

Вот таким образом это можно применить: https://codepen.io/topicstarter/pen/EBdaxp

<div style="width:135px;"> 
  <svg viewBox="0 0 30 60" xmlns="http://www.w3.org/2000/svg"> 
  <defs> 
    <style> 
      .arrow{ 
        animation:bullet 1s infinite alternate; 
      } 
       
      @keyframes bullet{ 
        0%{ 
          transform: translate(0, 3px); 
        } 
        100%{ 
         transform: translate(0, 0px); 
        } 
      } 
    </style> 
  </defs> 
 <g transform="translate(0,-237)"> 
  <g transform="translate(0,1.5875)"> 
   <rect transform="scale(1,-1)" x="7.442934" y="-278.72717" width="15.523874" height="39.498867" rx="5.754787" ry="10" fill="none" stroke="#000" stroke-dasharray="80, 80" stroke-dashoffset="-3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> 
     
   <ellipse cx="15.189513" cy="246.14925" rx="1.0690781" ry=".93544334" stroke-width="0" /> 
 
   <path class="arrow" d="m22.798536 279.97082-7.564173 10.74066-7.5602862-10.10551m7.2767022-17.14844 0.283584 27.25395" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> 
  </g> 
 </g> 
</svg> 
</div>

Что бы увеличить или уменьшить иконку то достаточно для item изменить width

Answer 2

Вот, пожалуйста, все что нужно знать, чтобы сделать подобное это команды svg атрибута d элемента path, тут использованы команды:

M (MOVE) перемещение на абсолютное значение

m (move) перемещение на относительное значение

v (vertical) вертикальная линия в относительных координатах

l (line) линия в относительных координатах

a (arc) дуга в относительных координатах

<svg viewbox="-6 -6 12 30" height="90vh"> 
    <style> 
      @keyframes arr { 
        0%   {transform: translate(0, 3px)} 
        100% {transform: translate(0, 0px)} 
      } 
    </style> 
  <g fill="none" stroke="black" stroke-linecap="round"> 
    <circle r="0.3"></circle> 
    <path d="M0,5m0,10,a5,5,0,0,1,-5,-5v-10a5,5,0,0,1,10,0v10a5,5,0,0,1,-5,5z"  
          stroke-dashoffset="-5" stroke-dasharray="50 50"></path> 
    <path d="M0,10v10m-2,-2l2,2l2,-2" style="animation: arr 1s infinite alternate"></path> 
   </g> 
</svg>

Answer 3

Не очень понял что вы хотите но чтобы зафиксировать объект используйте position:fixed

.top-fixed { 
	position: fixed; 
	top: 150px; 
	right: 0; 
	background-color: #eee; 
	padding: 3px 10px; 
}

<div class="top-fixed">Fixed element (Top)</div> 
<p style="margin-bottom: 500px;">Filler text</p> 
<p style="margin-bottom: 12000px;">Filler text</p>