這是一款效果非常炫酷的帶視覺差效果的垂直全屏整頁滾動特效。該特效使用jQuery和CSS3完成，用戶可以通過滾動鼠標來一次垂直切換一個頁面，在頁面切換的時候還帶有一些視覺差特效。

使用方法

HTML結構

這個特效的HTML結構使用一個

作為包裹容器。里面每一個是一個頁面。

Section One

Subtitle One

Section Two

Subtitle Two

Section One

Subtitle Three

CSS樣式

所有頁面的通用背景樣式如下：它將背景的高度設置為視口的1.3倍，位置使用固定定位方式。

.background {

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

overflow: hidden;

will-change: transform;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

height: 130vh;

position: fixed;

width: 100%;

-webkit-transform: translateY(20vh);

-ms-transform: translateY(20vh);

transform: translateY(20vh);

-webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);

transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);

}

然后在背景上添加一些圖片和文本樣式。

.background:first-child {

background-image: url(1.jpg);

-webkit-transform: translateY(-10vh);

-ms-transform: translateY(-10vh);

transform: translateY(-10vh);

}

.background:first-child .content-wrapper {

-webkit-transform: translateY(10vh);

-ms-transform: translateY(10vh);

transform: translateY(10vh);

}

.background:nth-child(2) { background-image: url(2.jpg); }

.background:nth-child(3) { background-image: url(3.jpg); }

所有的頁面中內容的布局都使用flexbox進行布局。

.content-wrapper {

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

text-align: center;

-webkit-flex-flow: column nowrap;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap;

color: #fff;

font-family: Montserrat;

text-transform: uppercase;

-webkit-transform: translateY(40vh);

-ms-transform: translateY(40vh);

transform: translateY(40vh);

will-change: transform;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);

transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);

}

JAVASCRIPT

在jQuery代碼中，parallax()函數用于滾動檢測和視覺差效果的制作。slideDurationTimeout()函數用于臨時鎖定滾動。nextItem()，currentSlideTransition()和previousItem()函數用于頁面滾動控制。

具體實現代碼請參考下載文件。

總結

以上是生活随笔為你收集整理的html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。