Hướng dẫn tạo hiệu ứng placeholder động trong ô tìm kiếm
Bạn có thể dán code script bằng các cách sau:
- Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh)
- Cách 2: tạo file .js riêng và enqueue nó trong functions.php
- Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js như Code Snippets ,…
- Cách 4: Riêng theme Flatsome: wp-admin/admin.php?page=optionsframework . Vào Flatsome → Advanced → Global Setting → Scripts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<style> /* Tùy chỉnh placeholder */ .search-field::placeholder { font-size: 16px; font-style: italic; color: #888; } </style> <script type="text/javascript"> jQuery(document).ready(function ($) { !function (t) { "use strict"; t.fn.placeholderTypewriter = function (e) { var n = t.extend({ delay: 50, // Thời gian gõ từng ký tự pause: 1000, // Thời gian nghỉ sau khi gõ xong cursorBlinkSpeed: 500, // Tốc độ nháy con trỏ text: [] }, e); function r(t, e) { t.attr("placeholder", ""); // Xóa placeholder trước let cursor = "|"; // Biểu tượng con trỏ nhấp nháy function typeEffect(el, textIndex, charIndex, callback) { var text = n.text[textIndex]; if (charIndex < text.length) { el.attr("placeholder", text.substring(0, charIndex + 1) + cursor); setTimeout(() => typeEffect(el, textIndex, charIndex + 1, callback), n.delay); } else { setTimeout(callback, n.pause); } } function deleteEffect(el, callback) { var placeholderText = el.attr("placeholder"); if (placeholderText.length > 1) { el.attr("placeholder", placeholderText.slice(0, -2) + "|"); // Xóa ký tự cuối cùng, giữ con trỏ setTimeout(() => deleteEffect(el, callback), n.delay); } else { callback(); } } typeEffect(t, e, 0, function () { setTimeout(() => deleteEffect(t, function () { r(t, (e + 1) % n.text.length); }), n.pause); }); // Hiệu ứng nháy con trỏ setInterval(() => { let placeholder = t.attr("placeholder"); if (placeholder.endsWith("|")) { t.attr("placeholder", placeholder.slice(0, -1)); // Ẩn con trỏ } else { t.attr("placeholder", placeholder + "|"); // Hiện con trỏ } }, n.cursorBlinkSpeed); } return this.each(function () { r(t(this), 0); }); }; }(jQuery); var placeholderText = [ "Thủ thuật Theme Flatsome", "WordPress cơ bản", "Custom WooCommerce nâng cao", "Link download theme Flatsome", "WordPress nâng cao" ]; $(".search-field").placeholderTypewriter({ text: placeholderText, delay: 70, // Điều chỉnh tốc độ gõ chữ pause: 1200, // Điều chỉnh thời gian nghỉ giữa các chuỗi cursorBlinkSpeed: 600 // Điều chỉnh tốc độ nhấp nháy của con trỏ }); }); </script> |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
