Προσθήκη εφέ κύλισης 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/wp-content/uploads/https://cdn.iguru.gr//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

iGuRu.gr The Best Technology Site in Greecefgns

κάθε δημοσίευση, άμεσα στο inbox σας

Προστεθείτε στους 2.098 εγγεγραμμένους.

Written by giorgos

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

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

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:
1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
2. Προκαλεί βλάβη σε ανηλίκους.
3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους .
5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).