Ý tưởng ở đây là tạo ra sự xuất hiện của một trình chiếu mà không cần băng chuyền. Nói cách khác, chúng tôi đang tạo một loạt các hình ảnh theo dạng trượt từ trái sang phải và lặp lại khi đã đạt đến cuối các hình ảnh. Bí quyết là chúng tôi đang sử dụng một hình nền duy nhất với hoạt ảnh CSS để (…)
Ý tưởng ở đây là tạo ra sự xuất hiện của một trình chiếu mà không cần băng chuyền. Nói cách khác, chúng tôi đang tạo một chuỗi các hình ảnh theo dạng trượt từ trái sang phải và lặp lại khi đã đến cuối các hình ảnh.
Bí quyết là chúng tôi đang sử dụng một hình nền duy nhất với hoạt ảnh CSS để di chuyển nó trên màn hình và lặp lại khi hoàn tất. Điều này tạo ra ảo giác về một thư viện hình ảnh khi chúng ta thực sự đang sử dụng một hình ảnh duy nhất.
Thiết lập HTML
Dưới đây là bản thiết kế về cách HTML của chúng ta cần được cấu trúc:
Có hai yếu tố chúng tôi đang làm việc: một yếu tố chúng tôi đang gọi .containerphù hợp với chiều rộng chính xác của khung nhìn và một yếu tố khác mà chúng tôi đang gọi .sliding-backgroundnằm phía sau .containervà tràn nó. Về bản chất, chúng tôi đang sử dụng .containernhư một mặt nạ để ẩn toàn bộ chiều rộng của .sliding-backgroundnó khi nó cuộn trên màn hình.
Điều đó có nghĩa là chúng ta chỉ cần tạo hai phần tử trong đánh dấu HTML:
Định vị các phần tử
Hãy tiếp tục và thêm một số CSS sẽ định vị chính xác hai phần tử của chúng ta.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Của chúng tôi .containersử dụng thuộc overflowtính sẽ ẩn bất kỳ thứ gì có thể nhìn thấy bên ngoài nó. Hãy nghĩ về nó giống như một cây trồng trên một bức ảnh. Có thể có thêm những thứ bên ngoài thùng chứa, nhưng thùng chứa đang ngăn chúng ta nhìn thấy nó.
Đó là nơi chúng tôi .sliding-backgroundphát huy tác dụng. Nó được đặt thành một số chiều rộng vô lý sẽ làm tràn hầu hết các khung nhìn. Và đó là mẹo: nó phải là thứ có thể làm tràn thùng chứa. Trong trường hợp này, chúng tôi đang sử dụng 5076pxchiều rộng được chọn hơi tùy ý có thể làm tràn hầu hết các khung nhìn của trình duyệt.
Tạo hình nền
Chúng ta cần một hình ảnh nếu chúng ta đang tạo ảo giác về một thư viện trình chiếu, phải không? Đó là đơn hàng kinh doanh tiếp theo của chúng tôi.
Hãy nhớ cách chúng tôi đã đề cập rằng 5076pxchiều rộng được chọn hơi tùy ý cho nền trượt? Vâng, nó là tùy ý, nhưng có chủ ý theo nghĩa là nó chia hết cho 3 một cách độc đáo, phù hợp với thời gian cho một vòng lặp dài một phút, sẽ xuất hiện sau đó một chút. Điều đó có nghĩa là canvas cho hình nền của chúng ta là 5076 / 3hoặc 1692px. Cuối cùng, nền của chúng ta sẽ lặp lại tổng cộng ba lần trong một phút trong một vòng lặp vô hạn. Toán học để giành chiến thắng!
Các 500pxchiều cao thực sự là tùy ý. Đó có thể là bất cứ thứ gì bạn muốn và miễn là nó cũng là kích thước thực của tệp ảnh nền.
Tệp Photoshop được sử dụng để tạo hình nền cho bản trình diễn ở đầu chương này có sẵn để tải xuống nếu bạn đang tìm kiếm điểm bắt đầu.
Khi hình ảnh đã được lưu (và được tối ưu hóa!), Đây là những gì chúng tôi sẽ sử dụng làm hình nền trong CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Tuyệt quá! Điều đó mang lại cho chúng ta hình ảnh khổng lồ tràn ra vùng chứa và giờ đây có thể được sử dụng để cuộn trên toàn bộ quảng cáo màn hình.
Hoạt hình nền
Được rồi, hãy làm cho thứ này di chuyển. Chúng tôi muốn nó đi từ trái sang phải theo một vòng lặp đi lặp lại để tạo ra hiệu ứng liền mạch khiến hình ảnh tồn tại mãi mãi.
Đầu tiên, hãy xác định hoạt ảnh CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Chúng tôi đang sử dụng thuộc transformtính để định vị hình ảnh bên trái ở cạnh trái của vùng chứa khi hoạt ảnh bắt đầu, như sau:
Vào thời điểm hoạt ảnh hoàn thành, nó sẽ chuyển đổi vị trí một cách tiêu cực (từ trái sang phải) một lượng phù hợp với chiều rộng chính xác của hình ảnh của chúng ta. Và vì .sliding-backgroundchiều rộng gấp ba lần chiều rộng của hình ảnh thực, hình ảnh lặp lại ba lần trong khoảng từ 0% đến 100% trước khi lặp lại.
Lưu ý: lý do chúng tôi sử dụng bổ sung
background-positiontrên chính transformđể thực hiện chuyển động, động tác này hiệu quả hơn nhiều.
Được rồi, hãy làm tròn mọi thứ bằng cách gọi slidehoạt ảnh của chúng ta trên .sliding-backgroundlớp:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Các animationbất động sản chỉ thị .sliding-backgroundsử dụng các slidehình ảnh động và chạy nó trong một phút tại một thời điểm trong một đường thẳng, vòng lặp vô hạn.
Để tất cả chúng cùng nhau
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )