1. <strong id="6hpmh"><pre id="6hpmh"></pre></strong>
    <strong id="6hpmh"></strong>

  2. <progress id="6hpmh"></progress>

    公眾號沉浸式閱讀排版怎么做?

    這樣的效果利用SVG組件也能復刻,它主要利用了多次點擊換圖展開SVG+點擊換圖SVG相結合完成了這一篇的交互效果。雖然都是我們常見的SVG,但這篇文章的創意卻是值得我們好好學習的地方。


    公眾號沉浸式閱讀效果展示(svg效果)





    gif圖展示

    《2030雀巢有個大大大計劃》

    點擊綠色文字跳轉閱讀


    01
    創意分析

    本篇文章圍繞再生農業計劃展開,分別講解了雀巢在再生農業方面的實施情況,從農林業、土地恢復、綠色邊緣等角度具體敘述。整體設計以扁平畫風格為主,通過橫屏排版的方式來展示文章的主要內容,讓原本看似枯燥的內容以這種動畫的形式展示,增強了文章的可讀性,讓用戶能保持耐心繼續閱讀。


    02
    SVG分析


    在這篇文章的排版設計上看,文章整體設計精致,可能很多人會覺得只有靠定制才能實現,其實這篇文章利用SVG組件也能復刻,它主要利用了多次點擊換圖展開SVG+點擊換圖SVG相結合完成了這一篇的交互效果。雖然都是我們常見的SVG,但這篇文章的創意卻是值得我們好好學習的地方。


    大家通常在文章中對于點擊換圖SVG的使用都是比較分散的,只是作為文章的一個版塊,與其他內容的銜接性不強,而這篇文章中,卻將簡單的點擊換圖SVG融入到橫版的長圖設計中,并與多次點擊換圖展開SVG結合,形成完整的推文效果,帶著用戶沉浸式的瀏覽閱讀。所以我們在以后的創意中也要養成整體思維。


    03
    使用講解


    在135編輯器首頁,選擇左側菜單欄【SVG編輯器】進入。



    進入網頁后,選擇【互動效果】—素材中找到多次點擊換圖展開SVG,ID:112,點擊換圖SVG,ID:4,詳細制作教程如下:


    多次點擊換圖展開教程:點擊查看


    點擊換圖SVG使用教程:點擊查看






    文章申明:本文章轉載自互聯網公開渠道,如有侵權請聯系我們刪除
    文章評價
    登錄后可以評論
    立即登錄
    分享到
    亚洲午夜高清拍精品|亚洲永久精品|亚洲_亚洲成av人片一区二区蜜柚_国产精品无码中文_秋霞午夜久久午夜精品
    1. <strong id="6hpmh"><pre id="6hpmh"></pre></strong>
      <strong id="6hpmh"></strong>

    2. <progress id="6hpmh"></progress>