Uwaga: Podane rozmiary obrazów zastępczych są jedynie przykładami. Możesz użyć obrazów o dowolnej wysokości.

Obrazy są definiowane w ustawieniach tła na karcie stylu w każdej sekcji. Ten sam obraz należy dodać do stanu statycznego i stanu po najechaniu kursorem. Stan statyczny powinien mieć pozycję tła wynoszącą: Left 50%, Top 0%. Stan najechania powinien mieć pozycję tła: Left 50%, Top 100%.

Możesz dostosować prędkość przewijania, dostosowując CSS w polu Custom CSS w wierszu nadrzędnym.

.wpziom-scroll-screen-2.kt-inside-inner-col {
transition: background-position 1slinear;
}

Dostosuj powyższą wartość 1s, aby kontrolować czas powrotu obrazu do stanu statycznego (po wyjściu myszą)

.wpziom-scroll-screen-2.kt-inside-inner-col:hover {
transition: background-position 10slinear;
}

Dostosuj powyższą wartość 10s, aby kontrolować prędkość przewijania obrazu po najechaniu kursorem (po najechaniu myszą)

Ponieważ nie wszystkie obrazy mogą mieć tę samą wysokość, w polu Custom CSS każdej sekcji znajduje się dodatkowy kod CSS, który dostosowuje początkową i końcową pozycję tła, aby cały zrzut ekranu był wyświetlany w ramce laptopa:

selector .kt-inside-inner-col {
background-position: 50% -1%;
}

Dostosuj wartość -1% powyżej, aby kontrolować pozycję początkową obrazu tła. Możesz użyć miejsc dziesiętnych, aby doprecyzować (np.: 1,25%)

selector:hover .kt-inside-inner-col {
background-position: 50% 103%;
}

Dostosuj powyższą wartość 103%, aby kontrolować pozycję końcową obrazu tła. Możesz użyć miejsc dziesiętnych, aby doprecyzować (np. 102,9%)

Możesz swobodnie korzystać z dostarczonego obrazu laptopa, ale jeśli zdecydujesz się go zmienić, jest kilka rzeczy, na które należy zwrócić uwagę:

Obraz powinien mieć przezroczysty obszar, w którym ma być widoczny zrzut ekranu, a przestrzeń wokół ramki obrazu powinna być wypełniona jednolitym kolorem, aby zapobiec wyświetlaniu części zrzutu ekranu w tle poza ramką.

Rozmiar obrazu tła w ustawieniach tła sekcji jest ustawiony na Szerokość: 85% zarówno w stanie statycznym, jak i po najechaniu kursorem. Konieczne może być dostosowanie tej szerokości, aby zrzut ekranu w tle był szerszy lub węższy, tak aby mieścił się w ramce bez odcinania boków.