Προσθήκη εφέ κύλισης Parallax στην ιστοσελίδα σας, χωρίς plugins

Το Parallax Scroll, ή Parallax εφέ κύλισης χρησιμοποιήθηκε για πρώτη φορά στον χώρο του animation και του video gaming. Ο όρος μάλλον προέρχεται από το Ελληνικό παράλλαξη, που σημαίνει αλλαγή. Παρακάτω θα δούμε πως μπορείτε να το χρησιμοποιήσετε στο web design του CMS σας, χωρίς την προσθήκη κάποιου plugin.

H τεχνική του Ρarallax χρησιμοποιείται από επαγγελματίες και μη, για την κατασκευή ιστοσελίδων παρουσίασης προϊόντων, εταιρειών, έργων με ένα εντυπωσιακό αφηγηματικό (Parallax) τρόπο.

Δες περισσότερα άρθρα του iGuRu.gr όταν αναζητάς ειδήσεις στην Google.

Το iGuRu.gr προτιμώμενη πηγή

Ας δούμε ένα μικρό παράδειγμα, και θα προχωρήσουμε με τον κώδικα

Ας δούμε και τον κώδικα.

Αρχικά θα πρέπει να βρείτε την εικόνα που θέλετε να χρησιμοποιήσετε. Όταν βρείτε την εικόνα, την ανεβάζετε στο server σας αντιγράφοντας το link.

Στο παράδειγμά μας χρησιμοποιήσαμε την παρακάτω εικόνα:

Μετά θα πρέπει να επιλέξετε το σημείο που θέλετε να εμφανιστεί το εφέ.

Στο σημείο επιλογής σας αντιγράψτε τον παρακάτω κώδικα, αλλάζοντας το κείμενο με ότι θέλετε να δημοσιεύσετε.

 
iGuRu.gr : Νέα Τεχνολογίας σε πραγματικό χρόνο, Απόψεις και Tweaks. Μόνο.
 

Ας προσθέσουμε και το απαραίτητο CSS. Μπορείτε να προσθέσετε τις παρακάτω σειρές στο style.css του theme που χρησιμοποιείτε:

.parallax-iguru {  
background-image: url("https://cdn.iguru.gr/wp-content/uploads/2018/01/background-design.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-1px;
margin-right:-1px;
}
 
.parallax-iguru-content { 
width:60%;
margin:0 auto;
color:#075400;
padding-top:20px; 
} 

Στο css μπορείτε να αλλάξετε τις τιμές margin-left και margin-right με μεγαλύτερους (όμοιους) αριθμούς για να δείτε το εφέ σε μεγαλύτερο width. Σε περίπτωση που το επιθυμείτε μπορείτε να καλύψετε όλο το width της σελίδας σας.

Μεγαλύτερη τιμή στο padding-top θα δώσει περισσότερο ύψος στην εικόνα πάνω από τα γράμματα.
Αν τώρα προσθέσετε επιπλέον και ένα padding-bottom με την ίδια τιμή που χρησιμοποιείτε στο top θα σας δώσει το ίδιο ύψος και κάτω από τα γράμματα.

.parallax-iguru-content { 
width:60%;
margin:0 auto;
color:#075400;
padding-top:40px; 
padding-bottom:40px; 	
} 

Αυτό ήταν. Μόλις προσθέσατε εφέ κύλισης Parallax στη σελίδα σας!

Οι πιο περίεργες αρχές προγραμματισμού

Εξοικονομείστε χώρο στο δίσκο των Windows 10

giorgos

Ο Γιώργος ακόμα αναρωτιέται τι κάνει εδώ….