2013-03-08 35 views
2

我不知道這是否可能,但客戶是堅持的。他希望他的導航欄內容沿着「斐波納契螺旋線」對齊。網頁設計:客戶想要一個基於旋轉的導航欄

這件事:

enter image description here

我甚至不認爲CSS3旋轉方面是目前任何瀏覽器的功能,我不知道是否有任何的腳本語言,讓我最微弱有可能創建一個自定義的彎曲軌道來強制對象而不是標準(以及幾乎只有)水平和垂直對齊方法。但是,我真的接受了一個很好的挑戰。毫不費力地倒退幾乎沒有做好。

如果你們中的任何一個人都知道我可能達到這種效果的最大程度的可能性,我會很驚訝。感謝您的時間!如果你認爲這在目前的網絡瀏覽器中是無法實現的,那就這麼說吧!

+1

你究竟是在這個螺旋上對齊?你可以在圖像編輯器中做一個你實際上在做什麼後的草圖嗎? – Eric 2013-03-08 07:50:43

回答

2

反正有趣的想法。希望你能讓你的客戶開心。 我以爲我可能會融入一些東西。 發現一個jQuery的插件,沿曲線彎曲文本: http://tympanus.net/Development/Arctext/

或許有可能使廣場的div遞減尺寸的佈局,並指定每一個曲線?如果你把它周圍

可能DIV佈局:http://upload.wikimedia.org/wikipedia/commons/9/95/FibonacciBlocks.svg

插件從指定半徑值的彎曲和可以彎曲向上或向下。它似乎不是爲傾斜曲線構建的,但可以修改它。

編輯:我嘗試了一下插件,我相信它肯定有可能達到你需要的效果,儘管人們必須很好地知道三角函數(據我所知)來使它正常工作。

另一種選擇,也是迄今爲止我能想到的最簡單的方法,就是利用舊的經典:圖像映射! http://en.wikipedia.org/wiki/Image_map

只是photoshop一個不錯的螺旋形圖像,但你喜歡,並使用圖像映射來設置可鏈接區域。這可能是有趣的:http://www.outsharked.com/imagemapster/default.aspx?demos.html

+0

我不僅沒有想到圖片映射* facepalm *,但我一定會嘗試使用jQuery插件。感謝您使用該發現來啓發我,因爲雖然我可以通過圖像映射快速修復此版本,但圖像映射可能不會輕鬆滿足客戶的需求。再一次,謝謝! – 2013-03-08 14:49:32