html界面切换动画效果图,HTML5多层页面切换显示过渡动画效果

最新推荐文章于 2025-04-29 23:02:23 发布

白庆堂

最新推荐文章于 2025-04-29 23:02:23 发布

阅读量1.3k

点赞数

文章标签： html界面切换动画效果图

本文展示了如何使用HTML和JavaScript实现多层页面切换时的显示过渡动画效果。通过引入Revealer库，配合不同方向的点击事件，实现场景切换的平滑过渡，并提供了效果选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

导入代码模板：

Arrow Left

Hack Reactor

Your CS success starts here.

Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. Apply now and become a software engineer.

A good programmer is someone who always looks both ways before crossing a one-way street.

Doug Linder

(function() {

var pages = [].slice.call(document.querySelectorAll('.pages > .page')),

currentPage = 0,

revealerOpts = {

// the layers are the elements that move from the sides

nmbLayers : 3,

// bg color of each layer

bgcolor : ['#0092DD', '#fff', '#3E3A35'],

// effect classname

effect : 'anim--effect-3',

onStart : function(direction) {

// next page gets class page--animate-[direction]

var nextPage = pages[currentPage === 0 ? 1 : 0];

classie.add(nextPage, 'page--animate-' + direction);

onEnd : function(direction) {

// remove class page--animate-[direction] from next page

var nextPage = pages[currentPage === 0 ? 1 : 0];

nextPage.className = 'page';

}

};

revealer = new Revealer(revealerOpts);

// clicking the page nav buttons

document.querySelector('button.pagenav__button--top').addEventListener('click', function() { reveal('top'); });

document.querySelector('button.pagenav__button--left').addEventListener('click', function() { reveal('left'); });

document.querySelector('button.pagenav__button--right').addEventListener('click', function() { reveal('right'); });

document.querySelector('button.pagenav__button--bottom').addEventListener('click', function() { reveal('bottom'); });

document.querySelector('button.pagenav__button--cornertopleft').addEventListener('click', function() { reveal('cornertopleft'); });

document.querySelector('button.pagenav__button--cornertopright').addEventListener('click', function() { reveal('cornertopright'); });

document.querySelector('button.pagenav__button--cornerbottomleft').addEventListener('click', function() { reveal('cornerbottomleft'); });

document.querySelector('button.pagenav__button--cornerbottomright').addEventListener('click', function() { reveal('cornerbottomright'); });

// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)

function reveal(direction) {

var callbackTime = 750,

callbackFn = function() {

classie.remove(pages[currentPage], 'page--current');

currentPage = currentPage === 0 ? 1 : 0;

classie.add(pages[currentPage], 'page--current');

};

revealer.reveal(direction, callbackTime, callbackFn);

}

// changing the effect..

var effectCtrl = document.getElementById('select-effect');

effectCtrl.addEventListener('change', changeEffect);

// force it to be the first opt as default

effectCtrl.value = 'effect-3';

function changeEffect() {

revealer.destroy();

var revealerOpts = {

// the layers are the elements that move from the sides

nmbLayers : Number(this.options[this.selectedIndex].getAttribute('data-layers')),

// bg color of each layer

bgcolor : this.options[this.selectedIndex].getAttribute('data-colors').split(','),

// effect classname

effect : 'anim--' + this.value,

onStart : function(direction) {

// next page gets class page--animate-[direction]

var nextPage = pages[currentPage === 0 ? 1 : 0];

classie.add(nextPage, 'page--animate-' + direction);

onEnd : function(direction) {

// remove class page--animate-[direction] from next page

var nextPage = pages[currentPage === 0 ? 1 : 0];

nextPage.className = 'page';

}

};

revealer = new Revealer(revealerOpts);

}

})();