Hover эффект на js, но очень сильно лагает

@Makssshow · Регистрация: 08.11.2020

Студворк — интернет-сервис помощи студентам

Привет! Надо сделать вот такой hover эффект, но когда я настраиваю его для эффекта при наведении, он начинает почти намертво залагивать, в чем ошибка?

Вот оригинал:
https://codepen.io/Nvagelis/pen/ALgzZx

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$(document).ready(function() {
  var $win = $(window);
  var $image = $('.image');
  var $move = $('.move');
  var $zoom = $('.zoom');
 
  var duration = 2000;
 
  var parallax = [];
  var viewZ = [];
 
  for (var i = 0; i < $move.length; i++) {
    parallax[i] = random(10, 40);
    viewZ[i] = random(10, 30);
  }
  parallax.sort();
  viewZ.sort();
 
  function random(min, max) {
    var randomz = Math.floor(Math.random() * (max - min + 1) + min);
    return randomz;
  }
 
  $image.css({
    'background-image': 'url(https://drive.google.com/uc?export=view&id=0BzFF7FmbJUo5R1JDWEZsc3dJS3M)'
  });
 
  $('.button').on('click', function() {
    $(this).animate({
      opacity: 0
    }, 500, function() {
      $(this).css({
        display: 'none'
      });
    });
    $win.on('mousemove', function(e) {
      requestAnimationFrame(function() {
        $move.each(function(i) {
          var t = parallax[i];
          transX = t / ($win.width()) * e.clientX - t / 2,
            transY = t / ($win.height()) * e.clientY - t / 2;
          $(this).css({
            transform: 'translate3d(' + transX + 'px,' + transY + 'px,0)'
          });
        });
      });
    });
    $image.animate({
      opacity: '.1'
    }, duration);
    $zoom.each(function(i) {
      $(this).animate({
        viewZ: viewZ[i]
      }, {
        step: function(now) {
          $(this).css('transform', 'translateZ(' + now + 'px)');
        },
        duration: duration
      }, 'linear');
    });
 
    function mobile(e) {
      var y = e.gamma / 45;
      requestAnimationFrame(function() {
        $move.each(function(i) {
          var t = parallax[i];
          transX = (t / ($win.width()) - t / 2) * y,
            transY = (t / ($win.height()) - t / 2) * y;
          $(this).css({
            transform: 'translate3d(' + transX + 'px,' + transY + 'px,0)'
          });
        });
      });
    }
    window.addEventListener('deviceorientation', mobile);
  });
 
});

А это конструктор мой:
https://codepen.io/makssshow/pen/yLJROee

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="PortfNav">
    <div class="PortfCenter">
      <div class="PortfAll" id="portfolID">
        <div class="portfol">
          <div class='ImgPortf'><a href="##"><img src="https://makssshow.github.io/MartaVerba/img/progects/photo-01.png" alt="project"></a></div>
          <div class="textPortf">Website</div>
        </div>
        <div class="portfol">
          <div class='ImgPortf'><a href="##"><img src="https://makssshow.github.io/MartaVerba/img/progects/photo-02.png" alt="portfolio"></a></div>
          <div class="textPortf">Website</div>
        </div>
        <div class="portfol">
          <div class='ImgPortf'><a href="##"><img src="https://makssshow.github.io/MartaVerba/img/progects/photo-03.png" alt="portfolio"></a></div>
          <div class="textPortf">Website</div>
        </div>
        <div class="portfol">
          <div class='ImgPortf'><a href="##"><img src="https://makssshow.github.io/MartaVerba/img/progects/photo-01.png" alt="portfolio"></a></div>
          <div class="textPortf">Website</div>
        </div>
      </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/*HOVER*/
.slices {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-perspective: 400px;
  perspective: 400px;
  overflow: hidden;
}
.move {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
 
.zoom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translateZ(5px);
  transform: translateZ(5px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: .1;
}
 
 
 
 
/* standart */
.PortfCenter {
  text-align: center;
  margin: 0 auto;
  width: 1360px;
  margin-top: 152px;
  padding-bottom: 472px;
}
 
.PortfCenter .PortfAll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
 
.PortfCenter .PortfAll .portfol {
  margin-right: 80px;
  margin-top: 156px;
}
 
.PortfCenter .PortfAll .portfol .ImgPortf {
  position: relative;
}
 
.PortfCenter .PortfAll .portfol img {
  width: 400px;
  height: 700px;
}
 
.PortfCenter .PortfAll .portfol .textPortf {
  font-size: 10px;
  border-bottom: 1px solid #1a1c25;
  padding: 31px 0;
  text-align: right;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
$(document).ready(function () {
  var $win = $(".ImgPortf a img");
 
  var duration = 1000;
  var parallax = [];
  var viewZ = [];
  
  for (var i = 0; i < 6; i++) {
    parallax[i] = random(10, 40);
    viewZ[i] = random(10, 30);
  }
  parallax.sort();
  viewZ.sort();
  
  function random(min, max) {
    var randomz = Math.floor(Math.random() * (max - min + 1) + min);
    return randomz;
  }
 
  $($win).on('mouseleave', function () {
    $('.slices').remove();
  });
  $($win).on('mouseover', function () {
    $(this).before("<div class='slices'><div class='move'><div class='zoom'><div class='image'></div></div></div><div class='move'><div class='zoom'><div class='image'></div></div></div><div class='move'><div class='zoom'><div class='image'></div></div></div><div class='move'><div class='zoom'><div class='image'></div></div></div><div class='move'><div class='zoom'><div class='image'></div></div></div><div class='move'><div class='zoom'><div class='image'></div></div></div></div>");
    $('.image').css('background-image', 'url(' + $(this).attr("src") + ')');
    $(this).on('mousemove', function (e) {
      requestAnimationFrame(function () {
        $('.move').each(function (i) {
          var t = parallax[i];
          transX = t / ($win.width()) * e.clientX - t / 2,
          transY = t / ($win.height()) * e.clientY - t / 2;
          $('.move').css({
            transform: 'translate3d(' + transX + 'px,' + transY + 'px,0)'
          });
        });
      });
      
      $('.zoom').each(function (i) {
        $(this).animate({
          viewZ: viewZ[i]
        }, {
          step: function (now) {
            $(this).css('transform', 'translateZ(' + now + 'px)');
          },
          duration: duration
        }, 'linear');
      });
      
      function mobile(e) {
        var y = e.gamma / 45;
        requestAnimationFrame(function () {
          $('.move').each(function (i) {
            var t = parallax[i];
            transX = (t / ($win.width()) - t / 2) * y,
            transY = (t / ($win.height()) - t / 2) * y;
            $(this).css({
              transform: 'translate3d(' + transX + 'px,' + transY + 'px,0)'
            });
          });
        });
      }
      window.addEventListener('deviceorientation', mobile);
    });
  });
    
  });

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. На мобильном - сканируйте QR-код. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .