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

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

Ερώτηση

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

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

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

6 απαντήσεις σε αυτή την ερώτηση

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

  • 0

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

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

 

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

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
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;
	 
	}
}

 

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
22 λεπτά πριν, WebDevGr είπε

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

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

 

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

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

  • Like 1

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
14 λεπτά πριν, WebDevGr είπε

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

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

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

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

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

Χρήσιμες πληροφορίες

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.