Προς το περιεχόμενο

Προτεινόμενες αναρτήσεις

Δημοσ.

καλησπέρα είδα σε μια σελίδα https://www.a21.org/content/greece/gnqxx4?fbclid=IwAR1ie39nbKab2rxW5fpKG450TefZXoS6nW_bsx4vL8qJKkpxubq-XXeKnOE

όταν πηγαίνεις προς τα κάτω εμφανίζονται/χανονται εικόνες πίσω απο το κείμενο. Αυτό πως γίνεται ακριβώς? εγώ ασχολούμε ερασιτεχνικά με το WP και εχω κατασκευάσει 3 sites

Δημοσ.
17 ώρες πριν, Eranor είπε

Λέγεται parallax scrolling effect και μπορεί να γίνει αρκετά εύκολα με js .

https://www.mockplus.com/blog/post/parallax-scrolling-websites

εδω για μερικές ιδέες

Λοιπόν βρήκα και το έκανα με css.. δούλεψε αλλά μόνο σε desktop βγήκε σωστά. Προσπάθησα να το κάνω resposive να γίνει κ σε mobile αλλά μάλλον κάτι έκανα λάθος με media query.

Μέσα στο WP addicional CSS έγραψα τον παρακάτω κώδικα

/* parallax effect*/

.paragraph {
max-width: 960px;
margin: 0 auto ;
background: #f9f9f9;
font-size:24px;
padding:25px;
}

.parallax1{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:500px;



}

.parallax2{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos2.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:500px;
	 
}
.parallax3{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:500px;
	 
	}
@media only screen and (max-width: 600px)
   {
	
	.paragraph {
max-width: 960px;
margin: 0 auto ;
background: #f9f9f9;
font-size:19px;
padding:0;
}
	.parallax1{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:250px;



}

.parallax2{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos2.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:250px;
	 
}
.parallax3{
background:url('https://itsallaboutxanthi.gr/wp-content/uploads/2019/10/manos3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height:250px;
	 
	}
}

 

Δημοσ.
22 λεπτά πριν, WebDevGr είπε

 Το background-attachment fixed δεν δουλεύει στο mobile

Αν βάλω χωρίς attachment fixed θα δουλέψει κανονικά το parallax?

 

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...