點(diǎn)擊展開-文末點(diǎn)擊全文漸進(jìn)換內(nèi)容(自定義觸發(fā))



    視頻教程



    01 添加素材效果

    在『互動(dòng)效果』欄目下的【點(diǎn)擊】里,點(diǎn)擊『點(diǎn)擊展開-文末點(diǎn)擊全文漸進(jìn)換內(nèi)容(自定義觸發(fā))』素材,將其添加到編輯區(qū)域。



    02 上傳圖片素材

    在編輯器右側(cè)上傳位移小元素。位移小元素的圖和背景圖需要寬度一致,使用透明底圖片,建議圖片高度按元素高度裁切,不要上下留出太多空白。

    image.png


    再上傳初始背景圖和變化后背景圖。長圖背景需要切成多張圖,所有圖片寬度一致,并且變化前后背景總高度需要一致image.pngimage.png


    設(shè)置分割線:小元素在移動(dòng)的過程中,新舊內(nèi)容切換會(huì)出現(xiàn)一個(gè)分割線,這個(gè)功能用來設(shè)置分割線在小元素圖片高度占比的位置,比如設(shè)置為50%,分割線就在圖片豎向的正中間位置;設(shè)置為100%,分割線就在圖片底部

    image.png




    03 效果設(shè)置

    設(shè)置初始背景圖觸發(fā)熱區(qū):鼠標(biāo)挪動(dòng)熱區(qū)設(shè)置到合適的大小和位置


    image.png


    展開動(dòng)畫時(shí)長:動(dòng)畫從上到下展開需要的時(shí)間

    元素移入時(shí)長:移動(dòng)小元素完全移入效果區(qū)域消耗的時(shí)間

    動(dòng)畫漸變時(shí)長:整個(gè)漸進(jìn)式動(dòng)畫從下到上更換過程持續(xù)時(shí)間

    image.png



    04 同步/導(dǎo)出到微信公眾號(hào)

    制作好的SVG文章可以通過使用『同步』或『導(dǎo)出』功能,保存到微信公眾號(hào)平臺(tái)。

    image.png


    點(diǎn)擊查看如何使用『同步』

    點(diǎn)擊查看如何使用『導(dǎo)出』



評(píng)價(jià)此內(nèi)容
有幫助
無幫助
感謝反饋,請(qǐng)問還有其他建議嗎? (選填)