CSS全屏垂直滑動（Full Screen Vertical Scroll）是一種炫酷的特效，可以為網(wǎng)站、應(yīng)用程序等增添視覺效果。下面我們來介紹一下如何實(shí)現(xiàn)這種全屏垂直滑動效果。
首先，我們需要使用CSS中的position:absolute;和height:100%;來實(shí)現(xiàn)全屏效果：
html, body {
height: 100%;
}
.container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}接下來，在.container中創(chuàng)建多個(gè)
Page 1 Page 2 Page 3
然后，我們需要給每個(gè)height:100%;和transform:translateY(-100%);，使它們鋪滿整個(gè)屏幕且位置在屏幕之外：
.container section {
height: 100%;
transform: translateY(-100%);
}接下來，我們需要使用jQuery或者JavaScript來實(shí)現(xiàn)鼠標(biāo)滾輪滾動事件。我們可以使用 現(xiàn)在，我們可以通過滾動鼠標(biāo)來在不同的.animate()方法來改變每個(gè)transform:translateY(0);實(shí)現(xiàn)垂直滑動：$(document).ready(function() {
$('body').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta >0) {
$('html, body').stop().animate({scrollTop: '-=100%'}, 500);
}
else {
$('html, body').stop().animate({scrollTop: '+=100%'}, 500);
}
return false;
});
$(window).on('resize', function() {
$('html, body').scrollTop((($(':animated').length) ? $(':animated') : $('html, body')).scrollTop());
});
});
var scrolling = false;
$(window).on('scroll', function(){
if (!scrolling) {
scrolling = true;
(window.requestAnimationFrame) ?
requestAnimationFrame(parallaxScroll) : setTimeout(parallaxScroll, 1);
}
});
function parallaxScroll() {
var scrolled = $(window).scrollTop(),
winHeight = $(window).height(),
fullHeight = $(document).height();
$('.parallax').each(function() {
var $this = $(this),
speed = $this.data('speed'),
top = 0;
if ($this.is(':visible')) {
top = $this.offset().top;
$($this.data('target')).css({'transform': 'translate3d(0, '+ (0-(scrolled * speed)) +'px, 0)'});
}
});
scrolling = false;
}