捕捉您的網(wǎng)站的訪客的注意力的好方法是“閃屏”或“介紹”屏幕，做一個(gè)成功的人是非常困難的，他們可以直觀醒目、美觀，讓用戶想滾動(dòng)學(xué)習(xí)更多。這種風(fēng)格的介紹很好地工作在單頁滾動(dòng)的網(wǎng)站。或網(wǎng)頁設(shè)計(jì)已經(jīng)與平面設(shè)計(jì)趨勢為時(shí)尚風(fēng)格的旗幟。它也可以做一個(gè)漂亮的“背景視頻”式的介紹，這也是所有憤怒的時(shí)刻很有用。

深圳網(wǎng)站制作想告訴你今天是達(dá)到這種效果的基本方法，你可以很容易地修改 做出好看的介紹網(wǎng)站的體驗(yàn)。

標(biāo)記
我們要盡量保持標(biāo)記這很簡單。 這樣可以實(shí)現(xiàn)對(duì)原有網(wǎng)站以及新項(xiàng)目。
所以基本上我們想做一下。一個(gè)類的飛濺和另一類包裝。（包裝類可能已經(jīng)存在的一些方式，如果你執(zhí)行這一個(gè)預(yù)先存在的網(wǎng)站，那么你可能需要不同的類的名稱）。
夠了就要這些。這就是我們需要的語義。但很明顯，我們會(huì)加入一些虛構(gòu)的內(nèi)容和標(biāo)題，我們看的東西，在我們的演示。我們還需要一些箭頭添加初始屏幕向用戶展示他可以向下滾動(dòng)（這將是我們的方法的介紹屏幕使消失而帶來的主要內(nèi)容）。
所以這里的簡單標(biāo)記都會(huì)在我們身上的標(biāo)簽：

讓我們解釋這里發(fā)生的事情的更詳細(xì)一點(diǎn)：我們開始我們的飛濺區(qū)里面，我們有一個(gè)標(biāo)題，和我們的滾動(dòng)指示器（這里是一個(gè)箭頭的形象，但可以是任何你希望它是明顯的）。然后我們關(guān)閉div，開啟另一類包裝。在我們剛剛得到了一些通用的網(wǎng)站內(nèi)容將每個(gè)案件都是不同的，但是我們會(huì)保持它的簡單：一個(gè)標(biāo)題，一些導(dǎo)航，主內(nèi)容區(qū)和頁腳。然后從谷歌的API，我們將使用它的功能是jQuery，并鏈接到另一個(gè)js文件是我們自己的，我們可以寫我們的jQuery代碼。
你可能也注意到類的名字消失在屏幕面積。我們將使用這個(gè)類添加一些漂亮的CSS3動(dòng)畫的某些元素，使導(dǎo)語更強(qiáng)大。很明顯，如果你看看結(jié)果現(xiàn)在不會(huì)真的是什么，我們需要的風(fēng)格，現(xiàn)在的一切。 說到這 讓到CSS…
 

款式
再讓我們試著保持款式簡單實(shí)用。這是所有普通的CSS。首先，讓我們開始與類的名字。在褪色。（這是說在我們的CSS文件，頂部，我們可以宣布不同的動(dòng)畫延遲時(shí)間對(duì)其他元素的下文。）

我們宣布每個(gè)第一和調(diào)用我們的動(dòng)畫漸顯。它從一個(gè)0的不透明度為1。然后我們的目標(biāo)類的名稱直接指定它有0的不透明度。叫離子動(dòng)畫，我們只是說明，讓它持續(xù)0.3s，給它一個(gè)延遲 0.5s。
現(xiàn)在讓我們看看我們的CSS splash頁面需要：

我們找一個(gè)背景圖像（這里只是黑白照片一條街），我們的中心，也確保它涵蓋什么尺寸整個(gè)屏幕，并使其附著這意味著它不會(huì)向前滾動(dòng)。然后我們給它一個(gè)固定的位置，并指定要從頂端，距離0，底部和左因此它充滿整個(gè)瀏覽器窗口。然后我們會(huì)給它一個(gè)最小高度為什么我們會(huì)把里面會(huì)絕對(duì)定位。確保它有一個(gè)高的Z為我們想要它出現(xiàn)在網(wǎng)頁上的其他內(nèi)容（現(xiàn)在將直接放在我們的屏幕，因?yàn)樗幸粋€(gè)固定的位置 ）。
你去那里，那是所有的風(fēng)格，其實(shí)是需要讓屏幕在正確的地方，在網(wǎng)頁上出現(xiàn)。填充屏幕，超過所有其他的內(nèi)容，在不改變頁面的流量。所以現(xiàn)在我會(huì)很快給你的CSS的其余部分，主要場所的標(biāo)題在正確的地方，將是一個(gè)很好的向下的箭頭，以指示用戶要滾動(dòng)。最后是一些頁面的基本樣式，和一些媒體查詢：

所以在這里我們有總體風(fēng)格，在標(biāo)題部分的頂部填充，在這里我們也延遲淡入動(dòng)畫的另一半秒。所以它有自己的入口。箭頭鏈接是絕對(duì)定位，永遠(yuǎn)在中間和底部的屏幕。它的另一個(gè)半秒的延遲，最終在屏幕上出現(xiàn)。我們增加一些CSS3轉(zhuǎn)換這樣的位置的變化：懸停狀態(tài)的動(dòng)畫。最后，我們有一些小的媒體查詢的變化使它看起來在較小的屏幕稍好。但顯然這些樣式將根據(jù)你的設(shè)計(jì)變更。

先我們進(jìn)行最初的陳述里面的文件準(zhǔn)備功能，采取行動(dòng)，只有當(dāng)頁面完全加載。所以首先我們看看我們的屏幕是可見的。如果是，我們使包裝無形的（所以我們沒有Flash內(nèi)容而背景圖像加載，并使最終淡出動(dòng)畫一旦我們到達(dá)頁）。我們再添加一個(gè)函數(shù)在箭頭單擊處理程序。如果用戶點(diǎn)擊就可以了，閃屏幻燈片（因此消失），然后我們將包裝紙的不透明度到。 

這個(gè)小的代碼塊（幾乎）一樣，我們將使用后的$（窗）。滾動(dòng)功能。所以當(dāng)用戶滾動(dòng)，我們滑上的飛濺，然后這一次動(dòng)畫回到頁面頂部（這樣用戶不會(huì)開始一半的頁面）和動(dòng)畫的元素的不透明度。我們也加入這行$（窗口），關(guān)閉（“滾動(dòng)”）；停止窗口滾動(dòng)時(shí)，其實(shí)我們不想要它。當(dāng)用戶第一卷我們希望它只是掀起了動(dòng)畫，不滾動(dòng)頁面。但一旦介紹了網(wǎng)頁的正常滾動(dòng)。

結(jié)論
所以你有它，一個(gè)很簡單的（輕）但有一個(gè)介紹屏幕優(yōu)雅的解決方案添加到你的網(wǎng)站上，并讓它消失在滾動(dòng)，或在一個(gè)特定的元素，用戶點(diǎn)擊。隨時(shí)把這個(gè)代碼，使用它，修改它以適合你的需要。

自由職業(yè)的終極指南
成功的電子商務(wù)網(wǎng)站設(shè)計(jì)6要素