Анимации замедляют производительность веб -страницы ⇐ Jquery

[Anonymous]

У меня есть один дизайн веб -сайта на одной странице в HTML, JavaScript и CSS. На веб-странице есть много изображений, и все они имеют различные разнообразные эффекты анимации в соответствии с их категориями. Я использовал wow.js для анимационных эффектов на прокрутке окон. В то время как прокрутка изображений, использование процессора и графического процессора становится очень высоким, из -за того, что его эффект прокрутка резко, а не гладкая. У меня есть пример CodePen:
https://codepen.io/sny220/pen/jjyepj
Код ниже:







Hello, world!
Whouaa !!!




Success





RUBRIQUE 3















Next Section








Hello, world!
Whouaa !!!




Success





RUBRIQUE 3















Next Section








Hello, world!
Whouaa !!!




Success





RUBRIQUE 3















Next Section








Hello, world!
Whouaa !!!




Success





RUBRIQUE 3















Next Section








Hello, world!
Whouaa !!!




Success





RUBRIQUE 3














< /code>
body {
padding-top: 20px;
}

/* set colors*/

:root {
--color-1: forestgreen;
--color-2: lightskyblue;
--color-3: darksalmon;
--color-4: palegoldenrod;
--color-5: mediumvioletred;
}

img {
width: 100%;
}

.foo {
margin-bottom: 10px;
color: white;
}

.navbar {}

.foo .inner {
padding: 5px;
min-height: 20vh;
}

.foo-text .inner {
min-height: 60vh !important;
}

/* apply colors */

.foo-1 .inner {
background-color: var(--color-1);
}

.foo-2 .inner {
background-color: var(--color-2);
}

.foo-3 .inner {
background-color: var(--color-3);
}

.foo-4 .inner {
background-color: var(--color-4);
}

.foo-5 .inner {
background-color: var(--color-5);
}

.bg-color {
background-color: var(--color-5);
color: #fff;
margin-top: 20px;
margin-bottom: 20px;
}

.over-hidden {
overflow: hidden;
}

.swing {
overflow: hidden;
}

.scale-in-ver-top {
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}

@keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}

.swing-in-top-fwd {
-webkit-animation-name: swing-in-top-fwd;
animation-name: swing-in-top-fwd;
}

@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}

@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}

@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
50% {
transform: scale(2, 2);
webkit-transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
}

.zoominoutsingle {
animation-name: zoominoutsinglefeatured;
webkit-animation-name: zoominoutsinglefeatured;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
< /code>
wow = new WOW();
wow.init();

$(".foo-5").hover(function(e) {
$(this).addClass('animated pulse');
}, function(e) {
$(this).removeClass('animated pulse');
});
var $animation_elements = $('.wow');
var $window = $(window);

function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);

$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);

//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position

update:- This is just an example that i am using in webpage. Web page
has different number of sections apporx. 20 sections and all are
having 10 or more images. So when we are running that much images with
animations the performance goes down.
I have checked it on mac Safari 11 & 12, the animation and scroll is
not smooth. There is jerkiness while scrolling and animations are very
slow with jerks.


Подробнее здесь: https://stackoverflow.com/questions/566 ... f-web-page