如何创建：视差滚动
学习如何使用 CSS 创建“视差”滚动效果。
视差滚动
视差滚动是一种网站设计趋势，其中背景内容（例如图像）在滚动时的移动速度与前景内容不同。点击下面的链接，查看有视差滚动和没有视差滚动的网站之间的区别。
Παρουσίαση με εφέ διαφορετικής ταχύτητας κύλισης
Παρουσίαση χωρίς εφέ διαφορετικής ταχύτητας κύλισης
Σημείωση:Η διαφορά ταχύτητας κύλισης δεν είναι πάντα αποτελεσματική στα κινητά εξαρτήματα/σμάρτφον. Ωστόσο, μπορείτε να χρησιμοποιήσετε την ερώτηση του μέσου για να απενεργοποιήσετε αυτό το εφέ στα κινητά εξαρτήματα (βλέπε τον τελευταίο παράδειγμα σε αυτή τη σελίδα).
Πώς να δημιουργήσετε το εφέ διαφορετικής ταχύτητας κύλισης
Χρησιμοποιήστε ένα στοιχείο κουτί και προσθέστε μια εικόνα φόντου με συγκεκριμένο ύψος στο κουτί. Στη συνέχεια, χρησιμοποιήστε background-attachment: fixed; Δημιουργία του πραγματικού εφέ διαφορετικής ταχύτητας κύλισης. Άλλες ιδιότητες φόντου χρησιμοποιούνται για το κέντρο και την τέλεια κλίμακα της εικόνας:
Παράδειγμα με pixel
<style>
.parallax {
/* Το χρησιμοποιούμενο εικόνα */
background-image: url("img_parallax.jpg");
/* Ρύθμιση συγκεκριμένου ύψους */
min-height: 500px;
/* Δημιουργία του εφέ διαφορετικής ταχύτητας κύλισης */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Κουτί στοιχείου -->
<div class="parallax"></div>
Το παραπάνω παράδειγμα χρησιμοποιεί pixel για να ρυθμίσει το ύψος της εικόνας. Αν θέλετε να χρησιμοποιήσετε το ποσοστό, όπως 100%, ώστε η εικόνα να ταιριάζει ολόκληρη στην οθόνη, ρυθμίστε το ύψος του κουτιού της διαφοράς κύλισης στο 100%. Σημείωση: Πρέπει επίσης να ρυθμίσετε height: 100%; Εφαρμόζεται στα <html> και <body>:
Παράδειγμα με ποσοστό
body, html {
height: 100%;
}
.parallax {
/* Το χρησιμοποιούμενο εικόνα */
background-image: url("img_parallax.jpg");
/* Πλήρης ύψος */
height: 100%;
/* Δημιουργία του εφέ διαφορετικής ταχύτητας κύλισης */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Κάποια κινητά εξαρτήματα χρησιμοποιούν background-attachment: fixed; θα προκύψει πρόβλημα. Ωστόσο, μπορείτε να χρησιμοποιήσετε την ερώτηση του μέσου για να απενεργοποιήσετε το εφέ διαφορετικής ταχύτητας κύλισης στα κινητά εξαρτήματα:
Παράδειγμα
/* Απενεργοποίηση της διαφορετικής ταχύτητας κύλισης για όλες τις ταμπλέτ και τα κινητά τηλέφωνα. Αν χρειαστεί, μπορείτε να προσθέσετε ή να μειώσετε pixel */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
Στην παραπάνω κώδικα, όταν το πλάτος της οθόνης είναι ή μικρότερο από ή ίσο με 1366 pixel, το εφέ διαφορετικής ταχύτητας κύλισης θα απενεργοποιηθεί, το οποίο είναι κατάλληλο για την πλειοψηφία των ταμπλέτ και των κινητών τηλεφώνων. Αυτό γίνεται με την αλλαγή .parallax 类的 background-attachment 属性从 fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。
