Hướng dẫn tạo hiệu ứng placeholder typewriter (gõ chữ) cho ô tìm kiếm
|
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:
- Hướng dẫn code function trang Xóa các ký tự đặc biệt trong một đoạn văn bản
- Hướng dẫn dùng Rclone sao lưu VPS qua Google Drive, One Drive,…
- Seo PowerSuite là gì? Vì sao cần sử dụng phần mềm này nếu muốn SEO đạt TOP #1
- Công cụ trực tuyến kiểm tra tốc độ website tốt nhất
- Sao Thiên Ưng – Vững bước vươn xa
