HTML & CSS ? 給網站增加交互音效 – Loud links輕量插件

給網站增加交互音效 – Loud links輕量插件

發表于: HTML & CSS. 評論
Sponsor

想必大家玩過 APP 游戲，里面的按鈕每點擊一下都會有一個響聲來回應你的點擊狀態，這是很不錯的交互效果，若想在網頁也能實現這樣的交互聲音，請看今天達人分享的 Lound links JS 插件，它可以實現這樣效果！

Loud links這個WEB音效插件可以實現按鈕與圖片等元素的觸發交互，比如鼠標 HOVER 后出現響聲，或者鼠標點擊后出現響聲。本插件非常輕量級，官方介紹只有1.5KB大小，使用也相當簡單。

JS插件：Loud links
下載&演示：https://loudlinks.rocks/
支持音頻格式：mp3, ogg

達人體驗了一下，使用這種方法還是不錯的，從心理學角度來看，加入聲音的交互，可以增加一點小小的驚喜。

關于 BUG，其實也不算 BUG，就是第一次使用的時候，聲音會有延遲，這是因為第一次使用時需要下載聲音文件，所以不建議使用大文件。

使用方法

STEP 1. 嵌入JS 文件

...
<script src="js/loudlinks.min.js"></script>
</body>
</html>

STEP 2. 在需要觸發的元素上加入對應 class 。

  • 「loud-link-hover」為懸停觸發聲音；
  • 「loud-link-click」為點擊觸發聲音。

代碼參考如下：

<div class=“loud-link-hover”> ... </div> <!-- sound on hover -->
<div class=“loud-link-click”> ... </div> <!-- sound on click -->

STEP 3. 使用「data-sound」來配置聲音

方式一：絕對路徑

<div class=“loud-link-hover” data-sound="http://example.com/audio/noise.{{type}}"> ... </div> //{{type}}為聲音格式，比如 .mp3, .ogg

方式二：使用聲音名稱

<div class=“loud-link-hover” data-sound="noise"> ... </div>//這里 noise 為聲音名稱，而文件必須存放到音頻目錄：/sounds/mp3/noise.mp3 或 /sounds/ogg/noise.ogg
推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }