網站運行環境（讓你的網站酷起來）

今天要給大傢推薦的是來自巴黎的技術社區Naker，以及他們為瞭使我們的網站更具交互性、更加生動有趣而創建的幾個很酷的工具：Naker.Back、Naker.Story和Naker.Form。NakerNaker是一個致力於使Web更具交互性、沉浸性和創造力的專業團隊，也是一個聚集瞭全球2500多位3D或Web設計師、營銷人員和數字愛好者的社區，他們通過交互背景、3D交互動畫和遊戲化表格使網站再次變得炫酷。另外PutApp新版1.2.0已上線，適配瞭暗黑模式，支持Apple賬戶登錄、郵箱登錄，歡迎下載體驗！靈感示例打開 Naker 首頁我們可以看到交互在網站中的體現，同樣「將網站轉變為互動體驗」是 Naker 的 Slogan 也是服務目標，為此 Naker 提供瞭大量優秀的特色項目，幫我們從中獲得靈感以開始自己的項目。點擊「Get inspired」激發靈感按鈕或導航欄中的「Inspiration」靈感鏈接進入項目示例頁面，首先會看到 Naker 提供的兩個關於 Naker.Back 和 Naker.Story 的本月精選項目。本月精選項目後面分別是關於Naker.Back 和 Naker.Story 的更多項目示例展示，每一個項目示例都對應著一個網站或演示頁面，通過示例我們能看到關於 Naker 工具的具體運用效果，隨便打開一個示例我們一起來看：Naker.Back示例—HD Rain網站視頻加載中…Naker.BackNaker.Back是一個免費的3D交互式背景生成器，通過前面HD Rain網站示例，我們可以看到背景顏色、粒子動畫與鼠標的交互，那麼這些都是如何制作的呢？進入Naker.Back編輯器頁面，上面導航欄從左到右分別是Naker賬戶登錄/註冊入口，Naker工具名稱、保存項目及導出背景按鈕。下面左側是背景效果實時預覽窗口，右側是操作窗口可以對背景顏色、粒子、動畫等相關參數進行設置或調整。在進行自定義交互背景前，Naker.Back還提供瞭「Randomize」隨機生成交互背景和「Template」模版背景按鈕快速創建交互背景。設置背景顏色包含漸變角度：垂直/水平/徑向漸變、背景開始/結束顏色及透明度、粒子開始/結束顏色及透明度等參數。粒子參數包含粒子圖像、數量和尺寸大小，點擊粒子圖像可以選擇Naker.Back提供的其他粒子圖像、上傳自己的粒子圖像或者不使用粒子圖像。註意：上傳的粒子圖像僅支持PNG格式。在Movements動畫模塊，可以通過箭頭控制粒子的運動方向、速度控制粒子的運動快慢節奏、相機靈敏度管理鼠標與背景的交互動畫。創建完成一個滿意的交互背景之後，我們可以免費導出該背景的代碼信息，並可將代碼嵌入網站或應用中。註意：導出背景或保存項目，需要創建一個Naker賬戶。Naker.StoryNaker.Story 是一個免費的3D交互式內容編輯工具，它借助3D模型將你的網站內容變成具有交互性的動畫沉浸式數字體驗故事，以一種新的方式來吸引訪問者。就像靈感示例中展示的Tesla Model S示例一樣，我們通過在3D模型動畫中設置關鍵興趣點，使受眾集中在功能、產品或屏幕上的任何內容上，為網站提供更多的附加值。體驗Naker.Story首先需要登錄賬戶，進入Naker.Story編輯器首頁，左側是用戶信息和Naker.Story功能模塊導航按鈕，右側是Naker.Story功能模塊列表，從上到下分別是用戶項目、團隊項目、靈感示例、教程講解。點擊「New empty project」創建新的空項目，填寫項目名稱、添加合作者、標簽等信息，點擊「Create」新項目創建完成。Naker.Story編輯器的所有編輯頁面始終使用相同的界面構建：上面是創建步驟、左側選擇面板、中間3D畫佈、右側操作面板、底部滾動線，在3D畫佈上可以縮放、拖動或旋轉主攝像機查看3D場景及周圍環境。第一步創建環境「Environment」頁面，右側操作面板提供調整天空-3D背景、燈光、背景聲音等參數。第二步創建內容「Content」頁面，左側選擇面板顯示3D場景中的組件列表，在此列表打開/關閉組件陰影、顯示/隱藏組件、鎖定/解鎖組件，右側操作面板可以添加3D模型、高度/位移圖、燈光、圖像、影片等組件，隻需要將它們導入並放置在3D場景中。選擇項目中的組件後，在中間3D畫佈上會顯示選擇器用以改變組件的位置、旋轉或縮放組件，同時右側操作面板顯示所有關於該組件的參數屬性：位置/旋轉/尺寸/透明度等主要設定、紋理材質等等，調整這些參數更精確地控制組件。第三步創建動畫「Animation」頁面，你可以選擇組件創建基本動畫，每個組件最多可添加5個動畫，每個動畫都可以設定觸發條件，觸發時組件如何精確動畫，同時編輯好的動畫都支持保存為動畫預設以便以後在其他組件上使用。第四步旅程觀點「Journey」頁面，在這裡主要是創建相機的旅行軌跡，首先在右側操作面板中可以設置整個旅程的持續時間、添加進度條並設置顏色。點擊「Add point of view」添加觀點按鈕創建新的觀點，左側選擇面板列表顯示所有觀點，拖動觀點順序可以改變相機的旅程軌跡，選中的觀點和組件一樣，在中間的3D畫佈上會顯示選擇器用以改變觀點的位置、旋轉觀點視圖，同時在3D畫佈右下角「Preview」預覽窗口實時監控相機畫面。右側操作面板可以對觀點的位置、旋轉做主要設定，也可以通過篩選器調整畫面的視野焦點、對比和曝光、銳化邊緣和顏色、色差等。第五步熱點標簽「Hotspot」頁面，一個熱點就是一個興趣點，是在動畫中添加和觀眾互動式的內容，點擊「Add hotspot」新增熱點按鈕即可添加熱點。一個熱點由一個球和一個標簽組成，添加完成的熱點就放置在3D場景中，我們可以通過右側操作面板調整熱點位置、標簽及文字顏色等參數。底部滾動線代表整個動畫，這個時間軸不是基於時間而是滾動，也就是前面我們添加的旅程標簽，我們可以在滾動線更改熱點的位置。調整好熱點之後我們需要為熱點添加故事，點擊右側操作面板「Hotspot story」中的「Show」按鈕，我們為熱點創建一個專屬的展示頁面，文字及畫面設置通過調整右側操作面板「Hotspot story」和篩選器「Filters」中的參數來完成。第六步發佈「Publish」是我們創建步驟的最後一步，隻需要點擊一下「Publish」按鈕即可得到我們創建的項目的鏈接地址和代碼文件，點擊復制後我們可以將其輕松嵌入到任何網站或網絡應用中。關於Naker.Story編輯器的操作，對於不熟悉3D工具的朋友來說可能會有些陌生，不過在使用Naker.Story的過程中都有相關教程介紹及操作引導，非常清晰詳盡、簡單易用。Naker.Form表單在我們的網站中是最常見的用戶註冊及數據獲取方式，但是填寫表單可能會很無聊，而如何將這件無聊的事轉化為一件有趣的事來提高表單的轉化率？通過Naker.Form的宣傳視頻，我們就可以感受到Naker.Form的魔力。Naker.Form是一個簡單易用的工具，可以將交互動畫添加到任何現有表單中，使其變得強大！我們填寫表單的內容越多，在最終驗證顯示出來之前，圖像動畫就會構建的越多，通過這種遊戲化的表格填寫體驗，來吸引用戶填寫表單內容、提高表單的轉化率。Naker.Form並不管理表單本身，而是管理與其鏈接的交互動畫場景。接下來我們一起在Naker.Form編輯器中體驗：首次打開Naker.Form編輯器，來自Naker的Jennifer會引導大傢來瞭解Naker.Form編輯器以及相關界面和操作，簡單無難度。在開始創建交互式場景前，無論你是否已經有瞭自己的表單，Naker.Form編輯器均會提供一個“偽造的表單”來模擬設計的呈現，將重點放回交互動畫場景。當然，如果你沒有自己的表單，並且喜歡Naker提供的表單設計，你也可以通過表單上的鏈接跳轉到Github找到該表單資源。繼續回到Naker.Form編輯器頁面，上面導航欄從左到右分別是Naker賬戶登錄/註冊入口，Naker工具名稱、保存項目及導出項目按鈕。下面左側是交互場景效果實時預覽窗口，右側是操作窗口可以對場景環境、圖片、填寫表單融合動畫、確認表單爆炸動畫等相關參數進行設置或調整。在進行自定義交互場景前，Naker.Form還提供瞭「Randomize」隨機化和「Template」模板按鈕快速獲得多種可能。環境「Environment」設置背景顏色漸變梯度-垂直/水平/徑向漸變、背景開始/結束顏色及透明度、景深等參數。圖片「Image」是我們交互場景動畫中想要顯示的圖像，比如LOGO、ICON、文字等其他任何內容，隻需要點擊圖片縮略圖「Replace Image」替換上傳即可。上傳完成的圖片還需要我們為其定義一個形狀，並設定數量和大小。其中形狀有：立方體、球、四面體、八面體、十二面體、二十面體、三棱鏡、五角棱鏡、六角棱鏡、方形金字塔和五角錐等多種3D形狀。填寫表單融合動畫「Fusion / Fill in Form」就是字面意思，在填寫表單時的交互場景動畫設定，在預設值「Preset」中提供瞭Merge、RubiksCube、Grow、Squeeze和Elevator 5種默認動畫效果，從中進行選擇可以快速獲取靈感。此外還可以通過位置、旋轉、比例幾個選項進行參數調整。確認表單爆炸動畫「Explosion / Validate Form」就在填寫完表單內容，點擊「提交」按鈕確認表單時的動畫。與上面的填寫表單融合動畫類似，同樣在預設值「Preset」中提供瞭Explosion、Waterfall、Floating和Wind4種默認動畫效果，從中進行選擇可以快速獲取靈感。此外還可以通過重力、功率幾個選項進行參數調整。構建完成自己的交互式場景之後，我們可以將項目保存或導出並與我們網站上的表單進行鏈接。保存或導出項目首先需要我們登錄Naker賬戶，登錄之後點擊導出「Export」按鈕即可得到我們的項目代碼，點擊復制將這些代碼粘貼到我們的網站源碼中，它將自動檢測頁面上存在的表單。Naker.Form場景可以嵌入到網站上的任何位置，無論你的網站是使用Tilda、Webflow、Unbounce、Wordpress…具體操作可以參看導出彈窗上的「article」鏈接文章，這裡就不過多說明瞭。