دانلود سورس js , css جستجو پیشرفته با انیمیشن زیبا

بدست آوردن تجربه جستجو به راستی کار ساده ای نیست. نقطه شروع همیشه فرم جستجو است که در اکثر موارد تنها شامل یک فیلد ورودی و یک دکمه ارسال است. صفحه نتایج جستجو برای طراحی بسیار مشکل است، مخصوصا اگر شما دارای دسته های مختلف محتوا باشید. برای وب سایت های بزرگ و فروشگاه های آنلاین، چه مهم است، اما سعی کنید پیش بینی حرکت کاربر. ما باید توجه داشته باشیم که اغلب کاربران ما در مورد کجا...

ساختار از دو عنصر اصلی تشکیل شده است nav.main-navبرای موارد ناوبری بالا و div.morph-dropdown-wrapperبسته بندی عناصر کرکره.  برای هر آیتم لیست در nav.main-navعنصر، a li.dropdownدر داخل ایجاد می شود .morph-dropdown-wrapper.   Open Nav About Pricing Contact     اضافی div.bg-layerدر داخل ساخته شده است div.morph-dropdown-wrapperو برای ایجاد پس زمینه morphing dropdown استفاده می شود. افزودن سبک در...

ما اخیرا با یک انیمیشن طراحی شده با CSS تجربه  کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد! آیکون های کتابخانه هسته ای ما . ایجاد ساختار ساختار HTML از یک...

در بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم. صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛) منابع: Velocity.js توسط جولیان شاپیرو. آیکون از Nucleo . ایجاد...

پیش بارگیرها اغلب برای بارگیری وب سایت ها / برنامه های کاربردی آهسته استفاده می شوند تا کاربر را مطلع کنند که وب سایت هنوز بارگذاری شده یا سقوط نکرده است. پیش بارگیرها برای وب سایت ها و برنامه های کاربردی با منابع بسیار مفید هستند. در بسیاری از موارد، بارگذاری انیمیشن ها به عنوان اولین عنصرUX استفاده می شود. آن را به کاربر تایید می کند که برنامه یا وب سایت سقوط نمی...

با استفاده از  افزونه وردپرس رایگان پاپ آپ پیشرفته شما می توانید هر چیزی که در ذهن خود دارید را پیاده کنید و لوگو های متحرک منحصر به فرد و انیمیشنی ایجاد کنید و یا از بیش از 200 قالب حرفه ای موجود در این پلاگین که آماده می باشد استفاده کنید. شما می توانید فرم اشتراک / تماس AJAX-ed را که با 79 ارائه دهندگان ایمیل مارکتینگ  به کار ببرید. علاوه بر این شما می توانید از هر...

پلاگین مدیریت جستجو یک راه حل همه جانبه برای مدیریت وردپرس و جستجو WooCommerce شماست. این پلاگین به شما امکان میدهد پیگیریهای انجام شده توسط مشتریانتان را انجام دهید و به آنها کمک کنید تا بهتر و سریعتر کار کنند. با استفاده از این افزونه می توانید: ببینید چه مشتریان شما دنبال آن هستند مشتریان خود را با هدایت نتایج جستجو، به جایی که به آنها نیاز دارید هدایت کنید. جستجوی خود را با تکمیل خودکار...

مقدمه گاهی اوقات شما می خواهید کلمات و رشته ها را در وب سایت وردپرس خود پیدا کنید و جایگزین کنید: مثلا شما می خواهید کلمه کلیدی را جایگزین کنید. در این مورد، شما یک کلمه کلیدی را انتخاب می کنید، به عنوان مثال کلمه کلیدی A، که چند ماه پیش این کلمه کلیدی برای وب سایت شما در نظر گرفته شده است. با این حال، پس از چند ماه بعد، شما کلمات کلیدی دیگر مانند کلمه کلیدی B را پیدا خواهید کرد که برای...

آیا می خواهید نوار جستجو را به منوی پیمایش وردپرس اضافه کنید؟ فرم جستجو می تواند برای کاربران شما برای پیدا کردن آنچه که آنها در سایت شما دنبال میکنند مفید  باشد. در این مقاله ما به شما نحوه افزودن نوار جستجو به منوی WordPress را نشان خواهیم داد. چرا باید یک نوار جستجو را در منوی خود اضافه کنید؟ فرم جستجو می تواند برای کاربران شما برای پیدا کردن آنچه که آنها در سایت شما...

امروز ما در حال رفتن به در بالای نگاه CSS انیمیشن کتابخانه برای کمک به شما انیمیشن های بسیار زیبا ایجاد کنید. انیمیشن ها زندگی را به وب، جنبش معنی دار شدت مطمئن UX را به سطح بعدی. شما احتمالا شنیده اصطلاح "انتقال" قبل، درست است؟ انتقال CSS چیزی را به محل در تغییر وضعیت هنگامی که شما معلق در هوا و یا چیزی است. در حال حاضر ما می توانید انیمیشن های CSS به تحریک و تشجیع هر...

افزونه وردپرس SearchWP v2.9.6.1 یک پلاگین حقوقی قالب وردپرس است که فورا تجربه جستجوی سایت وردپرسی شما را بهبود می بخشد. این بهترین پلاگین جستجو وردپرس است که می توانید پیدا کنید. این ویژگی های محبوب ترین افزونه عبارتند از جستجو محصولات و سفارشات تجارت الکترونیک، داده های داده های سفارشی (متادیتا)، PDF و محتوی سند و بینش بازدید کننده منحصر به فرد.  لینک...

آیا می خواهید صفحات خاص، نویسندگان و موارد دیگر را از جستجو وردپرس حذف کنید؟ به طور پیش فرض، جستجو وردپرس شامل تمام پست ها و صفحات در نتایج جستجو است. در این مقاله به شما نشان خواهیم داد که چگونه به راحتی از نتایج جستجوی WordPress حذف صفحات، پست ها، نویسندگان، دسته ها و موارد دیگر.   چرا موارد را از جستجو وردپرس حذف کنید؟ ویژگی جستجوی پیش فرض وردپرس نتایج از همه پست ها، صفحات و...

تمامی انیمیشن های معرفی شده با css و svg و در برخی موارد همراه javascript نیز معرفی شده اند انیمیشن ها قابل دانلود هستند برای دانلود میتوانید از روی کد های آنلاین codepen دانلود را انجام بدید   Border توسط شان مک کافری هنگامی که روی دستورالعمل "HOVER" می روید ، فقط با CSS ساخته می شود و یک حاشیه به راحتی متن ایجاد می شود. Elastic SVG Sidebar by Nikolay Talanov نوار کناری وقتی می خواهید آن را از کنار خود...

در این نوشته قصد داریم در مورد فایل هایی با پسوند GIF صحبت کنیم . فرمت GIF  فرمتیست که هم بافت های گرافیکی ثابت رو پشتیبانی میکنه هم بافت های گرافیکی متحرک که در حقیقت کوتاه شده اسم Graphics Interchange Format هست . بر خلاف اون چیزی که بین متخصصان کامپیوتری و طراحان رواج پیدا کرده تلفظ صحیح این فرمت جیف هست . دیکشنری آکسفورد هر دو تلفظ گیف و جیف رو برای این فرمت صحیح میدونه در حالی که...

ما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند. تصاویر: unsplash.com ایجاد ساختار ساختار HTML از دو لیست های نامرتب تشکیل...

سلام خدمت دوستان امروز با آموزش ساخت مودال باکس خدمت شما هستیم که بسیار مناسب برای ایده گیری و تسریع در طراحی وب سایت خواهد بود modal box فوق از 7 دموی متفاوت می باشد که میتوان به ساید بار کردن منو ها با مودال و دگمه های اشتراک گذاری متون با کاراکتر بیشتر با استفاده فول اسکرین و کلی امکانات دیگر... در زیر نمایی از تصاویر دمو رو خدمتتون ارسال میکنیم :   مودال ورود و عضویت:   مودال...

استفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم. UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ...

کد جدول رسپانسیو   در اینجا قطعه طراحی مواد با پیچ و تاب منحصر به فرد است. این جدول پاسخگو ایجاد شده توسط سرگئی کوپلاتکی در واقع میزبان لینک های دیگر به قطعه طراحی مواد است. خیلی باحال! این به طور طبیعی با استفاده از تکنیک های طراحی مواد ایجاد می شود، بنابراین جدول باید کاملا به طرح شما متوسل شود. اما سخت ترین بخشی از طراحی موبایل، ساخت جداول است که روی صفحه نمایش...

در طراحی تجارت الکترونیک یکی از اهداف اصلی این است که فاصله بین محصول و کاربر را پر کنید. این به ویژه برای کالاهای با قیمت بالا مرتبط است. از این رو، اهمیت ادغام ابزارهای تعاملی، برای دادن کاربر به یک راه برای "تقریبا تجربه" محصول. منابع امروز یک منبع ساده و تعاملی است که می تواند برای نشان دادن یک تور مجازی از محصول استفاده شود. ایده قطعه این است که از یک حرکت تصویر...

ما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد. ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...

خط زمانی عمودی ما  تا کنون یکی از محبوب ترین منابع در  ملت وب است. بسیاری از شما از ما خواسته اید تا یک جدول زمانی افقی را نیز اضافه کنید. که تقدیم شما میگردد. ساخت یک جدول زمانی افقی کمی دشوار بود، زیرا شما نمی توانید به عمودی (بصری) رفتار پیمایش تکیه کنید. ما تصمیم گرفتیم جداول زمانی و حوادث را جدا کنیم، اولین کسی که مانند یک نوار لغزنده کار می کند، در حالی که دومین اشغال...

ایده این منبع این است: اگر من یک گالری محصولات داشته باشم، من بهترین تصویر را برای هر یک از آنها انتخاب می کنم. اما اگر یک تصویر کافی نیست چه؟ مشتری بر روی محصول کلیک می کند، او به صفحه محصول تکیه می کند، و در بیشتر موارد، یک نمایش اسلاید در آنجا پیدا می کند. با این حال، اگر آنها قبل از رفتن به صفحه محصول، تصاویر بیشتری از یک محصول مشابه را ببینند، احتمال بیشتری وجود دارد که آنها...

در حال حاضر، به طور خاص در دستگاه های تلفن همراه، جهش های خودکار پنهان شده اند. پشت همین ایده این الگوی UX ساده و در عین حال کارآمد است: ما می خواهیم ناوبری آسان برای رسیدن به تمام زمان، بنابراین ما آن را در بالا قرار می گیرند. با این حال، هنگامی که کاربر به سمت پایین حرکت می کند، ما آن را به طور خودکار پنهان می کنیم تا مکان بیشتری برای محتوا ایجاد شود. اگر کاربر حرکت کند، رفتار خود...