我正在drupal网站中使用ScrollRevealjs库,由于某种原因,每次我仅在移动设备上滚动时,都会显示动画。目标是仅显示一次。 reset: false
选项在桌面上可以正常使用。
这是我的代码:
/**
* @file
* Provides scrollreveal settings for paragraph types.
*/
(function($, Drupal) {
/**
* Attaches scrollreveal effects for certain classes.
*/
Drupal.behaviors.cpl_base_scrollreveal = {
attach(context) {
const $scrollReveal = $('.cpl-reveal', context);
$scrollReveal.once('scroll-reveal-paragraph').each(function() {
const $this = $(this);
const paragraphClass = `.paragraph--id--${$this.data(
'paragraph-entity-id'
)}`;
const hasSlideshow = $this.hasClass('cpl-slideshow');
window.sr = new ScrollReveal();
$(window).resize(function() {
checkSize();
});
checkSize();
function checkSize() {
if (hasSlideshow) {
setTimeout(function() {
if ($this.find('.slick-slider').length) {
sr.destroy();
} else {
scrollRevealInit();
}
}, 300);
} else {
if (!sr) {
window.sr = new ScrollReveal();
}
scrollRevealInit();
}
}
function scrollRevealInit() {
sr.reveal(
`${paragraphClass} .cpl-reveal-l, ${paragraphClass}.cpl-reveal-l`,
{
origin: 'left',
distance: '150%',
duration: '1200',
reset: false,
}
);
sr.reveal(
`${paragraphClass} .cpl-reveal-r, ${paragraphClass}.cpl-reveal-r`,
{
origin: 'right',
distance: '150%',
duration: '1200',
reset: false,
}
);
sr.reveal(
`${paragraphClass} .cpl-reveal-t, ${paragraphClass}.cpl-reveal-t`,
{ origin: 'top', distance: '150%', duration: '1200', reset: false }
);
sr.reveal(
`${paragraphClass} .cpl-reveal-b, ${paragraphClass}.cpl-reveal-b`,
{
origin: 'bottom',
distance: '150%',
duration: '1200',
reset: false,
}
);
}
});
},
};
})(jQuery, Drupal);
谢谢!