Cum se Creează un Site cu Derulare Orizontală [Avansat PRO]

Cuprins: arată

Cum se Creează un Site cu Derulare Orizontală? În acest tutorial, învățăm cum să creăm un site web cu defilare orizontală adăugând CSS și Javascript personalizat în Elementor. Vom începe cu un site web proiectat vertical și vă vom prezenta pas cu pas cum să îl transformați într-un aspect orizontal, păstrând în același timp afișajul vertical pentru dispozitivele mobile și tablete.

Acest tutorial va acoperi:

✔︎ Crearea de secțiuni care sunt potrivite pentru un design de defilare orizontală
✔︎ Cum să schimbați aspectul paginii de la vertical la orizontal folosind CSS
✔︎ Cum să adăugați cod Javascript personalizat prin funcția de cod personalizat
✔︎ Și multe altele!

Pentru confortul dvs. urmăriți acest Tutorial în format Video. Video creat de echipa de asistență Elementor.

Code CSS

.elementor-section-wrap{
display: inline-flex;
}

.elementor-section{
width:100vw;
}

.custom-width{
width: 100px;
}

body{
overflow-y: hidden;
overscroll-behavior-y: none;
}

@media (max-width:768px){
.elementor-section-wrap{
display: block;
}
}

Cod Javascript (nu uitați să adăugați etichetele scriptului de deschidere și de închidere):

function replaceVerticalScrollByHorizontal( event ) {
if ( event.deltaY !== 0 ) {
window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
event.preventDefault();
}
}

const mediaQuery = window.matchMedia( ‘(min-width: 770px)’ );
if ( mediaQuery.matches ) {
window.addEventListener( ‘wheel’, replaceVerticalScrollByHorizontal );
}

Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.