ερώτηση περί WP js

[Deadsell]

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

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

[Eranor]

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

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

 

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

[Deadsell]

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;
	 
	}
}

 

[WebDevGr]

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

[Deadsell]

22 λεπτά πριν, WebDevGr είπε

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

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

 

[WebDevGr]

Η καλύτερη λύση είναι να το κάνεις με κάποιο js script όπως πχ https://pixelcog.github.io/parallax.js/

[Deadsell]

14 λεπτά πριν, WebDevGr είπε

Η καλύτερη λύση είναι να το κάνεις με κάποιο js script όπως πχ https://pixelcog.github.io/parallax.js/

τωρα μαθαινω js θα ειναι καλη εξασκηση.. εγινε θα το κοιταξω με javascript