اگر افکت را دوست دارید، فقط می توانید کپی کنید کد تمام شدهو از آن استفاده کنید!
وب سایت خود را زنده کنید!
افکت های شناور مختلف می توانند به صفحات سایت شما تازگی بیاورند. قبلاً برای هر اثری باید با جاوا اسکریپت سر و کار داشت، اما امروزه پس از ظهور فناوری CSS3، همه چیز را می توان با دور زدن استفاده از جاوا اسکریپت انجام داد.
نمونه‌های امروزی همگی برای مرورگرهای مدرن جدید پیاده‌سازی و بهینه‌سازی شده‌اند و مطمئناً در آنها کار خواهند کرد (مثلاً در مرورگرهای خانواده موزیلا یا WebKit). ما نمی توانیم به شما در مورد کار در اینترنت اکسپلورر اطمینان دهیم، اما در اکثر آنها نسخه های تازهافکت‌ها دقیقاً همانطور که باید کار می‌کنند. اما فراموش نکنید که برای هر افکت یک گزینه بازگشت جذاب در صورتی که مرورگر همچنان از افکت پشتیبانی نمی کند آماده شده است.
01. بزرگنمایی
نسخه ی نمایشی:برای مشاهده
اجرای این افکت بسیار ساده است و می توان آن را به روش های مختلفی پیاده سازی کرد. ما از روشی استفاده کردیم که در آن یک پارامتر حاشیه به هر تصویر اضافه می‌شود، و سپس، هنگامی که نشانگر ماوس قرار می‌گیرد، این پارامتر حذف می‌شود. فرض کنید تنظیمات حاشیه از 15 پیکسل شروع می شود و در حالت شناور به 2 پیکسل تبدیل می شود، که باعث می شود تصویر به نظر پرش شود. شما همچنین می توانید فقط از این افکت با متن استفاده کنید، حتی اگر پیوندها به جای افقی عمودی باشند.
انتقال در اینجا می تواند به صلاحدید شما تنظیم شود، و همچنین اثر بدون هیچ گونه انتقالی جذاب خواهد بود. به عنوان مثال، ما افکت را کمی صاف کردیم، که فکر می‌کردیم به افکت خوشبو می‌شود.
CSS را افزایش دهید
Ex1 img(
حاشیه: 5px جامد #ccc;
شناور به سمت چپ؛
حاشیه: 15 پیکسل
-webkit-transition: حاشیه 0.5s ease-out.
-moz-transition: حاشیه 0.5s ease-out.
-o-transition: حاشیه 0.5s ease-out.
}
Ex1 img: شناور (
margin-top: 2px;
}
02. Stack & Grow
نسخه ی نمایشی:برای مشاهده
ظاهراً نویسنده این افکت می‌خواست به نوعی جلوه لامپ گدازه دست یابد، زیرا وقتی با ماوس روی لیست پیوندها می‌روید، هر تصویر به آرامی بزرگ می‌شود و سپس به اندازه اصلی خود باز می‌گردد.
برای پیاده سازی، تصاویری با اندازه 400x133 پیکسل در اینجا استفاده شده است. سپس با CSS اندازه آنها به 300x100 پیکسل تغییر داده شد و با شناور بزرگ شدند. از آنجایی که کل لیست در مثال تراز وسط است، اندازه جدیدتصاویر تمام ترازها را شکستند. این مشکل را می توان با تنظیم حاشیه های منفی به نصف عرض تصاویر بزرگ شده حل کرد.
کد CSS برای Stack & Grow
/*مثال 2*/
#ظرف (
عرض: 300 پیکسل
حاشیه: 0 خودکار;
}
#ex2 img(
ارتفاع: 100 پیکسل؛
عرض: 300 پیکسل
حاشیه: 15 پیکسل 0;
-webkit-transition: all 1s ease.
-moz-transition: همه 1 ها سهولت.
-o-transition: همه 1 ها ease.
}
#ex2 img: شناور (
ارتفاع: 133px;
عرض: 400 پیکسل
حاشیه سمت چپ: -50 پیکسل.
}
03. متن را محو کنید
نسخه ی نمایشی:برای مشاهده
در اینجا نویسنده می خواست چیزی شبیه به یک رویداد ایجاد کند نوع جاوا اسکریپتهنگامی که ماوس را روی یک آیتم نگه می دارید و اثر روی مورد دیگر نمایش داده می شود. در اینجا، متن و تصویر گرفته شده و سپس در یک div تراز چپ جداگانه قرار داده شده است. سپس رنگ: شفاف و ارتفاع خط: 0px به div اضافه شد. این به متن اجازه داد تا در بالای div قرار گیرد و به طور کلی پنهان شود.
برای اینکه متن دوباره ظاهر شود، به سادگی رنگ و ارتفاع خط را تغییر می دهیم. وقتی ماوس را روی تصویر می‌برید، متن دوباره ظاهر می‌شود. جلوه بسیار سرگرم کننده و سبک.
محو کردن متن در اثر کد CSS
#ex3(
عرض: 730 پیکسل
ارتفاع: 133px;
ارتفاع خط: 0 پیکسل
رنگ: شفاف
اندازه فونت: 50px;
font-family: "HelveticaNeue-Light"، "Helvetica Neue Light"، "Helvetica Neue"، Helvetica، Arial، sans-serif;
وزن قلم: 300
تبدیل متن: بزرگ;
}
#ex3: شناور(
ارتفاع خط: 133 پیکسل.
رنگ: #575858;
}
#ex3 img(
شناور به سمت چپ؛
حاشیه: 0 15 پیکسل;
}
04. عکس کج
نسخه ی نمایشی:برای مشاهده
این افکت بسیار ساده است، اما برای یک گالری بند انگشتی عالی است. ابتدا باید یک شبکه با تصاویر ایجاد کنید و سپس زمانی که ماوس را روی آنها قرار می دهید تصاویر را بچرخانید که جلوه ای جذاب ایجاد می کند.
در اینجا شما نیاز به استفاده از بسیاری از موارد جدید دارید مقادیر css، بنابراین باید گزینه بازگشت را برای نسخه های قبلی مرورگرها نیز در نظر بگیرید. در گالری ما، از ترانزیشن ها، تبدیل ها و همچنین سایه های بلوک استفاده می شود، البته طبق میل شما. تبدیل مسئول چرخش تصویر خواهد بود و انتقال ها مسئول جلوه نرم و صاف خواهند بود.
در اینجا می توانید از شبه انتخابگرها استفاده کنید.
کد CSS برای عکس کج
#ex4 (
عرض: 800 پیکسل
حاشیه: 0 خودکار;
}
#ex4 img(
حاشیه: 20 پیکسل
حاشیه: 5px جامد #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: همه 0.5s ease-out.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.
}
#ex4 img: شناور (
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. محو شدن و بازتاب
نسخه ی نمایشی:برای مشاهده
اجرای این افکت کمی مشکل است، بنابراین مجبور شدیم کمی با آن کمانچه بپردازیم تا به کار بیفتیم. موقعیت پیش فرض تصویر کمی شفاف است. سپس، هنگامی که ماوس را روی تصویر می‌برید، سطح شفافیت کاهش می‌یابد، و تصویر به ظاهر اولیه‌اش باز می‌گردد، همچنین درخشش و انعکاس جزئی (فقط برای مرورگرهای خانواده WebKit) باز می‌گردد.
متأسفانه، بازتاب دقیقاً یک انتقال نیست، بنابراین بلافاصله ظاهر می شود، حتی اگر بقیه محتوا در حرکت آهسته ظاهر شود.
اگر در مورد بازتاب های CSS گیج شده اید، می توانید در این مقاله (دیوید والش) در مورد آن بیشتر بدانید.
محو شدن و بازتاب کد CSS
#ex5 (
عرض: 700 پیکسل
حاشیه: 0 خودکار;
حداقل ارتفاع: 300 پیکسل
}
#ex5 img(
حاشیه: 25 پیکسل
کدورت: 0.8
حاشیه: 10 پیکسل جامد #eee;
/*انتقال*/
-webkit-transition: همه 0.5s ease.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.
/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(.7، شفاف)، به (rgba(0،0،0،0.1)) )
}
#ex5 img: شناور (
کدورت: 1
/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(.7، شفاف)، به (rgba(0،0،0،0.4)) )
/*درخشش*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
نتیجه
این 5 مثال باید برای الهام بخشیدن به شما برای ایجاد چیزی از خودتان کافی باشد. به یاد داشته باشید که همیشه می توانید از قبل آزمایش کنید نمونه های آمادهو سپس در مورد آنها به ما بگویید.
اگر در جایی از شبکه با جلوه های چشم نواز دیگری برخورد کرده اید، لطفاً در مورد آن به ما و سایر خوانندگان بگویید.
اول از همه، برای کسانی که کاملاً در موضوع نیستند یا اصلاً در موضوع نیستند، به طور خلاصه توضیح می دهم که افکت های شناور چیست. آی تی انواع مختلفجلوه‌ها (عنوان پاپ‌آپ، نکات ابزار، انتقال های صاف، تبدیل، چرخش، افزایش، افست، و غیره، و غیره) روی عناصر وب سایت زمانی که با نشانگر ماوس روی آنها حرکت می کنید اعمال می شود. این اثرات را می توان هر دو با کمک های مختلف تحقق بخشید پلاگین های جی کوئریو CSS3 خالص.
امروز من مجموعه بزرگی از افکت‌های شناور اصلی را برای تصاویر ایجاد شده با CSS3 بدون گنجاندن کتابخانه‌های جاوا اسکریپت آماده کردم. من در مورد مزایا و معایب پیاده سازی افکت هاور در CSS3 خالص صحبت نمی کنم، این یک موضوع دیگر است، فقط به مثال ها نگاه کنید و در صورت لزوم از یکی از مواردی که دوست دارید در سایت خود استفاده کنید. تمام جلوه های ارائه شده در بررسی با یک نسخه نمایشی و مستندات دقیق با کدهای منبع ارائه شده است. کتابچه ها عمدتاً به زبان بورژوایی هستند، اما همه چیز کم و بیش شهودی است.
فقط می خواهم توجه شما را به این واقعیت جلب کنم که همه این نمونه ها فقط در مرورگرهای مدرنی که از ویژگی های CSS3 پشتیبانی می کنند به درستی کار می کنند.
برای اینکه تصویر کلی را خراب نکنم، نام افکت ها را با ترجمه ماشینی تحریف نکردم (به استثنای برخی)، عناوین اصلی را همانطور که توسعه دهنده نامیده بود گذاشتم.
بسیار اثر جالبهنگامی که ماوس را روی ریز عکسها قرار می دهید، با استفاده از خطوط نازک در طراحی و تایپوگرافی. چندین نوع مختلف از جلوه های شرح تصویر، تبدیل های سه بعدی نرم و غیر مزاحم، و انتقال های شبه عنصر صاف. فقط در مرورگرهای مدرن کار می کند.
iHover مجموعه ای چشمگیر از جلوه های شناور CSS3 خالص با پشتیبانی از Bootstrap 3 است. ساخته شده بر روی Scss CSS (فایل) که به راحتی با متغیرها قابل تغییر است. کد ماژولار است و نیازی به گنجاندن کل فایل نیست. بیش از 30 افکت مختلف در یک بسته. همه چیز به خوبی مستند شده است، استفاده از جلوه ها بسیار آسان است. تنها کاری که باید انجام دهید این است که نشانه گذاری HTML را به درستی بسازید و فایل CSS را برای کار اضافه کنید.
برخی از جلوه های شناور ساده و در عین حال شیک را برای شرح تصاویر ایجاد می کند. ایده این است که وقتی ماوس را روی تصاویر کوچک می‌برید، می‌توانید عنوان، نام نویسنده و دکمه پیوند را برای نمایش مؤثر دریافت کنید. برخی از جلوه ها از تبدیل های بصری سه بعدی استفاده می کنند.
یک افکت انتقالی بسیار ساده، بدون هیچ گونه زنگ و سوت، یک تصویر کاملا گرد در یک قاب، با تغییر فوکوس در شناور تغییر شکل می دهد و تمام.
جلوه های شناور CSS3 برای ریز عکسها
توسعه‌دهنده کار خود را به‌عنوان نمونه‌ای از گالری تصاویر با جلوه‌های انتقال زمانی که حاشیه‌نویسی‌ها (شرح) به تصاویر کوچک ظاهر می‌شوند، قرار می‌دهد. حمایت قوی اعلام شد مرورگرهای مدرناز جمله IE 9+. البته به سختی می توان آن را یک گالری تمام عیار نامید، اما تأثیر ظاهر امضاها بسیار جالب است.
مجموعه دیگری از قوانین CSS برای ایجاد افکت های شناور چشمگیر بر روی تصاویر کوچک کاملا گرد. این بسته شامل 7 نوع انتقال CSS3، مستندات بسیار دقیق در مورد راه اندازی و استفاده است. جلوه ها توسط تمام مرورگرهای مدرن پشتیبانی می شوند.
چرخش ریز عکسها در حالت شناور
یک جلوه ساده از چرخاندن ریز عکس‌های گرد هنگام نگه‌داشتن نشانگر ماوس بر روی آنها، می‌توانید همین موضوع را در وبلاگ من، در اعلامیه‌های پست در صفحه اصلی مشاهده کنید. در چند خط کد css پیاده سازی شده است.
اگر به معنای واقعی کلمه ترجمه شود: "اثر سکسی هنگام شناور شدن روی تصاویر." البته بعید است که در این افکت متوجه چیزی به این سکسی شوید، مگر اینکه تخیل وحشی داشته باشید، اما اثر در نوع خود جالب است و ارزش توجه به آن را دارد.
پنج افکت مختلف برای تصاویر هنگام شناور شدن روی آنها. امضاهای پاپ آپ در سه تنوع، پرده به صورت تغییر درجه شفافیت و چرخش با حرکت افقی.
4 نوع افکت انیمیشن برای شرح تصاویر، که منحصراً با استفاده از CSS3 پیاده سازی شده است. موقعیت های مختلف در ظاهر و جلوه های انتقال، عملکرد کاملا استاندارد است. برای اینکه بفهمید انیمیشن چگونه کار می کند، نگاهی به آن بیندازید منبعصفحه نمایشی، من هیچ سند جداگانه ای پیدا نکردم.
گالری‌های بند انگشتی مشبک با جلوه‌های زیرنویس، چرخش، محو، شناور و غیره. اسناد در مورد استفاده و پیکربندی نسبتا کمیاب است، اما شما می توانید آن را با یک میل خاص کشف کنید.
این افکت هیچ چیز خاصی را نشان نمی دهد، یک تغییر پیش پا افتاده در روشنایی تصاویر در حالت شناور، به جز اینکه عناصر انیمیشن اضافه می شوند. شما باید خودتان با تجزیه کدهای منبع آزمایشی با جزئیات پیاده سازی مقابله کنید.
مجموعه ای دیگر از 10 افکت شناور برای تصاویر، تغییرات مختلف ریز عکسها در شناور، زوم، چرخش، چرخش، تاریک کردن و غیره.
جلوه انیمیشن مرزی
افکت های متحرک فریم مختلف در اطراف تصاویر، کاملاً جذاب به نظر می رسد، راهنمای دقیقی برای تنظیم و استفاده وجود دارد.
جلوه‌های شناور اصلی CSS3 که برای نشان دادن زیرنویس‌های تصاویر کوچک به‌طور مؤثر در شناور استفاده می‌شوند. مجموعه قوانین CSS شامل 10 افکت مختلف است که می توانید به صورت جداگانه برای تصاویر مختلف استفاده کنید. افکت ها واقعاً چشمگیر هستند، به خصوص با توجه به اینکه همه این کارها با CSS3 انجام می شود. راهنمای تفصیلیبه شما کمک می کند بفهمید چه چیزی چیست.
ایده این است که یک SVG ایجاد کنیم که یک شکل پس‌زمینه برای برخی متن باشد و در حالت شناور به شکل دیگری تبدیل شود. به این ترتیب شما می توانید گزینه های مختلف زیادی ایجاد کنید، اما در مثال، سه نوع افکت انتقال نشان داده شده است. مزیت استفاده از SVG این است که می‌توانیم اندازه فرم را برای مطابقت با اندازه کانتینر اصلی تغییر دهیم.
تصاویر کشویی
ماهیت این افکت این است که تصویر بالا و پایین می رود تا کپشن ظاهر شود. اگر با پارامترهای سبک کار می کنید، فکر می کنم می توانید به افکت های بسیار خوبی برسید و به طور پیش فرض همه چیز بسیار ساده به نظر می رسد.
با این جلوه، همه چیز ساده است، شرح تصاویر در بالا سمت راست یا پایین سمت چپ، به شکل یک روبان با پس‌زمینه تیره شفاف به بیرون می‌چرخند، همه چیز بسیار ساده با استفاده از ویژگی‌های css تغییر شکل می‌دهد.
یک راه حل جالب، ریز عکسها به شکل تیره ارائه می شوند، وقتی روی آنها قرار می گیرید، تصاویر ظاهر می شوند و امضا در پس زمینه روشن ظاهر می شود.
عنوان تصویر از گوشه ظاهر می شود و به صورت مورب به کل ناحیه تصویر گسترش می یابد.
چند راه حل جالب دیگر برای پیاده سازی کپشن های پاپ آپ برای ریز عکسها. در ویرایشگر آنلاین، می توانید گزینه ها را آزمایش کنید و به نتایج چشمگیرتری برسید.
کیت جلوه های زیباهنگام قرار دادن ماوس روی ریز عکسها، انواع مختلف ظاهر و طراحی شرح تصاویر. خطوط نازک در تضاد با پس زمینه کمی تیره، بلوک های اطلاعاتی خوانا را ایجاد می کنند.
شکل‌های عجیب و غریب و جلوه‌های بزرگنمایی در ارتباط با جلوه‌های متحرک ظاهر زیرنویس‌ها به ریز عکسها.
جلوه‌های شگفت‌انگیز همپوشانی آیکون‌ها بر روی ریز عکسها در تغییرات ظاهری مختلف. این مثال از یک کاراکتر (+) استفاده می‌کند که توسط یک دایره با استفاده از شعاع مرزی مشخص شده است: در CSS، می‌توانید از فونت آیکون نیز برای آموزنده‌تر کردن پانل بازشو استفاده کنید.
6 شرح عکس
6 نوع ظاهر شرح‌های پاپ‌آپ برای تصاویر در حالت شناور با استفاده از CSS3. یک درس مفصل در مورد پیاده سازی و پیکربندی، کدهای منبع برای دانلود موجود است.
نحوه ایجاد برخی افکت های شناور زیرنویس ظریف و مدرن.
با نحوه ایجاد افکت های شناور ساده و در عین حال شیک برای شرح تصاویر آشنا شوید. ایده این است که شبکه‌ای از شکل‌ها داشته باشیم و یک افکت شناور روی آیتم‌ها اعمال کنیم که عنوانی با عنوان، نویسنده و دکمه پیوند نشان می‌دهد.
جهت آگاه CSS3 اثر شناور با جی کوئری
با استفاده از CSS3 و jQuery یک افکت شناور آگاه از جهت ایجاد کنید.
یاد بگیرید که چگونه با استفاده از CSS3 و jQuery یک افکت شناور آگاه از جهت ایجاد کنید. ایده این است که از جهتی که با ماوس از آن می‌آییم، روی برخی از تصاویر بندانگشتی کمی همپوشانی داشته باشیم.
جلوه های شناور دایره با انتقال CSS
آموزش ایجاد افکت های شناور مختلف روی دایره ها با انتقال CSS و چرخش سه بعدی
این آموزش پنج نمونه از افکت های شناور CSS3 را با استفاده از ویژگی های مختلف CSS به شما نشان می دهد. لطفاً توجه داشته باشید که افکت‌های CSS3 فقط در مرورگرهای مدرنی که از ویژگی‌های CSS3 در حال استفاده پشتیبانی می‌کنند، به درستی کار می‌کنند.
افکت های شناور دکمه منحصر به فرد CSS
برخی از سبک ها و جلوه های دکمه خلاقانه و مدرن برای الهام شما.
این مجموعه دکمه CSS از چند سبک و افکت ساده، خلاقانه و ظریف تشکیل شده است تا به شما الهام بخشد. افکت‌ها را می‌توان هنگام نگه‌داشتن روی برخی از دکمه‌ها و کلیک کردن روی برخی دیگر مشاهده کرد. عمدتاً از انتقال‌های CSS استفاده می‌شود، اما از انیمیشن‌های CSS نیز استفاده می‌شود و برای برخی دکمه‌ها از کمی جاوا اسکریپت برای افزودن/حذف کلاس‌های افکت استفاده می‌شود.
جلوه های شناور نماد
مجموعه ای از جلوه های شناور آیکون گرد ساده با انتقال CSS و انیمیشن برای الهام شما.
در اینجا مجموعه ای از جلوه های شناور نماد ساده است. ایجاد یک افکت ظریف و شیک با استفاده از انتقال CSS و انیمیشن ها بر روی لنگرها و شبه عناصر آنها.
اول از همه، برای کسانی که کاملاً در این موضوع نیستند یا اصلاً در این موضوع نیستند، به طور خلاصه توضیح می دهم که hover- چیست. اینها انواع مختلفی از افکت‌ها هستند (توصیه‌های پاپ‌آپ، نکات، انتقال صاف، تبدیل، چرخش، افزایش، جابجایی، و غیره) که توسط مکان‌نمای ماوس روی آنها روی عناصر وب‌سایت اعمال می‌شوند. اینها را می توان هم با کمک پلاگین های مختلف جی کوئری و هم بر روی Pure پیاده سازی کرد.
امروز من مجموعه بزرگی از افکت‌های شناور اصلی را برای تصاویر ایجاد شده با CSS3 بدون گنجاندن کتابخانه‌های جاوا اسکریپت آماده کردم. من در مورد مزایا و معایب پیاده سازی افکت هاور در CSS3 خالص صحبت نمی کنم، این یک موضوع دیگر است، فقط به مثال ها نگاه کنید و در صورت لزوم از یکی از مواردی که دوست دارید در سایت خود استفاده کنید. تمام جلوه های ارائه شده در بررسی با یک نسخه نمایشی و مستندات دقیق با کدهای منبع ارائه شده است. کتابچه ها عمدتاً به زبان بورژوایی هستند، اما همه چیز کم و بیش شهودی است.
فقط می خواهم توجه شما را به این واقعیت جلب کنم که همه این نمونه ها فقط در مرورگرهای مدرنی که از ویژگی های CSS3 پشتیبانی می کنند به درستی کار می کنند.
برای اینکه تصویر کلی را خراب نکنم، نام افکت ها را با ترجمه ماشینی تحریف نکردم (به استثنای برخی)، عناوین اصلی را همانطور که توسعه دهنده نامیده بود گذاشتم.
افکت شناور بسیار جالب بر روی ریز عکسها با استفاده از خطوط نازک در طراحی و تایپوگرافی. چندین نوع مختلف از جلوه های شرح تصویر، تبدیل های سه بعدی نرم و غیر مزاحم، و انتقال های شبه عنصر صاف. فقط در مرورگرهای مدرن کار می کند.
iHover مجموعه ای چشمگیر از جلوه های شناور CSS3 خالص با پشتیبانی از Bootstrap 3 است. ساخته شده بر روی Scss CSS (فایل) که به راحتی با متغیرها قابل تغییر است. کد ماژولار است و نیازی به گنجاندن کل فایل نیست. بیش از 30 افکت مختلف در یک بسته. همه چیز به خوبی مستند شده است، استفاده از جلوه ها بسیار آسان است. تنها کاری که باید انجام دهید این است که نشانه گذاری HTML را به درستی بسازید و فایل CSS را برای کار اضافه کنید.
برخی از جلوه های شناور ساده و در عین حال شیک را برای شرح تصاویر ایجاد می کند. ایده این است که وقتی ماوس را روی تصاویر کوچک می‌برید، می‌توانید عنوان، نام نویسنده و دکمه پیوند را برای نمایش مؤثر دریافت کنید. برخی از جلوه ها از تبدیل های بصری سه بعدی استفاده می کنند.
یک افکت انتقالی بسیار ساده، بدون هیچ گونه زنگ و سوت، یک تصویر کاملا گرد در یک قاب، با تغییر فوکوس در شناور تغییر شکل می دهد و تمام.
برای تصاویر کوچک CSS3
توسعه‌دهنده کار خود را به‌عنوان نمونه‌ای از گالری تصاویر با جلوه‌های انتقال زمانی که حاشیه‌نویسی‌ها (شرح) به تصاویر کوچک ظاهر می‌شوند، قرار می‌دهد. پشتیبانی مطمئن توسط مرورگرهای مدرن، از جمله IE 9+ اعلام شده است. البته به سختی می توان آن را یک گالری تمام عیار نامید، اما تأثیر ظاهر امضاها بسیار جالب است.
مجموعه دیگری از قوانین CSS برای ایجاد افکت های شناور چشمگیر بر روی تصاویر کوچک کاملا گرد. این بسته شامل 7 نوع انتقال CSS3، مستندات بسیار دقیق در مورد راه اندازی و استفاده است. جلوه ها توسط تمام مرورگرهای مدرن پشتیبانی می شوند.
چرخش ریز عکسها در حالت شناور
یک جلوه ساده از چرخاندن ریز عکس‌های گرد هنگام نگه‌داشتن نشانگر ماوس بر روی آنها، می‌توانید همین موضوع را در وبلاگ من، در اعلامیه‌های پست در صفحه اصلی مشاهده کنید. در چند خط کد css پیاده سازی شده است.
اگر به صورت تحت اللفظی ترجمه شود: «اثر جنسی هنگام شناور شدن روی آن». البته بعید است که در این افکت متوجه چیزی به این سکسی شوید، مگر اینکه تخیل وحشی داشته باشید، اما اثر در نوع خود جالب است و ارزش توجه به آن را دارد.
پنج افکت مختلف برای تصاویر هنگام شناور شدن روی آنها. امضاهای پاپ آپ در سه تنوع، پرده به صورت تغییر درجه شفافیت و چرخش با حرکت افقی.
4 نوع افکت انیمیشن برای شرح تصاویر، که منحصراً با استفاده از CSS3 پیاده سازی شده است. موقعیت های مختلف در ظاهر و جلوه های انتقال، عملکرد کاملا استاندارد است. برای درک نحوه عملکرد انیمیشن، به کد منبع صفحه نمایشی نگاهی بیندازید، من هیچ سند جداگانه ای پیدا نکردم.
گالری‌های بند انگشتی مشبک با جلوه‌های زیرنویس، چرخش، محو، شناور و غیره. اسناد در مورد استفاده و پیکربندی نسبتا کمیاب است، اما شما می توانید آن را با یک میل خاص کشف کنید.
این افکت هیچ چیز خاصی را نشان نمی دهد، یک تغییر پیش پا افتاده در روشنایی تصاویر در حالت شناور، به جز اینکه عناصر انیمیشن اضافه می شوند. شما باید خودتان با تجزیه کدهای منبع آزمایشی با جزئیات پیاده سازی مقابله کنید.
مجموعه ای دیگر از 10 افکت شناور برای تصاویر، تغییرات مختلف ریز عکسها در شناور، زوم، چرخش، چرخش، تاریک کردن و غیره.
افکت های متحرک فریم مختلف در اطراف تصاویر، کاملاً جذاب به نظر می رسد، راهنمای دقیقی برای تنظیم و استفاده وجود دارد.
جلوه‌های شناور اصلی CSS3 که برای نشان دادن زیرنویس‌های تصاویر کوچک به‌طور مؤثر در شناور استفاده می‌شوند. مجموعه قوانین CSS شامل 10 افکت مختلف است که می توانید به صورت جداگانه برای تصاویر مختلف استفاده کنید. افکت ها واقعاً چشمگیر هستند، به خصوص با توجه به اینکه همه این کارها با CSS3 انجام می شود. یک راهنمای دقیق به شما کمک می کند تا بفهمید چه چیزی چیست.
ایده این است که یک SVG ایجاد کنیم که یک شکل پس‌زمینه برای برخی متن باشد و در حالت شناور به شکل دیگری تبدیل شود. به این ترتیب شما می توانید گزینه های مختلف زیادی ایجاد کنید، اما در مثال، سه نوع افکت انتقال نشان داده شده است. مزیت استفاده از SVG این است که می‌توانیم اندازه فرم را برای مطابقت با اندازه کانتینر اصلی تغییر دهیم.
تصاویر کشویی
ماهیت این افکت این است که تصویر بالا و پایین می رود تا کپشن ظاهر شود. اگر با پارامترهای سبک کار می کنید، فکر می کنم می توانید به افکت های بسیار خوبی برسید و به طور پیش فرض همه چیز بسیار ساده به نظر می رسد.
با این جلوه، همه چیز ساده است، شرح تصاویر در بالا سمت راست یا پایین سمت چپ، به شکل یک روبان با پس‌زمینه تیره شفاف به بیرون می‌چرخند، همه چیز بسیار ساده با استفاده از ویژگی‌های css تغییر شکل می‌دهد.
یک راه حل جالب، ریز عکسها به شکل تیره ارائه می شوند، وقتی روی آنها قرار می گیرید، تصاویر ظاهر می شوند و امضا در پس زمینه روشن ظاهر می شود.
عنوان تصویر از گوشه ظاهر می شود و به صورت مورب به کل ناحیه تصویر گسترش می یابد.
چند راه حل جالب دیگر برای پیاده سازی کپشن های پاپ آپ برای ریز عکسها. در ویرایشگر آنلاین، می توانید گزینه ها را آزمایش کنید و به نتایج چشمگیرتری برسید.
مجموعه ای از جلوه های زیبا هنگام شناور شدن بر روی ریز عکسها، انواع مختلف ظاهر و طراحی شرح تصاویر. خطوط نازک در تضاد با پس زمینه کمی تیره، بلوک های اطلاعاتی خوانا را ایجاد می کنند.
شکل‌های عجیب و غریب و جلوه‌های بزرگنمایی در ارتباط با جلوه‌های متحرک ظاهر زیرنویس‌ها به ریز عکسها.
نمونه ای از ایجاد افکت اسلاید بصری برای نمایش شرح تصاویر حجیم تنها با استفاده از CSS3 و HTML5.
6 شرح عکس
6 نوع ظاهر شرح‌های پاپ‌آپ برای تصاویر در حالت شناور با استفاده از CSS3. یک درس مفصل در مورد پیاده سازی و پیکربندی، کدهای منبع برای دانلود موجود است.
و در نهایت، در پایان، به اصطلاح، نمی توانم ساده ترین راه را برای ایجاد یک عنوان پاپ آپ برای یک تصویر کوچک با استفاده از CSS3 ذکر نکنم.
من در یکی از درس های قبلی در مورد این روش صحبت کردم:.
آیا می خواهید در اسرع وقت ساخت وب سایت خود را شروع کنید؟ اکنون کاملاً ممکن است! به این دلیل ساده که TemplateMonster در بازار ظاهر شد بخش جدیدبا . مجموعه دوباره پر می شود، اما اکنون می توانید به دنبال چیزی مناسب برای پروژه آنلاین خود باشید. تنها کاری که باید انجام دهید این است که راه حل کامل کلید در دست خود را انتخاب کنید و روی ارائه خود کار کنید اطلاعات لازم. و فراموش نکنید که متن قالب با دست نوشته شده است.
با تمام احترام، اندرو
اول از همه، برای کسانی که کاملاً در موضوع نیستند یا اصلاً در موضوع نیستند، به طور خلاصه توضیح می دهم که چیست. اینها انواع مختلفی از افکت‌ها هستند (توصیه‌های بازشو، نکات ابزار، انتقال صاف، تبدیل، چرخش، افزایش، جابجایی، و غیره) هنگامی که با نشانگر ماوس روی عناصر وب‌سایت حرکت می‌کنید. این افکت ها هم با کمک پلاگین های مختلف جی کوئری و هم بر روی Pure قابل پیاده سازی هستند.
امروز من مجموعه بزرگی از افکت‌های شناور اصلی را برای تصاویر ایجاد شده با CSS3 بدون گنجاندن کتابخانه‌های جاوا اسکریپت آماده کردم. من در مورد مزایا و معایب پیاده سازی افکت هاور در CSS3 خالص صحبت نمی کنم، این یک موضوع دیگر است، فقط به مثال ها نگاه کنید و در صورت لزوم از یکی از مواردی که دوست دارید در سایت خود استفاده کنید. تمام جلوه های ارائه شده در بررسی با یک نسخه نمایشی و مستندات دقیق با کدهای منبع ارائه شده است. کتابچه ها عمدتاً به زبان بورژوایی هستند، اما همه چیز کم و بیش شهودی است.
فقط می خواهم توجه شما را به این واقعیت جلب کنم که همه این نمونه ها فقط در مرورگرهای مدرنی که از ویژگی های CSS3 پشتیبانی می کنند به درستی کار می کنند.
برای اینکه تصویر کلی را خراب نکنم، نام افکت ها را با ترجمه ماشینی تحریف نکردم (به استثنای برخی)، عناوین اصلی را همانطور که توسعه دهنده نامیده بود گذاشتم.
افکت شناور بسیار جالب بر روی ریز عکسها با استفاده از خطوط نازک در طراحی و تایپوگرافی. چندین نوع مختلف از جلوه های شرح تصویر، تبدیل های سه بعدی نرم و غیر مزاحم، و انتقال های شبه عنصر صاف. فقط در مرورگرهای مدرن کار می کند.
iHover مجموعه ای چشمگیر از جلوه های شناور CSS3 خالص با پشتیبانی از Bootstrap 3 است. ساخته شده بر روی Scss CSS (فایل) که به راحتی با متغیرها قابل تغییر است. کد ماژولار است و نیازی به گنجاندن کل فایل نیست. بیش از 30 افکت مختلف در یک بسته. همه چیز به خوبی مستند شده است، استفاده از جلوه ها بسیار آسان است. تنها کاری که باید انجام دهید این است که نشانه گذاری HTML را به درستی بسازید و فایل CSS را برای کار اضافه کنید.
برخی از جلوه های شناور ساده و در عین حال شیک را برای شرح تصاویر ایجاد می کند. ایده این است که وقتی ماوس را روی تصاویر کوچک می‌برید، می‌توانید عنوان، نام نویسنده و دکمه پیوند را برای نمایش مؤثر دریافت کنید. برخی از جلوه ها از تبدیل های بصری سه بعدی استفاده می کنند.
یک افکت انتقالی بسیار ساده، بدون هیچ گونه زنگ و سوت، یک تصویر کاملا گرد در یک قاب، با تغییر فوکوس در شناور تغییر شکل می دهد و تمام.
جلوه های شناور CSS3 برای ریز عکسها
توسعه‌دهنده کار خود را به‌عنوان نمونه‌ای از گالری تصاویر با جلوه‌های انتقال زمانی که حاشیه‌نویسی‌ها (شرح) به تصاویر کوچک ظاهر می‌شوند، قرار می‌دهد. پشتیبانی مطمئن توسط مرورگرهای مدرن، از جمله IE 9+ اعلام شده است. البته به سختی می توان آن را یک گالری تمام عیار نامید، اما تأثیر ظاهر امضاها بسیار جالب است.
مجموعه دیگری از قوانین CSS برای ایجاد افکت های شناور چشمگیر بر روی تصاویر کوچک کاملا گرد. این بسته شامل 7 نوع انتقال CSS3، مستندات بسیار دقیق در مورد راه اندازی و استفاده است. جلوه ها توسط تمام مرورگرهای مدرن پشتیبانی می شوند.
چرخش ریز عکسها در حالت شناور
یک جلوه ساده از چرخاندن ریز عکس‌های گرد هنگام نگه‌داشتن نشانگر ماوس بر روی آنها، می‌توانید همین موضوع را در وبلاگ من، در اعلامیه‌های پست در صفحه اصلی مشاهده کنید. در چند خط کد css پیاده سازی شده است.
اگر به معنای واقعی کلمه ترجمه شود: "اثر جنسی هنگام شناور کردن روی آن." البته بعید است که در این افکت متوجه چیزی به این سکسی شوید، مگر اینکه تخیل وحشی داشته باشید، اما اثر در نوع خود جالب است و ارزش توجه به آن را دارد.
پنج افکت مختلف برای تصاویر هنگام شناور شدن روی آنها. امضاهای پاپ آپ در سه تنوع، پرده به صورت تغییر درجه شفافیت و چرخش با حرکت افقی.
4 نوع افکت انیمیشن برای شرح تصاویر، که منحصراً با استفاده از CSS3 پیاده سازی شده است. موقعیت های مختلف در ظاهر و جلوه های انتقال، عملکرد کاملا استاندارد است. برای درک نحوه عملکرد انیمیشن، به کد منبع صفحه نمایشی نگاهی بیندازید، من هیچ سند جداگانه ای پیدا نکردم.
گالری‌های بند انگشتی مشبک با جلوه‌های زیرنویس، چرخش، محو، شناور و غیره. اسناد در مورد استفاده و پیکربندی نسبتا کمیاب است، اما شما می توانید آن را با یک میل خاص کشف کنید.
این افکت هیچ چیز خاصی را نشان نمی دهد، یک تغییر پیش پا افتاده در روشنایی تصاویر در حالت شناور، به جز اینکه عناصر انیمیشن اضافه می شوند. شما باید خودتان با تجزیه کدهای منبع آزمایشی با جزئیات پیاده سازی مقابله کنید.
مجموعه ای دیگر از 10 افکت شناور برای تصاویر، تغییرات مختلف ریز عکسها در شناور، زوم، چرخش، چرخش، تاریک کردن و غیره.
افکت های متحرک فریم مختلف در اطراف تصاویر، کاملاً جذاب به نظر می رسد، راهنمای دقیقی برای تنظیم و استفاده وجود دارد.
جلوه‌های شناور اصلی CSS3 که برای نشان دادن زیرنویس‌های تصاویر کوچک به‌طور مؤثر در شناور استفاده می‌شوند. مجموعه قوانین CSS شامل 10 افکت مختلف است که می توانید به صورت جداگانه برای تصاویر مختلف استفاده کنید. افکت ها واقعاً چشمگیر هستند، به خصوص با توجه به اینکه همه این کارها با CSS3 انجام می شود. یک راهنمای دقیق به شما کمک می کند تا بفهمید چه چیزی چیست.
ایده این است که یک SVG ایجاد کنیم که یک شکل پس‌زمینه برای برخی متن باشد و در حالت شناور به شکل دیگری تبدیل شود. به این ترتیب شما می توانید گزینه های مختلف زیادی ایجاد کنید، اما در مثال، سه نوع افکت انتقال نشان داده شده است. مزیت استفاده از SVG این است که می‌توانیم اندازه فرم را برای مطابقت با اندازه کانتینر اصلی تغییر دهیم.
تصاویر کشویی
ماهیت این افکت این است که تصویر بالا و پایین می رود تا کپشن ظاهر شود. اگر با پارامترهای سبک کار می کنید، فکر می کنم می توانید به افکت های بسیار خوبی برسید و به طور پیش فرض همه چیز بسیار ساده به نظر می رسد.
با این جلوه، همه چیز ساده است، شرح تصاویر در بالا سمت راست یا پایین سمت چپ، به شکل یک روبان با پس‌زمینه تیره شفاف به بیرون می‌چرخند، همه چیز بسیار ساده با استفاده از ویژگی‌های css تغییر شکل می‌دهد.
یک راه حل جالب، ریز عکسها به شکل تیره ارائه می شوند، وقتی روی آنها قرار می گیرید، تصاویر ظاهر می شوند و امضا در پس زمینه روشن ظاهر می شود.
عنوان تصویر از گوشه ظاهر می شود و به صورت مورب به کل ناحیه تصویر گسترش می یابد.
چند راه حل جالب دیگر برای پیاده سازی کپشن های پاپ آپ برای ریز عکسها. در ویرایشگر آنلاین، می توانید گزینه ها را آزمایش کنید و به نتایج چشمگیرتری برسید.
مجموعه ای از جلوه های زیبا هنگام شناور شدن بر روی ریز عکسها، انواع مختلف ظاهر و طراحی شرح تصاویر. خطوط نازک در تضاد با پس زمینه کمی تیره، بلوک های اطلاعاتی خوانا را ایجاد می کنند.
شکل‌های عجیب و غریب و جلوه‌های بزرگنمایی در ارتباط با جلوه‌های متحرک ظاهر زیرنویس‌ها به ریز عکسها.
جلوه‌های شگفت‌انگیز همپوشانی آیکون‌ها بر روی ریز عکسها در تغییرات ظاهری مختلف. این مثال از یک کاراکتر (+) استفاده می‌کند که توسط یک دایره با استفاده از شعاع مرزی مشخص شده است: در CSS، می‌توانید از فونت آیکون نیز برای آموزنده‌تر کردن پانل بازشو استفاده کنید.
نمونه ای از ایجاد افکت اسلاید بصری برای نمایش شرح تصاویر حجیم تنها با استفاده از CSS3 و HTML5.
6 شرح عکس
6 نوع ظاهر شرح‌های پاپ‌آپ برای تصاویر در حالت شناور با استفاده از CSS3. یک درس مفصل در مورد پیاده سازی و پیکربندی، کدهای منبع برای دانلود موجود است.
و در نهایت، در پایان، به اصطلاح، نمی توانم ساده ترین راه را برای ایجاد یک عنوان پاپ آپ برای یک تصویر کوچک با استفاده از CSS3 ذکر نکنم.
سرویس SendPulse یک ابزار بازاریابی برای ایجاد پایگاه اشتراک و تبدیل بازدیدکنندگان تصادفی سایت شما به بازدیدکنندگان عادی است. SendPulse مهمترین ویژگی ها را برای جذب و حفظ مشتریان در یک پلت فرم ترکیب می کند:
● خبرنامه های ایمیل،
● فشار وب،
● ارسال پیامک،
● SMTP،
● پست‌ها در وایبر،
● ارسال پیام به مسنجر فیس بوک.
خبرنامه های ایمیل
می توانید از تعرفه های مختلف برای انجام خبرنامه های ایمیلی از جمله رایگان استفاده کنید. طرح رایگان دارای محدودیت هایی است: پایه اشتراک بیش از 2500 نیست.اولین چیزی که هنگام کار با یک سرویس پست الکترونیکی باید با آن شروع کرد، ایجاد سرویس پست الکترونیکی خود است دفترچه آدرس. یک عنوان تنظیم کنید و لیستی از آدرس های ایمیل را آپلود کنید.
SendPulse ایجاد آن را آسان می کند فرم های اشتراکدر قالب یک پنجره پاپ آپ، فرم های تعبیه شده، شناور و ثابت در قسمت خاصی از صفحه نمایش. با کمک فرم های اشتراک، یک پایگاه مشترک را از ابتدا جمع آوری می کنید یا پایگاه خود را با آدرس های جدید تکمیل می کنید.
در فرم ساز، می توانید دقیقاً فرم اشتراکی را ایجاد کنید که به بهترین وجه با نیازهای شما مطابقت دارد و نکات خدمات به شما کمک می کند تا با این کار کنار بیایید. همچنین امکان استفاده از یکی از فرم های آماده موجود نیز وجود دارد.
هنگام ایجاد فرم های اشتراک، استفاده از ایمیل با دامنه شرکتی الزامی است. چگونه بخوانید.
الگوهای پیامبه طراحی زیبای نامه های شما برای مشترکین کمک می کند. قالب اختصاصیمی توانید حروف را در یک سازنده خاص ایجاد کنید.
پست های خودکار. مدیران محتوا به طور فعال از توزیع خودکار استفاده می کنند. این به خودکارسازی فرآیند کار با مشتریان کمک می کند. چندین راه برای ایجاد یک ایمیل خودکار وجود دارد:
● سری متوالی حروف. این ساده ترین گزینه است، زمانی که بدون توجه به شرایط، چندین نامه نوشته می شود که به ترتیب خاصی برای گیرندگان ارسال می شود. ممکن است گزینه هایی در اینجا وجود داشته باشد - سری پیام(زنجیره پیام ساده)، تاریخ خاص(زمان نامه ها در تاریخ های خاصی تنظیم شده است) حرف ماشه - نامه بسته به اقدامات مشترک (باز کردن پیام و غیره) ارسال می شود.
● اتوماسیون360- ارسال پستی با فیلترها و شرایط خاص، و همچنین در نظر گرفتن تبدیل.
● زنجیر تمام شدهتوسط الگو شما می توانید یک سری حروف را بر اساس یک الگوی مشخص ایجاد کنید، یا الگو را تغییر دهید و آن را مطابق با نیاز خود سفارشی کنید.
تست A/Bبه شما کمک می کند تا گزینه های مختلفی را برای ارسال یک سری ایمیل آزمایش کنید و بهترین گزینه را برای باز کردن یا انتقال تعیین کنید.
ارسال Push Notifications
Push-mailings یک اشتراک در پنجره مرورگر است، این یک نوع جایگزینی برای اشتراک های rss است. فناوری‌های فشاری وب به سرعت وارد زندگی ما شده‌اند، و پیدا کردن سایتی که از پست‌های ارسالی برای جذب و حفظ مشتریان استفاده نکند، مشکل است. درخواست اسکریپت برای، می‌توانید هم به صورت دستی ایمیل ارسال کنید و هم با ایجاد یک سری ایمیل یا جمع‌آوری داده‌ها از RSS، پخش خودکار ایجاد کنید. گزینه دوم به این معنی است که پس از ظاهر شدن یک مقاله جدید در سایت شما، یک اطلاعیه در این مورد به صورت خودکار با یک اطلاعیه کوتاه برای مشترکین شما ارسال می شود.
جدید از ارسالنبض– اکنون می توانید با قرار دادن تبلیغات در سایت خود با پوش نوتیفیکیشن ها درآمد کسب کنید. با رسیدن به 10 دلار، هر دوشنبه پرداخت ها به یکی از سیستم های پرداخت - ویزا / مسترکارت، پی پال یا وب مانی انجام می شود.
پیام های فشاری در این سرویس کاملا رایگان هستند. پرداخت فقط برای White Label - ارسال بدون ذکر سرویس SendPulse انجام می شود، اما اگر لوگوی سرویس شما را آزار نمی دهد، می توانید از اعلان های فشار به صورت رایگان و بدون محدودیت استفاده کنید.