三種方法在公眾號中實(shí)現(xiàn)圖片左右滑動效果:詳細(xì)教程
本文提供了一份詳盡的教程,教你如何在公眾號文章中實(shí)現(xiàn)圖片的左右滑動效果,包括使用滑動樣式、滑動布局和SVG滑動組件的步驟,讓你的內(nèi)容更具吸引力。
在公眾號運(yùn)營中,圖片的展示方式對于吸引讀者的注意力至關(guān)重要。其中,左右滑動圖片效果因其互動性和視覺吸引力而備受歡迎。本文將詳細(xì)介紹如何在公眾號中實(shí)現(xiàn)這一效果,讓你的內(nèi)容更加生動有趣。
一、滑動樣式—有樣式的滑動
1.1 尋找滑動樣式
首先,打開你的135編輯器。在編輯器頁面左側(cè),找到[樣式]選項(xiàng)。在頂部的SVG分類中,選擇[滑動],這里匯集了各種滑動樣式供你選擇。
1.2 更換圖片
以樣式120420為例,如果你需要更換圖片,可以按照以下步驟操作:
單擊需要替換的圖片。
在圖片編輯選項(xiàng)中選擇[換圖]。
注意,為了保持滑動效果的一致性,新圖片的尺寸應(yīng)與原圖一致。你可能需要對新圖片進(jìn)行裁剪以符合原尺寸。
1.3 編輯SVG動畫
如果你需要更精細(xì)的控制,可以選擇[編輯SVG動畫]。在編輯頁面中,根據(jù)素材大小更換圖片,并進(jìn)行相應(yīng)的調(diào)整。
1.4 增刪圖片
若要增加或減少滑動中的圖片數(shù)量,同樣以樣式120420為例:
單擊滑動樣式,在全局樣式中選擇[加一個(gè)]來增加圖片。
如果需要減少圖片,點(diǎn)擊[減一個(gè)]即可。
二、滑動布局—最純粹的滑動
2.1 創(chuàng)建滑動布局
在編輯器左側(cè)頂部,找到[布局]—[基礎(chǔ)布局]—[滑動布局]。點(diǎn)擊[滑動布局]到編輯器頁面。
2.2 設(shè)置滑動參數(shù)
在滑動布局中,你可以設(shè)置滑動方向(豎向或橫向)、背景、寬度等內(nèi)容。
2.3 上傳并編輯圖片
添加三塊滑動布局。
雙擊每塊滑動布局,進(jìn)入編輯頁面后上傳圖片。確保所有滑動素材的寬高一致。
圖片之間沒有空隙會顯得很緊湊,可以給圖片添加邊距。
三、SVG滑動組件—最會玩的滑動
3.1 使用SVG編輯器
如果你需要更復(fù)雜的滑動效果,如添加超鏈接、小程序等,可以通過135編輯器左側(cè)的SVG編輯器實(shí)現(xiàn)。
進(jìn)入SVG編輯器頁面,在[互動效果]中選擇[滑動]。
3.2 預(yù)覽效果
將鼠標(biāo)放在組件上,右側(cè)會出現(xiàn)效果GIF圖展示,讓你直觀地看到最終效果。
通過上述步驟,你可以輕松地在公眾號中實(shí)現(xiàn)圖片的左右滑動效果,提升用戶的閱讀體驗(yàn)?,F(xiàn)在,就動手試試吧!
立即登錄
![](https://bdn.135editor.com/files/202108/images/83ed8ebdef793d0854bae4d3d39c4576.png)
![](https://bcn.135editor.com/files/20240808/images/bige_sheji_logo.png)
![](https://bcn.135editor.com/files/20240808/images/bige_ppt_logo.png)
![](https://bdn.135editor.com/files/202108/images/512f0cad-2a6d-4e17-9bae-d7897b4317ad.png)
![](https://bcn.135editor.com/files/202111/ML7FjG6g_78GB.png)
![](https://bcn.135editor.com/files/202111/E9ALEk9n_AfIQ.png)
![](https://bcn.135editor.com/files/202111/w7cHwLGp_kwDf.png)
![](https://bcn.135editor.com/files/202111/YgjpRXLC_PdNk.png)
![](https://bcn.135editor.com/files/202110/3xPaZTS5_4xpQ.png)
![](https://bcn.135editor.com/files/202110/fIYVFX6J_cxKX.png)
![](https://bcn.135editor.com/files/202110/BX3XrBwO_F6Me.png)
![](https://bcn.135editor.com/files/202110/bCMFZFKN_H7gr.png)
![](https://bcn.135editor.com/files/202110/uBXYFrI7_vOHc.png)
![](https://bcn.135editor.com/files/202205/f6KbZsA2_khY6.png)