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

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

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

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

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

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

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

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

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

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

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

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

文章名稱：創(chuàng)建一個CSS3和jQuery滾動屏幕
當前路徑：http://www.bm7419.com/news/20880.html

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

廣告

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