Home
Sedat Kumcu
Animasyonlu Arama Textbox Widget

Animasyonlu Arama Textbox Widget

Forked from> @anonymous/animated-search-form

Üzerine gelince animasyonlu olarak açılan textbox.

This tailwind example is contributed by Sedat Kumcu, on 05-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are find,Transitions

Search Bar Animation

Author Sedat Kumcu

1.1k

Fork Fullscreen

searchInput.addEventListener('focus', () => {
      searchContainer.classList.add('w-96', 'bg-white');
      searchContainer.classList.remove('w-32');
      searchInput.placeholder = "Yazın ve Enter'a basın ↵";
      searchInput.classList.remove('border-gray-300');
      searchInput.classList.add('border-blue-500');
      searchIcon.classList.add('text-blue-500');
      searchIcon.classList.remove('text-gray-400');
    });

searchInput.addEventListener('blur', () => {
      searchContainer.classList.add('w-32');
      searchContainer.classList.remove('w-96', 'bg-white');
      searchInput.placeholder = "Arama..";
      searchInput.classList.add('border-gray-300');
      searchInput.classList.remove('border-blue-500');
      searchIcon.classList.add('text-gray-400');
      searchIcon.classList.remove('text-blue-500');
    });
  </script>

Related Examples

Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

3 months ago

1.4k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

4 weeks ago

139
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.7k
background animation
background animation

Author:
Jayendra Madara

9 months ago

2.3k
3D Box

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.6k
Arama Sonuçları Sayfası
Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

Author:
Sedat Kumcu

6 months ago

751
Search bar with select
search bar like google with select filter

Author:
Cristian

11 months ago

3k
change background color on scroll with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

3.8k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

38.5k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components