- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我用 html、javascript 和 css 设计了一个单页网站。网页上有很多图片,根据类别都有不同的动画效果。我使用 wow.js 来实现窗口滚动的动画效果。在滚动图像时,CPU 和 GPU 的使用率非常高,由于它的影响,滚动变得不稳定,不流畅。任何人都可以看看这个。我创建了一个代码笔示例。请看一看:-
(https://codepen.io/Sny220/pen/jjyEPj)
代码如下:-
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
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;
}
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 <= window_bottom_position)) {
$element.removeClass('animated');
$element.addClass('animated');
} else {
$element.css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}
});
}
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
$window.on('scroll resize', check_if_in_view);
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.
最佳答案
使用 Intersection Observer 可能会提高很多性能(IO) 而不是监听滚动事件。引入 IO 是因为监听滚动事件并计算元素的高度/宽度导致性能不佳。
首先你必须创建一个新的观察者:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
这里我们指定一旦观察到的元素 100% 可见,就应该执行一些回调。
然后你必须指定要观察的项目,在你的情况下我认为这将是:
var target = document.querySelector('.wow');
observer.observe(target);
所以我们定义,一旦任何类为“wow”的元素在页面上可见,回调就会被执行:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
在这里,您可以指定页面中每个“哇”元素变得可见时应该发生什么。
如果您在动画中使用 CSS 而不是 JS,那么动画现在应该很流畅了。它还取决于您要设置动画的参数,此处为 is a good list of properties避免使用 CSS 设置动画。
我不会在这里复制整个列表,但最重要的是填充、宽度、高度和位置。
编辑:如果您需要支持较旧的浏览器而不是使用此(官方)polyfill from w3c ,它通过监听滚动事件重新创建路口观察器。所以它在旧浏览器上仍然会变慢,你在这里无能为力。但在较新的产品上,性能会有所提高。
关于javascript - 动画正在降低网页的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56683298/
我在堆栈上创建了这段代码: function increase_brightness(hex, percent){ var r = parseInt(hex.substr(1, 2), 16)
为什么我能够LOWER COALESCE 中的每个项目,但无法LOWER整个COALESCE,否则我会遇到语法错误?例如: SELECT COALESCE(LOWER(google_provider_
我在谷歌上搜索到的所有内容都表明,以下任何一项都会将 double 舍入到小数点后两位。 double roundToFourDecimals(double d) { DecimalForma
我正在开发一个 flexdashboard/storyboard,我想在其中降低每个帧的高度。那可能吗? 示例代码: --- title: "Flex" output: flexdashboard
我在 WPF 中有一个图像控件。我需要减小图像尺寸控件的宽度和高度。但是当我这样做时,图像看起来不太好。数据丢失更多。 所以我想降低图像分辨率而不是仅仅改变图像控件的宽度和高度。 任何人都可以帮助我如
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题?通过 editing this post 添加详细信息并澄清问题. 1年前关闭。 Improve this
我正在扩展 Fluent NHibernate,以便更好地与 F# 一起使用(即引用支持),并希望获得一些关于降低 API 流畅性的反馈。 F# 要求使用返回值,除非它们是单位类型。所以这最终以“|>
我们有一个 BizTalk 2010 接收位置,它将获取一个 70MB 的文件,然后使用入站映射(在接收位置)和出站映射(在发送端口)生成一个 1GB 文件。 执行上述过程时,SQL Server 会
我的代码分析插件提示包含以下代码的方法中的代码复杂性。我注意到以下代码看起来可以组合,但我不知道如何做到这一点: for(Command command : commands) { if (c
我正在寻找一种方法来始终忽略 R 中 float 之间的微小差异(根据 IEC 60559,这些是 double 浮点),通过使用基本 R 工具而不诉诸 C 或 C++。换句话说,我想“四舍五入” d
在 Blazor 中使用 ChartJs.Blazor 的 BarChart 组件时是否可以降低甚至关闭动画速度?我发现这个 NuGet 包非常有用,但我不知道如何在更新条形图时关闭动画。为了更容易忽
所以我为一个游戏编写了这段代码,现在该游戏的速度非常快。我想降低 FPS,让游戏慢一点。 我认为我唯一的出路就是制作一个计时器。但我发现很难找到放置计时器的位置?谁能帮我解决这个问题吗? 所以我为一个
我正在编写一个程序,我担心它运行所需的时间和所占用的空间。 在程序中我使用了一个变量来存储数组的长度: int len=newarray3.length; 现在,我想知道是否能够通过不使用 len 变
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 2 年前。 Improve th
我用Java编写了一个程序,但它的计算时间很长,我不知道为什么。有人可以指点一下以降低复杂性吗?此外,在计算一些值(例如 3,100 之后)后,它会给出空指针异常。代码: public class F
我有下图,由 1 行 2 列的网格组成。我愿意 降低右侧子图的高度(3D PREDICTION),使棋盘平面看起来有点挤压并显示更好的视角。 在左侧子图的顶部添加一些边距(2D PREDICTION)
是否有一种简单的方法可以更改以 RGB 字符串形式给出的颜色的亮度? 例如 in_RGB = '#FF0000' --> out_RGB = '#CC0000' 最佳答案 将十六进制字符串转换为 R
我已经编写了代码来更改对象(不是进程)(在本例中是文件)的完整性级别。据我们所知,我们从中等完整性级别开始,但我想将其降低到“低”。我想运行完整性较低的 .txt 文件而不是默认介质。 我使用 WIN
是否可以在保持原始宽高不变的情况下降低图像分辨率? 我已经使用 BitmapFactoryOptions 尝试了几个选项: 在样本大小 inDensity、inScaled、inTargetDensi
是否有高级(Java)或低级方式(使用 native 代码)将 Android 设备上的蓝牙信号强度更改为最低? 目标是使设备在 20 厘米范围内可被发现?在 Internet 上根本找不到与此相关的
我是一名优秀的程序员,十分优秀!