Trang web DayTrip sử dụng hiệu ứng gọn gàng trên tiêu đề trang của nó làm biến dạng hình nền với kết cấu hoạt hình, có hạt. Hiệu ứng là tinh tế nhưng tạo ra một sự rung cảm bụi bặm, hoài cổ.
Hiệu quả là rất tinh tế. Bạn có thể thấy sự khác biệt ở chỗ hiệu ứng được đặt ở bên phải và bị tắt ở bên trái:
Chúng ta có thể tạo ra cùng một hiệu ứng mộc mạc với một hình ảnh và một chút CSS.
Bước 1: Thiết lập mọi thứ
Đầu tiên, hãy thiết lập tiêu đề trang của chúng tôi. Chúng ta sẽ sử dụng một mẫu chung trong đó hình nền chiếm toàn bộ không gian.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Đây là một ví dụ để giúp chúng tôi bắt đầu:
Xem Pen RpLKdx của Geoff Graham (@geoffgraham) trên CodePen.
Bước 2: Chọn họa tiết
Tiếp theo, chúng ta cần một hình ảnh có kết cấu sần sùi. Bạn có thể tự tạo cái này. Mẫu tinh tế cũng có một số tùy chọn đẹp, bao gồm tùy chọn này mà chúng tôi sẽ sử dụng cho bản trình diễn của mình. Lưu ý rằng hình ảnh không cần phải lớn. Một cái gì đó ở khu vực lân cận của 400pxquảng trường sẽ thực hiện thủ thuật.
Ý tưởng là chúng tôi sẽ phủ các kết cấu sần sùi lên trên .page-header. Chúng ta có thể sử dụng :afterphần tử giả trên .page-headernên không cần tạo phần tử khác.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Lưu ý rằng chúng tôi đã đặt a heightvà widthtrên phần tử giả cũng như a topvà leftđể nó thực sự vượt quá ranh giới của tiêu đề trang và được căn giữa. Chúng tôi muốn làm điều này để lớp kết cấu sần sùi có chỗ để di chuyển mà không làm lộ lớp tiêu đề trang bên dưới. Điều này có nghĩa là các lớp được sắp xếp giống như thế này:
Bây giờ chúng ta có một tiêu đề trang lớn đẹp với hình ảnh sần sùi ở trên cùng:
Xem Pen evGvKg của Geoff Graham (@geoffgraham) trên CodePen.
Bước 3: Tạo hoạt ảnh cho Lớp hạt
Điều cuối cùng chúng ta cần làm là tạo hiệu ứng cho lớp sần sùi. Đây là hiệu ứng mà chúng tôi đang theo đuổi và mang lại cho tiêu đề trang sự hấp dẫn tương tự, cổ điển.
Trang DayTrip sử dụng phần sau để xác định khung chính hoạt ảnh:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Thật khó để hình dung mã đó có nghĩa là gì, nhưng về cơ bản nó di chuyển lớp sần trên cùng theo mô hình zig-zag. Dưới đây là một minh họa về những gì trông như thế nào ở quy mô nhỏ hơn:
Bây giờ tất cả những gì chúng ta phải làm là áp dụng các khung hình chính .page-header:afterđể xem nó có hiệu lực. Chúng tôi sẽ đặt hoạt ảnh để phát trong 8 giây và lặp lại vô hạn:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Để tất cả chúng cùng nhau
Đây là đoạn mã đầy đủ với tất cả các phần được đặt sẵn. Lưu ý rằng chúng tôi đang giả định việc sử dụng Autoprefixer cho tất cả tiền tố của nhà cung cấp.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Xem Hiệu ứng hạt hoạt hình bằng bút của Geoff Graham (@geoffgraham) trên CodePen.