Gusto mo bang magdisenyo ng background Divi animated kapag nag-scroll sa pahina salamat sa mga maskara at pattern? Ang tutorial na ito ay para sa iyo...
Pagdaragdag ng scroll animation sa Divi at ang mga background mask at pattern nito ay isang kapaki-pakinabang na tip sa disenyo na maaaring magbigay ng bagong buhay sa iyong mga disenyo sa background. Website.
Sa tutorial na ito, ipapakita namin sa iyo kung paano gumawa at mag-animate ng mga mask at background pattern gamit ang mga opsyon sa pag-scroll ng Divi (walang custom na code na kailangan).
Upang gawin ito, gagawa kami ng isang lumulutang na layer ng background gamit ang isang linya Divi na gagamitin namin para i-animate ang mga mask at background pattern kapag nag-scroll ang isang user sa isang seksyon ng nilalaman.
Sa tingin namin magugustuhan mo ang resulta.
Magsimula tayo!
pagsisiyasat
Narito ang isang mabilis na paglalarawan kung ano ang magiging hitsura ng background scroll animation para sa tutorial na ito.
Ang konsepto
Ang konsepto ng disenyong ito ay hindi dapat napakahirap unawain. Nagsisimula kami sa isang seksyon na may gradient na background.
Pagkatapos ay lumikha kami ng isang linya na nakaposisyon (ganap) upang ito ay ganap na sumasakop sa seksyon (tulad ng isang overlay). Maaari tayong magdagdag ng pattern sa background sa row.
Susunod na maaari naming magdagdag ng isang background mask sa hanay.
Pagkatapos ay idagdag namin scroll effect sa row at column (tulad ng scale at rotation) na magpapasigla sa pattern at mask nang hiwalay sa background ng seksyon.
Kapag itinago namin ang overflow ng seksyon, ang nakikita lang namin ay ang animation na nakapaloob sa loob ng seksyon.
Magsimula tayo sa pamamagitan ng paglikha ng isang pahina gamit ang Divi Builder
Upang makapagsimula, kakailanganin mong gawin ang sumusunod:
Mula sa dashboard ng WordPress, pumunta sa Mga Pahina> Magdagdag ng Bago upang lumikha ng isang bagong pahina.
Bigyan ito ng pamagat na may katuturan sa iyo at i-click paggamit Divi Ang nagpapagawa
pagkatapos i-click Simulan ang Pagbuo (Bumuo Mula sa Scratch)
Pagkatapos nito, magkakaroon ka ng isang blangkong canvas upang simulan ang pagdidisenyo sa Divi.
Basahin din ang: Divi: Paano gamitin ang "Gradient Builder" para pagandahin ang iyong mga larawan
Paano Gumawa ng Animated na Pag-scroll sa Background na Mga Mask at Pattern gamit ang Divi
Disenyo ng background ng seksyon
Una, lalaktawan namin ang paggawa ng isang linya at diretsong pumunta sa pag-edit ng kasalukuyang default na seksyon sa tagabuo ng tema.
Upang gawing punan ng aming disenyo sa background ang browser, kailangan naming magdagdag ng patayong taas sa seksyon. Ang isang simpleng paraan upang gawin ito ay magdagdag ng pinakamababang taas sa seksyon.
Buksan ang mga setting ng seksyon. Sa ilalim ng tab Disenyo, i-update ang pinakamababang taas at alisin ang padding gaya ng sumusunod:
- Margin: 80 vh (Itaas at Ibaba)
- Padding: 0px (Itaas at Ibaba)
Pagdidisenyo ng gradient ng background para sa seksyon
Maaari na kaming magdagdag ng custom na background gradient sa seksyon.
Upang idagdag ang mga unang gradient stop, tiyaking bukas ang mga setting ng seksyon sa ilalim ng tab nilalaman. Pagkatapos ay piliin ang tab Gradient ng Background at i-click upang magdagdag ng bagong gradient. Magdaragdag ito ng dalawang default na gradient na kulay. Idagdag ang sumusunod na Gradient Stop na may kulay at posisyon tulad ng sumusunod:
- Mga Paghinto ng Gradient:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Pagkatapos ay baguhin ang direksyon ng linear gradient:
- Direksyon ng Gradient: 270 deg
Magdagdag ng mga hilera sa seksyon
Ngayong nasa lugar na ang aming seksyon, magdagdag ng isang hanay na hilera sa seksyon. Gagamitin ang linyang ito para sa aming background mask at pattern scroll animation.
Susunod, i-duplicate ang linyang kakagawa mo lang. Ang pangalawang (nadoble) na linyang ito ay gagamitin para sa aming nilalaman gaya ng karaniwan mong ginagawa.
Dapat ay mayroon ka na ngayong nangungunang linya para sa background scroll animation at isang linya para sa nilalaman Normal.
I-customize ang linya
Ngayon na handa na ang aming background gradient ng seksyon, maaari naming ibaling ang aming pansin sa linyang gagamitin namin para sa aming background-on-scroll animation.
Buksan ang mga setting ng linya. Sa ilalim ng tab Advanced, i-update ang sumusunod:
- Posisyon: Ganap
Papayagan nito ang linya na mag-overlap sa seksyon nang hindi kumukuha ng anumang totoong espasyo sa dokumento.
Ngayon ang kailangan lang nating gawin ay i-update ang taas at lapad upang maabot nila ang buong lapad at taas ng seksyon. Lilikha ito ng overlay na kailangan namin at ang aming pangalawang layer ng disenyo ng background.
Sa ilalim ng tab Disenyo, i-update ang mga opsyon sa pagpapalaki gaya ng sumusunod:
- Aquasize Column Heights: OO
- Lapad: 100%
- Pinakamataas na Lapad: 100%
- Taas: 100%
- Padding: 0px (Itaas at Ibaba)
Ngayon ay maaaring hindi mo makita ang linya, ngunit ito ay ganap na sumasaklaw sa background ng buong seksyon.
Lumikha ng pattern sa background para sa linya
Sa halimbawang ito idaragdag namin ang pattern Konfeti bilang background ng linya.
Buksan ang mga setting ng linya. Sa ilalim ng opsyon likuran, piliin ang tab Pattern ng background at i-update ang sumusunod:
- Pattern ng Background: Confetti
- pattern:
- Kulay: #f6bef7
- Sukat: Custom na Sukat
- Lapad: 35 vw
- Ulitin ang Pinagmulan: Gitna
MAGKAROON : Tinitiyak ng paggamit ng VW length unit na ang pattern ay magiging sukat sa browser, na pinapanatili ang disenyo na pare-pareho at tumutugon.
Magdagdag ng Mga Scroll Effect sa Linya
Ngayon na ang aming pattern sa background ay nasa lugar, maaari kaming magdagdag ng mga scroll effect sa linya.
Pumunta sa tab Advanced. Sa ilalim ng opsyon Mga Epekto ng scroll, i-update ang sumusunod:
Piliin ang tab Pahalang na Paggalaw at i-update ang sumusunod:
- Paganahin ang Pahalang na Paggalaw: OO
- Simula Offset: 0,5 (sa 0%)
- Mid Offset: 0 (mula 40% hanggang 60%)
- Pagtatapos ng Offset: -0,5 (sa 100%)
Ililipat nito ang pattern ng background ng linya simula 50 pixels sa kaliwa at magtatapos sa 50 pixels sa kanan.
Piliin ang tab na "Scale Up and Down" at i-update ang sumusunod:
- Paganahin ang Pag-scale Pataas at Pababa: YES
- Panimulang Scale: 150% (sa 0%)
- Mid Scale: 100% (mula 40% hanggang 60%)
- Ending Scale: 150% (sa 100%)
Isusukat nito ang pattern ng background ng row kapag nag-i-scroll.
Piliin ang tab « Pagpapaikot » at i-update ang sumusunod:
- Paganahin ang Pag-ikot: OO
- Panimulang Pag-ikot: 10 degrees (sa 0%)
- Kalagitnaan ng Pag-ikot: 0 deg (mula 40% hanggang 60%)
- Pagtatapos ng Pag-ikot: -10 degrees (sa 100%)
KEY TIP: Kailangan mong panatilihing pinakamaliit ang pag-ikot o nanganganib kang magpakita ng mga puwang kung saan ang linya ay hindi umaabot sa seksyon. Ang isang mahusay na tuntunin ng hinlalaki ay upang taasan ang sukat kung gusto mong taasan ang pag-ikot. Papayagan nito ang linya na mag-pivot sa seksyon nang hindi inilalantad ang mga gilid.
Magdagdag ng background mask na may mga scroll effect sa column
Kapag kumpleto na ang aming row, handa na kaming magdagdag ng background mask na may mga scroll effect sa column ng parehong row. Para magsimula, magdagdag tayo ng background mask.
Upang gawin ito, buksan ang setting ng column. Sa ilalim ng tab BackgroundMask, i-update ang sumusunod:
- Mask: Layer Blob
- Kulay: #ffffff
- Pagbabagong Mask: Pahalang na I-flip, Inversion
Magdagdag ng mga scroll effect sa column
Ngayon na ang aming background mask ay nasa lugar, maaari kaming magdagdag ng mga scroll effect sa column. Tandaan na ang column ay mayroon nang mga scroll effect na minana mula sa parent row.
Ang gagawin lang natin ay paikutin ang column sa kabilang direksyon ng row para makamit ang higit pang paghihiwalay ng mask at pattern para sa tagal ng scroll.
Pumunta sa tab Advanced. Sa ilalim ng mga pagpipilian Mga Epekto ng scroll, piliin ang tab Rotating at i-update ang sumusunod:
- Paganahin ang Pag-ikot: OO
- Panimulang Pag-ikot: -15 degrees (sa 0%)
- Kalagitnaan ng Pag-ikot: 0 deg (mula 40% hanggang 60%)
- Pagtatapos ng Pag-ikot: 15 degrees (sa 100%)
Itago ang overflow ng seksyon
Sa kasalukuyan, ang linya ay nananatiling nakikita sa tuwing nagiging sanhi ito ng pag-scroll sa labas ng seksyon.
Upang linisin ito, kailangan nating itago ang overflow ng seksyon. Upang gawin ito, buksan ang mga setting ng seksyon. Sa ilalim ng tab Advanced, i-update ang mga opsyon sa visibility gaya ng sumusunod:
- Horizontal Overflow: Nakatago
- Vertical Overflow: Nakatago
Ngayon ay mas maganda na.
Tingnan din: Divi: 12 kumbinasyon ng mga maskara at mga pattern ng background
Pagdaragdag ng nilalaman sa linyang ginawa para sa layuning ito
Sa puntong ito, kumpleto na ang background mask at pattern scroll animation. Ang kailangan lang nating gawin ay idagdag ang nilalaman na gusto natin sa linyang ginawa natin kanina para sa nilalaman.
Para sa halimbawang ito, nagdagdag kami ng dummy na pamagat para makita namin kung ano ang magiging hitsura ng background animation sa static na text.
Pangwakas na resulta
Tingnan natin ang huling resulta ng aming disenyo.
I-download ang DIV ngayon!!!
Konklusyon
Nakapagtataka kung gaano kadaling lumikha ng mga magagandang background gamit ang mga pagpipilian sa background ng Divi. Dagdag pa, ang pagdaragdag ng animation na may mga scroll effect ng Divi ay nagdudulot ng bagong buhay sa mga disenyong ito.
Para sa ibang hitsura, maaari mong subukan ang iba't ibang mga maskara at pattern sa bawat layer. Kung gusto mo ng karagdagang inspirasyon kung paano gamitin ang mga maskara at mga pattern background, tingnan ang mga ito 12 background mask at mga kumbinasyon ng pattern
Umaasa kami na ang tutorial na ito ay magbibigay inspirasyon sa iyo para sa iyong mga susunod na proyekto ng Divi. Kung mayroon kang anumang mga alalahanin o mungkahi, hanapin kami sa ang seksyon ng mga komento upang talakayin ito.
Maaari ka ring kumonsulta aming mga mapagkukunan, kung kailangan mo ng maraming mga elemento upang maisagawa ang iyong mga proyekto ng paglikha ng mga site sa Internet.
Huwag mag-atubiling kumunsulta din sa aming gabay sa Paglikha ng blog ng WordPress o ang isa sa Divi: ang pinakamahusay na tema ng WordPress sa lahat ng oras.
Ngunit pansamantala, ibahagi ang artikulong ito sa iyong iba't ibang mga social network.
...
