👉 Nézd meg a teljes folyamatról készült YouTube-videónkat itt: Kattints ide!
✨ Szeretnél egy olyan effektet, ami garantáltan lenyűgözi weboldalad látogatóit? Ebben a blogbejegyzésben egy szuper egyszerű, mégis látványos kártya effekttel foglalkozunk, amit Elementor Pro segítségével készítettünk el. A görgetésre egymásra simuló kártyák nemcsak modern megjelenést kölcsönöznek, hanem interaktív élményt is nyújtanak a felhasználóknak. Ráadásul az elkészítése pofonegyszerű! 🤩
💡Hogyan készítsd el a kártya effektet?
1️⃣ Flexbox beállítása
Először hozz létre egy flexboxot az Elementor Pro segítségével:
- Állítsd be a flexbox hátterét az oldalad háttérszínéhez igazítva.
- A szélességét állítsd teljes szélességre, a magasságot pedig 100 vh-ra.
- A flexbox belsejében a tartalmakat helyezd el vízszintesen és függőlegesen középre.
2️⃣ Belső konténer kialakítása
A flexboxon belül hozz létre egy belső konténert, amely a kártyákat fogja tartalmazni.
- Állítsd be a méreteket igényeid szerint: példánkban a szélességet 75%-ra, a magasságot pedig 50 vh-raállítottuk.
- Ezután szabjad testre a konténert a weboldalad arculatához illően.🎨
Mi példaként egy utazási iroda tematikájú designt hoztunk létre, amit a blog végén található YouTube-videónkban is megnézhetsz. 🗺️✈️
3️⃣ Kártyák létrehozása és testreszabása
- A létrehozott belső konténert duplikáld annyiszor, ahány kártyát szeretnél használni. Mi három kártyával dolgoztunk.
- Testreszabhatod az egyes kártyák szövegeit, képeit és hátterét az oldalad tartalmának megfelelően.
4️⃣ Animáció és effekt beállítása
Az effekt alapját a Motion Effects beállításai adják:
- Első kártya:
- Állítsd be a z-indexet 1-re.
- A Motion Effects opcióknál válaszd ki a sticky funkciót, és állítsd be top-ra.
- Az offset értékéhez írj 50-et, és pipáld be a „Stay in column” lehetőséget. Ez biztosítja, hogy a kártya a konténeren belül maradjon.✅
- Második és harmadik kártya:
- A következő kártyákhoz a z-index értéket emeld 1-gyel, tehát a második kártyánál legyen z-index 2, a harmadiknál z-index 3.
- Az offset értékét is növeld 50-nel minden egyes kártyánál: például a másodiknál 100, a harmadiknál 150lesz.
🌟 Egyedi dizájn ötletek az effekthez
Ez a görgető kártya effekt igazán sokoldalúan használható. Néhány példa, hol működik kiválóan:
- Utazási oldalak: Inspiráló képekkel és ajánlatokkal teli kártyák.
- Portfóliók: Projektjeid látványos bemutatása egyedi stílusban.
- E-kereskedelmi oldalak: Termékek kiemelése különleges effekt segítségével.
Készen állsz, hogy kipróbáld ezt a szuper effektet? Mutasd meg a kreativitásodat, és oszd meg velünk az elkészült munkád a hello@orotempo.hu email címen! 💬 Ha pedig inspirációra van szükséged, ne felejtsd el megnézni a YouTube-videónkat! 🎥