通過 GSAP 和 Elementor 的強大功能，結合 ScrollTrigger 庫，創(chuàng)建了令人驚嘆的滾動觸發(fā)效果，特別適用于 360 度旋轉(zhuǎn)的完整視頻庫網(wǎng)格。當用戶滾動頁面時，視頻或圖像將呈現(xiàn)360度旋轉(zhuǎn)效果，為用戶帶來沉浸式的瀏覽體驗。這種效果不僅增強了網(wǎng)頁的互動性，還為您的網(wǎng)站添加了獨特的視覺魅力，使其與眾不同。無論是展示產(chǎn)品、視頻內(nèi)容還是藝術作品，滾動時的旋轉(zhuǎn)效果將吸引用戶的注意力，提升內(nèi)容的吸引力和用戶體驗。

應用場景：

產(chǎn)品展示：

適用于電商網(wǎng)站，通過360度旋轉(zhuǎn)效果展示產(chǎn)品的每個角度，讓用戶在瀏覽時能夠全方位地了解產(chǎn)品細節(jié)，提升購買欲望。

視頻作品展示：

藝術家、電影制片人或視頻內(nèi)容創(chuàng)作者可以使用這種效果展示自己的作品。用戶滾動時看到視頻或圖像的旋轉(zhuǎn)效果，能夠更好地沉浸在作品的魅力中。

創(chuàng)意項目與設計展示：

設計師、建筑師等創(chuàng)意行業(yè)的專業(yè)人士，可以通過此效果展示他們的設計作品或創(chuàng)意項目，帶給用戶視覺上的新鮮感和創(chuàng)新體驗。

娛樂和游戲網(wǎng)站：

在娛樂或游戲網(wǎng)站中，使用360度旋轉(zhuǎn)的效果來展示游戲角色、道具或場景，增強網(wǎng)站的互動性，吸引游戲愛好者參與并留住他們。

企業(yè)展示與品牌故事：

企業(yè)網(wǎng)站可以用這種效果展示產(chǎn)品組合、服務介紹或品牌故事，通過滾動展示不同的圖像或視頻，突出品牌的特色與價值，提升網(wǎng)站的品牌形象。

演示地址：https://demo-show.361sale.com/elementor-effects-5

文件下載地址↓

點擊獲取下載文件后，你會得到兩個文件。

完整版模版

如果你想使用完整的模版請選擇360 video 2.json文件。

請確保安裝已經(jīng)安裝好Elementor免費版和Elementor Pro版。只有Elementor Pro版才有模版導入功能。

請使用Elementor正版，使用破解版會出現(xiàn)任何其他的效果。

網(wǎng)站后端找到頁面，點擊添加新頁面。如上圖：

啟用Elementor編輯。如上圖：

點擊添加旁邊文件的圖標，也就是模版。如上圖：

點擊右上角的上傳標志，然后點擊選擇文件，然后再在本地文件選擇剛剛下載的文件。如上圖：

然后回到我的模版，即可查看我們剛剛導入的模版，點擊預覽查看效果，然后再選擇插入。如上圖：

導入完成后查看效果，有可能會出現(xiàn)頁眉和頁腳，那就需要選擇好對應的模版了。

點擊我們剛剛導入的模版的頁面，然后點擊編輯。如上圖：

選擇模版，選擇elementor畫布，選擇這個是因為不顯示頁眉和頁腳，只顯示模版內(nèi)容。如上圖

同時在使用elmentor編輯頁面，選擇站點設置，在選擇布局。如上圖：

也要確保一樣是Elementor畫布模版。這樣就不會有其他內(nèi)容。如上圖：

請關閉標頭和頁腳里面的內(nèi)容，點擊后隱藏里面的內(nèi)容，如上圖：

使用自己的背景

在選擇文件上傳的時候選擇360 video 1.json文件。

然后選擇預覽再選擇插入。如下圖：

區(qū)別在于可以替換成自己的背景，而不使用模版本身的。

其他步驟和完整版一樣。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息