Lemmy.World
  • Communities
  • Create Post
  • Create Community
  • heart
    Support Lemmy
  • search
    Search
  • Login
  • Sign Up
eifachposteBM to Kagi Small Web Appreciated RSS FeedEnglish · 10 days ago

How I Made the Typewriter Effect for the Search Section

liuu.org

external-link
message-square
0
link
fedilink
1
external-link

How I Made the Typewriter Effect for the Search Section

liuu.org

eifachposteBM to Kagi Small Web Appreciated RSS FeedEnglish · 10 days ago
message-square
0
link
fedilink
Adding a little “extra” to a blog often makes it feel more alive. For my search page, I decided to implement a typewriter effect that cycles through my post titles as placeholder text in the search input. It’s a small detail, but it gives users a hint of what they can search for while adding a dynamic feel. Here’s how I built it. The Goal Fetch all blog post titles from the search index. Randomly select a title and “type” it out in the search bar’s placeholder. Include a blinking cursor (|). Delete the text after a short pause and start again with a new title. Stop the effect if the user starts typing manually. Step 1: Getting the Data Since I’m using the PaperMod theme with Hugo, my search index is already generated as a JSON file (index.json). I hooked into the existing search script (fastsearch.js) where the search index is loaded.
alert-triangle
You must log in or # to comment.

Kagi Small Web Appreciated RSS Feed

kagismallweb

Subscribe from Remote Instance

Create a post
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: [email protected]
Visibility: Public
globe

This community can be federated to other instances and be posted/commented in by their users.

  • 46 users / day
  • 220 users / week
  • 506 users / month
  • 645 users / 6 months
  • 50 local subscribers
  • 54 subscribers
  • 5.65K Posts
  • 119 Comments
  • Modlog
  • mods:
  • eifachposteB
  • UI: 0.19.17-6-gd2cd87b1
  • BE: 0.19.17-7-gf48cd284c
  • Modlog
  • Legal
  • Instances
  • Docs
  • Code
  • join-lemmy.org