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

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

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

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

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

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

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

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

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

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

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

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

.parallax-iguru {  
background-image: url("https://cdn.iguru.gr/files/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 της σελίδας σας.

  Windows 10: Προβολή και διαγραφή ιστορικού δραστηριοτήτων

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

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

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

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

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

Εγγραφή στο iGuRu.gr μέσω email

Το email σας για την αποστολή κάθε νέας δημοσίευσης

Ακολουθήσετε μας στο Google News iGuRu.gr at Google news

Αφήστε μια απάντηση

Your email address will not be published.

5  +  4  =  

Previous Story

Linux Kernel 4.15 καλά νέα και κακά νέα από τον Linus Torvalds

Next Story

Firefox 58.0.1 (Quantum) λήψη πριν την επίσημη κυκλοφορία