故障藝術(shù)始于2017年，當(dāng)時網(wǎng)站設(shè)計設(shè)計師們開始嘗試小故障效應(yīng)。使用隨處可見，在視頻、動畫，當(dāng)然還有圖片里都有這種效果。這種效果完美地融入了一股懷舊浪潮，席卷了虛擬世界和現(xiàn)實世界。

如今，“故障藝術(shù)效應(yīng)”的受歡迎程度正在下降，但它成功地為另一種時髦的解決方案賦予了生命力：圖像顯示中的失真，它每天都受到網(wǎng)站設(shè)計師們的歡迎。

這種方法非常普遍，雖然乍一看這似乎是另一個豐富幻燈片之間轉(zhuǎn)換的聰明想法，但它也可以與網(wǎng)站設(shè)計界面的各種細(xì)節(jié)相匹配。即使是一個簡單的靜態(tài)圖像塊也可以從中受益。

讓我們看一些例子，這些例子顯示了這種新的趨勢。

Yuen Ye

雖然在我們的理解中它沒有傳統(tǒng)的失真效果，但是在這里圖像仍然是變形的。這位藝術(shù)家成功地實現(xiàn)了一種逼真的窗簾效果，當(dāng)你向下滾動時，網(wǎng)站設(shè)計畫面會在風(fēng)中飄動。

在如此適度的環(huán)境和最小的設(shè)計中，效果簡直閃耀，它使整個網(wǎng)站設(shè)計看起來非常精致，非常出色。

Dallara Stradale

沒有人能說達(dá)拉拉·斯特拉代爾的官方宣傳網(wǎng)站很無聊，該網(wǎng)站設(shè)計是一個真正的杰作，就像意大利團(tuán)隊創(chuàng)建的汽車。它充滿了創(chuàng)新的特點，以滿足產(chǎn)品本身的意識形態(tài)。

所以在這里，每個細(xì)節(jié)都很重要，這并不令人驚訝。每一個方面都是現(xiàn)代和時尚的。隨著主頁上主要部分之間的每一次移動，都會產(chǎn)生奇妙的圖像失真效果，就像手套一樣。

它將簡單的滾動轉(zhuǎn)換為一種性能，給每個區(qū)域一個戲劇性的入口。更重要的是，由于它的模糊，它自然模仿的速度感也是達(dá)拉拉斯特拉代爾的一個特點。

行星

而在前一個例子中，速度感是過渡效果的核心，而在這里，一種時髦的液體效果試圖以其流動的性質(zhì)贏得用戶。通常情況下，這里的圖像失真效果用于主屏幕旋轉(zhuǎn)木馬。

而不是惱人的滑動效果，我們可以享受一個可愛的過渡與平穩(wěn)的自然和魅力，給每一個場景的變化一個轉(zhuǎn)折。更重要的是，這種效應(yīng)也符合該機(jī)構(gòu)的招牌——加強(qiáng)外星高科技大氣。

馬克斯·柯爾特

Max Colt是世界知名的視覺效果生產(chǎn)商，其個人作品集也有失真效果。就像在《行星》中一樣，它改善了旋轉(zhuǎn)木馬中描述藝術(shù)家最令人印象深刻的作品的幻燈片之間的轉(zhuǎn)換。它有同樣的魅力，由于它的水啟發(fā)的性質(zhì)，但它看起來有點不同，相比行星的解決方案。

Bizmates

這個網(wǎng)站與我們收藏的其他網(wǎng)站形成了驚人的對比，這要?dú)w功于它基于幾何形狀的失真效果。其他的例子圍繞著扭曲圖像的漣漪效應(yīng)。在這里，相對較寬的垂直面板和菱形變形的場景表面。

該解決方案與整體四四方方的氛圍完美契合，做出了重要貢獻(xiàn)。

1MD

在我們的綜述中，1MD是第一個失真效應(yīng)不伴隨任何移動的例子。它只是在主頁上顯示的一個部分中使用，將其與其他部分區(qū)分開來。

它不僅是動畫背景的一部分，也是給中間的標(biāo)語增添一些情趣的媒介。因此，該部分是鼓舞人心的，而導(dǎo)致“關(guān)于我們”頁面的行動呼吁看起來是可點擊的和誘人的。

精確運(yùn)行

Precision Run背后的團(tuán)隊也采取了類似的路線。然而，這一次，他們使用這個時髦的解決方案，使一個簡單的靜態(tài)圖片引人注目。

這里的主頁包括復(fù)古元素，如雙色調(diào)。巧妙地搭配雙曝光的失真效果為整個界面增添了一種美妙的懷舊感。它完美地配合了網(wǎng)站上的一切，有效地將圖片置于聚光燈下。

Sass Cafe

Sass Cafe背后的團(tuán)隊展示了一種從失真效果中獲益的不同方法，他們結(jié)合了掩蔽和鼠標(biāo)交互的效果，將英雄區(qū)域變成了一個游樂場。

一開始，一幅干凈的黑色畫布上有兩條醒目的標(biāo)語迎接著在線觀眾。如果你開始移動光標(biāo)，你會注意到有東西隱藏在里面。有兩個背景圖像。當(dāng)你把鼠標(biāo)懸停在標(biāo)語上方時，每一個都會成為焦點。剩下的時間里，這幅畫一直變形嚴(yán)重。

這個解決方案從一開始就激起了人們的興趣。這真是個好主意。

艾達(dá)科爾

阿達(dá)索科爾的個人投資組合也有一個特點，就是很少有擺弄圖像顯示的傾向。這是我們的集合中的另一個示例，它脫離了通常的常用路徑，并與鼠標(biāo)光標(biāo)一起使用。

您可能已經(jīng)注意到，hero區(qū)域包含了代表藝術(shù)家作品的多個標(biāo)題。每個標(biāo)題都由將鼠標(biāo)懸停在其上時出現(xiàn)的圖片支持。

在本例中，當(dāng)您移動光標(biāo)時，圖片會留下扭曲圖形的痕跡。它會提醒顯卡缺乏必要的帶寬，無法跟上用戶移動的速度。這個原始的解決方案自然鼓勵我們玩網(wǎng)站，從而讓我們停留一段時間。

添加意想不到的轉(zhuǎn)折

標(biāo)準(zhǔn)的圖像效果仍然很受歡迎，但你必須承認(rèn)，它們已經(jīng)失去了一個令人滿意的“哇”因素。借助磨損嚴(yán)重的滑動或彈跳來吸引注意力變得越來越具有挑戰(zhàn)性。

因此，開發(fā)人員總是試圖想出一些新的東西來保持他們的網(wǎng)站的吸引力，這并不奇怪。而過去可以避免的臭名昭著的失真效應(yīng)，現(xiàn)在卻挽救了局面。

盡管該解決方案意味著變形和扭曲的外觀，它仍然是相當(dāng)普遍的。它與各種細(xì)節(jié)配合得很好。但從中受益的不只是滑塊。

實踐表明，該技術(shù)與基于鼠標(biāo)光標(biāo)交互和常規(guī)滾動的解決方案完美協(xié)作。這種效果讓網(wǎng)站設(shè)計中普通的東西看起來清新、鼓舞人心。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/21650.html