Cách tạo Footer chỉ dành cho CSS
Thông thường, chúng ta cần JavaScript để thực hiện các hiệu ứng cuộn liên quan đến các hành động khác nhau của người dùng trên các trang web. Kịch bản làm công việc của theo dõi cách di chuyển lên hoặc xuống mất một trang, và kích hoạt một hành động khi đạt đến một chiều cao ngưỡng.
Nó không phải là một điều xấu khi sử dụng JavaScript để cuộn các hiệu ứng. Trong thực tế có nhiều trường hợp phức tạp hơn không thể giải quyết nếu không có JavaScript. Tuy nhiên có CSS hack đôi khi có thể thay thế các tập lệnh này.
Bài này sẽ cho bạn thấyw để tạo chân trang tiết lộ hiệu ứng trên cuộn trang bằng CSS. Chúng tôi sẽ sử dụng hai trường hợp sử dụng để chứng minh điều này: một cho toàn bộ trang (xem bản demo) & một cho các thành phần trang riêng lẻ, chẳng hạn như các bài viết.
Toàn trang
Chúng ta cần tạo một chân trang xuất hiện từ bên dưới trang trong khi người dùng đang cuộn xuống Ngoài ra, khi họ đang cuộn trang sao lưu chân trang cần phải được giấu đi bên dưới trang một lần nữa.
Để đạt được mục tiêu này, trước tiên chúng ta phải tạo ra một chân trang với vị trí cố định ở cuối màn hình.
1. Tạo chân trang cố định
Hãy thêm một số nội dung và chân trang vào trang đầu tiên Tôi đang sử dụng các thẻ HTML Trong bản demo của tôi, có một hình ảnh con dơi được hiển thị bên trong phần chân trang cho hiệu ứng không quá ma quái, nhưng bạn có thể chọn bất kỳ hình ảnh nào khác mà bạn thích. Lorem ipsum dolor ngồi amet Chuyển sang CSS, loại bỏ bất kỳ không gian xung quanh Đưa ra một số kích thước ( Áp dụng Tô màu cả Đặt Bằng cách này, sẽ có đủ không gian ở phía dưới cho phần chân trang được hiển thị khi người dùng cuộn xuống trang. Đó là nó. Hiệu ứng chân trang tiết lộ cho một trang web đầy đủ được thực hiện. Kiểm tra bản demo Codepen dưới đây. Kỹ thuật này có thể được sử dụng cho một phần tử HTML riêng lẻ (có chân trang) đủ dài cho một hiệu ứng cuộn trang thích hợp. Phương pháp này hơi khó, vì hiện tại nó không hoạt động trong Chrome và IE, nhưng nó có một dự phòng khá. Đầu tiên, hãy tạo một bài viết dài với chân trang. Để quảng bá mã ngữ nghĩa, tôi đã chọn Lorem ipsum dolor ngồi amet Dưới đây bạn có thể thấy kiểu dáng cơ bản của bài viết và chân trang. Bài viết của tôi hiện tại trông như thế này. Tất nhiên bạn cũng có thể sử dụng các quy tắc phong cách cơ bản khác. Chân trang trước đã được sửa, cái này sẽ bị dính. Áp dụng Các Bạn có thể điều chỉnh giá trị của nó theo sở thích của mình, vì nó xác định điểm mà phần chân trang bắt đầu xuất hiện hoặc biến mất trong khi người dùng đang cuộn xuống hoặc lên. Đưa cùng giá trị cho lề dưới của bài viết, để có đủ không gian ở phía dưới để hiển thị chân trang đầy đủ. Bây giờ chúng ta cần một phần mở đầu bên dưới của bài viết thông qua đó chúng ta có thể thấy phần chân trang cuộn xuống và lên. Để đạt được điều này, thay thế Các Cuối cùng, hãy đặt chân trang phía sau bài viết sử dụng Và đó là, phần tử trang riêng lẻ với hiệu ứng hiển thị trên cuộn được thực hiện. Kiểm tra bút Codepen dưới đây. Bạn cũng có thể tìm thấy cả hai trường hợp sử dụng trên trang Github của chúng tôi. và cho ngữ nghĩa. Tuy nhiên,
Tiếp tục cuộn cho đến khi bạn nhìn thấy chân trang
gắn thẻ bởi đặt lề về 0, và làm cho nó đủ dài bằng thêm chiều cao tùy chỉnh để gây ra cuộn (nếu nội dung cơ thể trong trang của bạn đủ dài để gây ra cuộn, bạn không cần phải tăng chiều cao).chiều rộng và Chiều cao) đến chân trang, và cố định vị trí của nó phía dưới màn hình với vị trí: cố định; và đáy: 0; tính chất. cơ thể font-family: Crimson Text; cỡ chữ: 13pt; lề: 0; chân trang chiều rộng: 100%; chiều cao: 200px; vị trí: cố định; đáy: 0; màu nền: # DD5632;
2. Ẩn chân trang
chỉ số z: -1 quy tắc chân trang để đặt nó đằng sau tất cả các yếu tố khác trên trang. và thẻ màu trắng để che chân trang. cơ thể, html màu nền: #fff; chân trang chiều rộng: 100%; chiều cao: 200px; vị trí: cố định; đáy: 0; màu nền: # DD5632; chỉ số z: -1;
3. Điều chỉnh lề dưới
lề dưới của nhãn bằng chiều cao của chân trang (trong ví dụ của tôi 200px). cơ thể chiều cao: 1000px; lề: 0; lề dưới: 200px;
Các yếu tố trang cá nhân
1. Tạo một bài viết dài
và .
Điều 1
bài viết chiều rộng: 500px; màu nền: # FEF9F3; phần đệm: 20px 40px; bài viết> chân trang height: 100px; màu nền: # FE0178; body font-family: cormorant garhua;
2. Làm cho Footer dính
vị trí: dính quy tắc đến chân trang, vì vậy nó sẽ di chuyển bên trong ranh giới của bài viết nhưng vẫn duy trì vị trí của nó trên màn hình trong khi người dùng đang cuộn lên xuống. bài viết> chân trang height: 100px; màu nền: # FE0178; vị trí: -webkit-dính; vị trí: dính; dưới cùng: 80px;
dưới cùng: 80px quy tắc sửa vị trí của chân trang 80px phía trên cuối bài viết. bài viết chiều rộng: 500px; màu nền: # FEF9F3; phần đệm: 20px 40px; lề dưới: 80px;
3. Thêm một nền trong suốt một phần
màu nền của bài báo với một độ dốc tuyến tính hình nền, mà từ đầu bài viết đến đầu trang cuối là tô màu với màu nền của bài viết, và phần còn lại ở dưới cùng là làm trong suốt. bài viết chiều rộng: 500px; phần đệm: 20px 40px; hình nền: tuyến tính-gradient (xuống dưới, # FEF9F3 calc (100% - 120px), trong suốt 0); lề dưới: 80px;
calc (100% -120px) Hàm CSS tính toán chiều cao đầy đủ của bài viết trừ đi phần chân trang. Trong ví dụ của tôi, nó là 120px (100px cho chiều cao + 20px cho phần đệm).
4. Đặt chân trang trở lại
chỉ số z: -1 Quy tắc CSS. bài viết> chân trang height: 100px; màu nền: # FE0178; vị trí: -webkit-dính; vị trí: dính; dưới cùng: 80px; chỉ số z: -1;
