網站地圖 | 聯系我們 排名技術建站,讓你對手追趕
你現在的位置:網站首頁 > 資源分享 > JS插件 > 正文內容
?

好玩的交互可拖動(JQ+CSS3)

發布時間:2015-08-14 | 編輯 : 小勇 | 分類 : JS插件 | 閱讀: 次 | 評論 :0

ElasticDraggingInteraction

查看演示 下載源碼 提取密碼: b48f

今天,我們想與你分享兩個小有趣互動實驗。 第一個是靈感來自互動的集會 上拍攝 。 我們想創建一個好玩的拖動交互,將變形和動畫元素根據其位置。 如果拖到外面定義的界限,我們將把元素( 演示1 ),或瀏覽一個畫廊( 演示2 )。 如果范圍下降之前我們會提前元素用一個彈性的效果。 我們還添加了一些反彈能力從來都是不利的,內部的元素,一切都變得更加有機的感覺。

注意: 這個實驗使用了一些CSS屬性,不會在老式瀏覽器工作(CSS動畫,CSS過濾器,等等)。Internet Explorer 11既不支持 傳輸格式:preserve-3d 也沒有CSS過濾器。

我們使用的是 Draggabilly 再加上 imagesLoaded 和 Dynamic.js。

當拖動相應的元素,我們“變形”,這樣我們添加一些深度互動的感覺。 在 第一個演示 我們使用一個對話框,在這里我們有生命的內在元素拖放到讓它反彈時的鏈接。 的 第二個例子 是一個畫廊,我們導航,當拖動當前圖像的邊界(向左或向右)。 變成了一個形象  可選的轉換(如縮放或旋轉)或過濾器。

這種效應的有趣的部分工作是在變形的計算轉換。 鑒于一定距離我們希望轉換或過濾增加比例。得到正確的值,我們需要找到合適的映射函數,給定一個點在二維空間,返回相對變換或過濾值。

所以我們要做的就是解決一個線性函數。 鑒于兩點坐標系統中,我們把我們的距離函數,給定一個x,我們得到我們的y值。 讓我們來做一個例子,一個元素集中在頁面上,降低不透明度時,移動到的頁面。 我們的距離是一半的窗口寬度: ww / 2 。 我們的不透明度值范圍在0和1之間。 完全不透明的中心元素和頁面。 零不透明度達到當達到頁面的邊緣,因此 ww / 2 遠離原點。 這給了我們兩個點P1和P2(x1,y1)(x2,y2): P1(0,1) 和 P2(ww / 2 0) :

DraggableElementInteraction_1

我們可以與這兩個點 線性函數 這樣的:

f(x)= y =((y2 - y1)/(x2 - x1))* x + b

我們知道, 1,y軸的十字路口。 當我們解決這個使用兩個點,然后我們有:

f(x)= y = x + 1(2 / ww)*

這個函數將給定距離x,y返回所需的透明度水平。
同樣的原理適用于過濾值(只使用0%和100%的值為y1和y2)或任何其他財產你想按比例變化。
我們希望你喜歡這個小實驗,發現它鼓舞人心!

本文標簽CSS   JS  

贊助我們:如果你覺得本站的內容對你確實有所幫助,請贊助我們讓我們有動力為你繼續奉獻更多有用的內容→贊助我們

版權說明:如非注明,本站文章均為 小勇工作室 原創,轉載請注明出處和附帶本文鏈接 http://www.9017778.live/html/2015/jq_0814/1.html。

?
聯系我們
QQ:
873268813
旺旺:
wsuper勇
郵箱:
給我發郵件
QQ群:
加入交流群
?
Powered By 小勇工作室,Copyright www.9017778.live ? 2008-2019, 贛ICP備15004575號
银河配资