@tyrion1

Какой библиотекой можно такое реализовать?

Здравствуйте, каком плагинов или библиотекой, возможно, реализовать, данный эффект, который предоставление на сайте.
При приближении курсора, элементы отдаляются от него.

5cc2f52230c32298528834.jpeg
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
KickeRocK
@KickeRocK
FrontFinish
TweenMax
Код(отсюда)
function initSuperAnimation() {
    $('.top').mouseover(function () {
      $('.top').mousemove(function (e) {
        var a = $(this).width() - e.pageX - $(this).offset().left,
          t = e.pageY - $(this).offset().top,
          i = a / $(this).width(),
          o = t / $(this).height(),
          s = -20 * i,
          n = 15 - 30 * o;

        TweenMax.to($(".layer-1__red-peper"), .5, {marginLeft: s * 1.5, marginTop: n * 1.5, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__misk, .layer-3__main, .layer-2__main"), .5, {
          marginRight: s * 2.5,
          marginTop: -n * 1.5,
          ease: Quad.easeOut
        })
        TweenMax.to($(".layer-1__cucumber"), .5, {marginLeft: s * 5.5, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__tomato"), .5, {marginLeft: s * 2, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__green"), .5, {marginLeft: s * 1.5, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__water-2"), .5, {marginLeft: s * 5, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__water-1"), .5, {marginLeft: s * 2, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__water-3"), .5, {marginLeft: s * 6, marginTop: n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-1__yellow-pepper"), .5, {marginLeft: s * 3.5, marginTop: -n * 2.5, ease: Quad.easeOut})
        TweenMax.to($(".layer-2__fruit"), .5, {marginLeft: s * 2, marginTop: -n * 2, ease: Quad.easeOut})
        //TweenMax.to($('.layer-3__main'),.5,{marginRight:s*2.5,marginTop:-n*1.5,ease:Quad.easeOut})
        TweenMax.to($(".layer-3__mushrom"), .5, {marginLeft: s * 5.5, marginTop: n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-3__leaf-3"), .5, {marginRight: -s * 2, marginTop: -n * 3.5, ease: Quad.easeOut})
        TweenMax.to($(".layer-3__leaf-1"), .5, {marginRight: s * 3.5, marginTop: n * 4, ease: Quad.easeOut})
        TweenMax.to($(".layer-3__leafs"), .5, {marginLeft: s * 2, marginTop: -n * 2, ease: Quad.easeOut})
        TweenMax.to($(".layer-3__mushrom-2"), .5, {marginRight: s * 5.5, marginTop: n * 2, ease: Quad.easeOut})
      });
    }).mouseout(function () {
      $(this).unbind("mousemove");
    });
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы