Ebben a blogbejegyzésben részletesen bemutatom, hogyan készítettem el egy egyedi mozgó képgalériát Elementor segítségével, amelyben három oszlopban a képek le-föl mozognak. Ez a technika nagyszerű vizuális hatást kelt, különösen portfólió vagy galéria oldalak esetén.
Nézd meg videón is a folyamatot!
Ha szeretnéd lépésről lépésre követni a látványos, mozgó képgaléria elkészítését Elementorban, akkor nézd meg ezt a videót. Itt részletesen bemutatjuk a folyamatot, hogy könnyebben átlásd az egyes lépéseket: YouTube videó megtekintése.
Lépésről lépésre a képgaléria elkészítése
1. Konténerek létrehozása
Először is létrehoztam egy négy egységre osztott konténert az Elementorban. A fő konténer szélességét teljesre állítottam (100%), magasságát pedig 500px-re. A tartalom középre igazításához vízszintesen és függőlegesen is középre helyeztem az elemeket. A háttérszínt #f9f1e7-re állítottam, de ez természetesen tetszőlegesen módosítható.
Ezután létrehoztam négy kisebb blokkot a nagy konténeren belül. Az első kisebb blokk szélességét 15%-ra, magasságát 800px-re állítottam, és belső margót (15px) adtam hozzá. A túlcsordulás kezelésénél a “rejtett” opciót választottam, hogy a képek ne nyúljanak ki a konténerből. Ezt követően a stílusokat másoltam a többi két konténerre is.
2. Képek hozzáadása és animációk alkalmazása
Az első konténerben elhelyeztem egy képet, amelyet 170x250px méretűre állítottam, és 15px szegélysugárt, valamint 5%-os blur effektet alkalmaztam. A konténernek egyedi CSS kódot írtam, amely biztosítja, hogy a kép 15 másodperces ciklusokban függőlegesen mozogjon:
.image1 {
border-radius 10px;
box-shadow 0px 0px 10px 0px rgba(214.99999999999997, 238.99999999999997, 66.99999999999997, 0.17);
animation looping 15s infinite linear;
}
#column1 {
width 200px;
height 700px;
max-height 700px;
overflow hidden;
-webkit-mask-image linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
mask-image linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
@keyframes looping {
0% {
transform translateY(0);
}
100% {
transform translateY(-100%);
}
}
Ezután az egységnek egy cssID-t állítottam be, ami a következő volt: column1. Majd a hozzáadott képnek a css osztályába beírjuk, hogy image1. Ezt a képet háromszor duplikáltam, így négy kép lett egy konténerben. A mozgás folyamatos és sima lett az animáció alkalmazásával.
3. További konténerek beállítása
A második konténer esetében hasonló lépéseket követtem. A CSS kód némileg módosult, hogy a mozgás ellentétes irányú legyen, így a képek felfelé mozognak:
.image2 {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(214.99999999999997, 238.99999999999997, 66.99999999999997, 0.17);
animation: looping 16s linear 0s infinite none reverse;
animation-direction: reverse;
}
#column2 {
max-height: 700px;
height: 700px;
width: 200px;
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}
@keyframes looping{
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100%);
}
Ennél az elemnél is állítunk be cssID-t, ami a következő lesz: column2, és ugyanúgy, mint az első konténernél a képnek is állítunk be css osztályt image2-re.
A harmadik konténernél a mozgás sebessége változott, hogy eltérő tempójú legyen a látványosabb eredmény érdekében:
.image3 {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(214.99999999999997, 238.99999999999997, 66.99999999999997, 0.17);
animation: looping 20s linear 0s infinite none;
}
#column3 {
max-height: 700px;
height: 700px;
width: 200px;
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}
@keyframes looping{
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100%);
}
}
}
És végül, de nem utolsó sorban a 3. szekciónak a következő cssID-t állítjuk be: column3. A képnek a css osztálya az alábbi kód lesz: image3.
4. Szöveg hozzáadása
Az utolsó blokkot arra használtam, hogy egy kreatív, SEO-barát szöveget helyezzek el, amely az oldal tartalmát összefoglalja.
Befejezés
Ha szeretnél hasonló látványos elemeket létrehozni Elementorban, és segítségre van szükséged, keress minket bizalommal: hello@orotempo.hu