3

https://happyegg.com/ - есть вот такой сайт. В банере анимация( первая секция)

Совсем не понимаю как можно слизать ее с этого сайта, может кто-то пример может предоставить или подскажет куда копать , сижу сутки и ничего не получается

так же ниже есть секция при наведение на картинку они используют санвас, но аналогично как и выше, ничего не выходит

Спасибо заранее!

17
  • Какая составляющая вас интересует? Там довольно комплексная анимация, нужен принцип, по которому выбирается где пройдет линия, тут она зависит от положения курсора+ какое-то разбиение пространства есть, т.к. поведение в разных частях сайта разное 18 мая 2020 в 10:31
  • Меня интересует вот эта анимация - prnt.sc/siwvs4 То есть плавные движение блока при движение мыши (хотелось бы понять как это вообще обзывается, называется) что бы знать куда копать и т.д. и еще вот эта анимация prnt.sc/siwxa8
    – rbye rbye
    18 мая 2020 в 10:43
  • нарисовать на svg или canvas картинку 18 мая 2020 в 10:55
  • ага, благодарю! Но это например самостоятельно движение идет , первая часть можно сказать) А вот , когда движение курсора идет , куда копать, что бы движение этой свг было?
    – rbye rbye
    18 мая 2020 в 11:02

1 ответ 1

7

В оригинале конечно же какая-то более сложная закономерность, но это роли не играет все будет как-то так же, считаем на сколько нужно сдвинуть каждую точку в каждом кадре, в зависимости от того, где сейчас курсор:

let count = 300;
let mouse = [innerWidth/2, innerHeight/2];
let pts = [...Array(count)].map((_, i) => [innerWidth/2, i/(count-1)*innerHeight]);
let svg = document.querySelector('svg')
let path = document.querySelector('svg path')
addEventListener('resize', resize);
addEventListener('mousemove', move);
resize();
requestAnimationFrame(upd);

function upd() {
  let d = ['M', 0, 0];
  pts.forEach(p => {
    let dx = mouse[0] - p[0];
    let dy = mouse[1] - p[1];
    p[0] += dx/30*(Math.cos(dy/innerHeight*6)*0.4+0.6);
    d.push('L', ...p);
  });
  d.push('L', 0, innerHeight, 'Z');
  path.setAttribute('d', d.join(' '))
  requestAnimationFrame(upd);
}

function move(e) {
  mouse[0] = e.x;
  mouse[1] = e.y;
}

function resize(){
  svg.setAttribute('width', innerWidth)
  svg.setAttribute('height', innerHeight)
}
body {
  margin: 0;
  overflow: hidden;
}
<svg>
  <path></path>
</svg>

3
  • боже мой, благодарю вас!!!
    – rbye rbye
    18 мая 2020 в 20:19
  • Не знаю, сильно нагло наверное будет. Но я уже от безысходности. Может Вы знаете как и вот эту анимацию сделать ? prnt.sc/sj806j при наведение на картинку ее как волнами штырит happyegg.com или опять же, если прошуршать Ваш код можно как-то надумать и эту анимацию?
    – rbye rbye
    18 мая 2020 в 20:23
  • ну в целом это очень похожий алгоритм, точки двигаем в зависимости от положения курсора... могу завтра попробовать сделать... 18 мая 2020 в 20:25

Ваш ответ

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

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