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


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

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

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

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

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

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

Στο παράδειγμά μας χρησιμοποιήσαμε την παρακάτω εικόνα:background design - Προσθήκη εφέ κύλισης Parallax στην ιστοσελίδα σας, χωρίς plugins

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

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

<div class="parallax-iguru">
<div class="parallax-iguru-content">
 <div align="center"><strong>iGuRu.gr :     ,   Tweaks. .</strong></div></div></div>

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

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

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

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

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

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

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


Λήψη νέων αναρτήσεων μέσω email:

Διαβάστε τις Τεχνολογικές Ειδήσεις από όλο τον κόσμο, με την εγκυρότητα του iGuRu.gr

Ακολουθήσετε μας στο Google News

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

Your email address will not be published.