創(chuàng)建一個(gè)CSS3和jQuery滾動(dòng)屏幕

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

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

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

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

款式
再讓我們?cè)囍３挚钍胶?jiǎn)單實(shí)用。這是所有普通的CSS。首先，讓我們開(kāi)始與類的名字。在褪色。（這是說(shuō)在我們的CSS文件，頂部，我們可以宣布不同的動(dòng)畫(huà)延遲時(shí)間對(duì)其他元素的下文。）

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

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

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

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

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

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

文章名稱：創(chuàng)建一個(gè)CSS3和jQuery滾動(dòng)屏幕
當(dāng)前路徑：http://www.muchs.cn/news/20880.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)