گالری های تصاویر مقصد مورد علاقه اکثر وب سایت ها هستند. و در بسیاری از موارد ، بهترین کار این است که آن گالری های تصویر را با نشاط و ایستا نگه دارید و اجازه دهید تصاویر جادوی خود را داشته باشند.
اما ، یک اثر پیمایش پازل کشویی را به آن اضافه کنید یک گالری عکس (همانطور که در این آموزش خواهیم انجام داد) ، می تواند یک کلاسیک بی انتها را با طراوت لمس کند.
در این آموزش ، ما به شما نشان خواهیم داد که چگونه یک طرح ساده بسازید که یک گالری تصویر با یک اثر پیمایشی پازل کشویی بر روی Divi را نشان دهد.
نکته اصلی این است که درک کنید چگونه اندازه تصاویر با مقادیر افست عمودی و افقی هر اثر پیمایش ارتباط دارد تا تصویر دقیقاً یک نقطه حرکت کند. اما هنگامی که تکمیل شد ، اثر حرکتی حاصله دقیق و دقیق است زیرا به تدریج گالری تصاویر را به روشی منحصر به فرد جمع می کند و آشکار می کند.
نتیجه احتمالی
در اینجا یک نمای کلی از طرح گالری تصاویر با جلوه اسکرول پازل کشویی است که قصد داریم در این آموزش ایجاد کنیم.
ایجاد بخش هدر
برای شروع ، بیایید یک بخش سریع سربرگ بسازیم که به کاربر می گوید برای مشاهده گالری و با جلوه های عالی پیمایش ، صفحه را پیمایش کند.
یک ردیف اضافه کنید
یک ردیف از یک ستون به قسمت پیش فرض اضافه کنید.
ماژول متنی را اضافه کنید
درون ستون / سطر یک ماژول متن جدید اضافه کنید.
در تنظیمات متن ، محتوای بدن را با موارد زیر به روز کنید:
<h1>Image Gallery</h1>
تنظیمات ماژول متن
در برگه Design ، متن را به صورت زیر به روز کنید:
- فونت عنوان: Roboto
- وزن وزن قلم عنوان: جسورانه
- سبک فونت عنوان: TT
- تراز بندی متن سربرگ: مرکز
- اندازه متن عنوان: 50 پیکسل (دسک تاپ) ، 40 پیکسل (رایانه لوحی و تلفن)
- فاصله نامه عنوان: 4px
نماد ماژول Blurb را اضافه کنید
پس از نصب متن ، یک ماژول متن ارائه جدید را در زیر ماژول متن اضافه کنید.
سپس همه عنوان و متن را از محتوای پیش فرض حذف کرده و استفاده از نماد پیکان رو به پایین را انتخاب کنید.
تنظیمات متن ارائه
سپس تنظیمات متن ارائه را با یک رنگ جدید و یک انیمیشن اسلاید تکراری به روز کنید.
- رنگ نماد: # ffb500
- سبک انیمیشن: اسلاید
- جهت انیمیشن: پایین
- شدت انیمیشن: 20٪
- تکرار انیمیشن: حلقه
بالشتک بخش
برای دادن فضای بخش برای پیمایش ، بالشتک را به صورت زیر به روز کنید:
- بالشتک: 20vh بالاتر ، 50vh زیر
در اینجا ما از واحد طول vh نسبت به ارتفاع پنجره مرورگر استفاده می کنیم تا فاصله به طور مداوم در تمام اندازه های مرورگر متناسب باشد.
ایجاد گالری تصاویر با جلوه های پیمایشی
اکنون که بخش هدر ما کامل شد ، ما آماده ساختن گالری تصاویر واقعی با جلوه های پیمایش پازل کشویی هستیم. کل گالری از سه ردیف 4 تصویر / ستون در هر ردیف ساخته می شود تا در مجموع 12 تصویر ایجاد کند. با این حال ، پس از پایان یافتن طرح ، می توانید به راحتی خطوط و تصاویر بیشتری اضافه کنید.
ایجاد بخش و خط
یک بخش جدید اضافه کنید
بیایید با اضافه کردن یک بخش منظم جدید در زیر قسمت عنوان شروع کنیم.
یک ردیف اضافه کنید
سپس یک ردیف با چهار ستون به بخش اضافه کنید.
تنظیمات خط
در زیر تنظیمات خط ، موارد زیر را به روز کنید:
- عرض روده: 1
- عرض: 100٪
- حداکثر عرض: 1200 px (دسک تاپ) ، 600 px (تبلت) ، 300 px (تلفن)
چگونه عرض خط اندازه تصویر را تعیین می کند
عرض ردیف برای این طرح بسیار مهم است زیرا عرض هر چهار ستون را تعیین می کند. هنگامی که عرض آبچکان را روی 1 تنظیم کنیم ، دیگر هیچ حاشیه ای بین تصاویر وجود نخواهد داشت.
و هنگامی که ما حداکثر عرض را روی 1200px قرار دهیم ، چهار ستون طرح باعث می شود هر یک از ستون ها / تصاویر دقیقا 300px عرض (1200px / 4 = 300px) ایجاد کنند.
همچنین ، از آنجا که هر یک از تصاویر مربع است ، می دانیم که ارتفاع هر تصویر نیز 300 پیکسل خواهد بود. اگر نمی خواهیم مجبور نباشیم آنرا حفظ کنیم.
به عنوان مثال ، ما همچنین می توانیم یک طرح سه ستونی با تصاویر 400 400 300 پیکسل داشته باشیم. دانستن عرض تصویر (300 پیکسل) و ارتفاع (همچنین XNUMX پیکسل) کلید ایجاد اثر پیمایشی بعدا خواهد بود.
افزودن تصاویر
تصویر 1 را اضافه کنید
تصویر 1 جلوه های پیمایش کنید
رابطه بین اندازه تصویر و جبران اثر پیمایش
هنگام استفاده از افکت پیمایش عمودی و افقی ، مهم است که مقدار عددی وارد شده را نشان می دهد. در این مثال ، ما یک حرکت عمودی داریم که جبران کننده -3 است. این -3 در واقع -300 پیکسل (یا 300 پیکسل پایین) است که عرض تصویر است.
وقتی کاربر پیمایش می کند ، جبران به 0 می رسد (موقعیت خانه). این همان چیزی است که اثر پیمایشی را ایجاد می کند که تصویر را دقیقاً به یک بلوک / فریم منتقل می کند. حرکت افقی از 3 شروع می شود (300 پیکسل از سمت راست) و در موقعیت پیش فرض خود متوقف می شود. این دو اثر با هم ترکیب می شوند و یک اثر پیمایش دو بخشی منحصر به فرد ایجاد می کنند.
تصویر 2 را اضافه کنید
پس از اضافه شدن جلوه های پیمایش به تصویر 1. تصویر جدیدی به ستون 2 اضافه کنید.
ما این تصویر استاتیک را بدون هیچ گونه پیمایش ترک خواهیم کرد.
تصویر 3 را اضافه کنید
سپس یک ماژول تصویر دیگر به ستون 3 اضافه کنید و ماژول را با یک تصویر جدید به روز کنید.
تصویر 3 جلوه های پیمایش کنید
در بخش تنظیمات تصویر ، جلوه های پیمایش زیر را به روز کنید:
در زیر زبانه حرکت افقی ...
- حرکت افقی را فعال کنید: بله
- شروع افست: -3 (با 0٪ پنجره)
- میانگین جابجایی: 0 (با 15٪ نمای دید)
- جابجایی پایان: 0 (با 100٪ نمای دید)
تصویر 4 را اضافه کنید
برای ایجاد آخرین تصویر ، تصویر 1 را کپی کرده و در ستون 4 جای گذاری کنید.
تصویر جدیدی را در تنظیمات تصویر بارگذاری کنید.
تصویر 4 جلوه های پیمایش کنید
سپس جلوه های پیمایش زیر را به روز کنید:
در زیر زبانه حرکت عمودی ...
- حرکت عمودی را فعال کنید: بله
- شروع افست: 3 (با 0٪ پنجره)
- میانگین جابجایی: 0 (با 15٪ -28٪ از دیدگاه)
- جابجایی پایان: 0 (با 40٪ نمای دید)
در زیر زبانه حرکت افقی ...
- حرکت افقی را فعال کنید: بله
- شروع افست: 3 (با 0٪ پنجره)
- میانگین جابجایی: 3 (با 28٪ نمای دید)
- جابجایی پایان: 0 (با 40٪ نمای دید)
خط کپی
اکنون که جلوه های پیمایشی تصویر برای ردیف اول انجام شده است ، تمام کاری که باید انجام دهیم این است که برای ایجاد تصاویر بیشتر و جلوه های پیمایشی مربوطه ، ردیف را کپی کنیم. برای این مثال ، بیایید دو ردیف را کپی کنیم تا در مجموع سه ردیف ایجاد کنیم.
تصاویر را در صورت نیاز جایگزین و تنظیم مجدد کنید
سپس می توانیم با استفاده از تابع کشیدن و رها کردن تصاویر را به هر کجا که می خواهیم منتقل کنیم. اینجاست که می‌توانید خلاق باشید و ببینید که تصاویر متحرک چگونه اسکرول می‌شوند. و هنگامی که تصاویر در جای خود قرار گرفتند، می توانید محتویات ماژول تصاویر را با تصاویر جدیدی جایگزین کنید که نیازهای تصویر را برآورده می کند. وب سایت.
لپ تاپ های نهایی
دید بخش
از آنجا که تصاویر ما احتمالاً در خارج از بخش / پنجره گسترش می یابند ، بیایید سرریز را پنهان کنیم تا کمی پاک شود. تنظیمات بخش را باز کنید و موارد زیر را به روز کنید:
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
بالشتک بخش
ما می خواهیم اثر پیمایشی عمودی تصویر بالا (که تا بالای قسمت گسترش می یابد) با وجود سرریز پنهان قابل مشاهده باشد. بنابراین بیایید بالشتک بالا و پایین برابر با ارتفاع تصویر (300 پیکسل) اضافه کنیم.
نتیجه تا اینجا
اگر می خواهید طراحی گالری را بدون فاصله بین تصاویر حفظ کنید ، در حال حاضر می توانیم در اینجا متوقف شویم. در اینجا نتیجه تا اینجا نشان داده شده است. توجه کنید که تصاویر دقیقاً در یک بلوک / فریم چگونه به صورت عمودی و افقی حرکت می کنند.
افزودن فاصله بین تصاویر
از آنجا که عرض ناودان را روی 1 قرار می دهیم ، دیگر بین ستون ها یا تصاویر خود حاشیه ای نداریم. برای ایجاد مجدد فاصله مشابه ، می توانیم به هر فریم fill اضافه کنیم.
این به ما امکان می دهد بدون نیاز به عملکرد جلوه های پیمایش ، فاصله مورد نیاز خود را ایجاد کنیم. این امکان وجود دارد زیرا افزودن padding به تصویر باعث افزایش عرض یا ارتفاع ظرف تصویر نمی شود. با استفاده از حاشیه ها نیز می توانید جلوه ای مشابه داشته باشید.
تصویر 1 بالشتک
تنظیمات مربوط به تصویر 1 را باز کرده و موارد زیر را به روز کنید:
- padding: 10 پیکسل در بالا ، 10 پیکسل در پایین ، 10 پیکسل در سمت چپ ، 10 پیکسل در سمت راست
پر کردن به همه تصاویر
قبل از ذخیره ، بر روی گزینه padding کلیک راست کرده و "Extend padding" را انتخاب کنید. در پنجره بازشو Expand Styles ، بر روی دکمه Extend کلیک کنید تا این پر کردن به تمام تصاویر موجود در صفحه گسترش یابد.
نتیجه نهایی
این نتیجه تمام کارهایی است که تاکنون انجام داده ایم.
آخرین افکار
جلوه پیمایش پازل کشویی که در این مقاله نشان داده شده است ، چیزی بیش از طراحی منحصر به فرد برای گالری تصاویر به ما نمی دهد. همچنین به این نکته اشاره می شود که برای اثرات پیمایش دقیق تر می توان از جابجایی های افقی و عمودی استفاده کرد.
با تغییر دادن جابجایی ها و مخلوط کردن مکان تصاویر ، می توانید انواع مختلف این طرح را کشف کنید.
همچنین می توانید تعداد ستون ها را تغییر دهید به شرطی که بفهمید ستون / اندازه تصویر چگونه تغییر می کند و سپس نحوه به روزرسانی جبران اثر جلوی پیمایش با مقدار مربوطه.
برخی از منابع پیشنهادی
احتمالاً اینها را پیدا خواهید کرد ressources جالب است زیرا آنها همچنین به شما این امکان را می دهند که گالری عکس روی خود ایجاد کنید وبلاگ وردپرس.
- 10 افزونه برای ایجاد گالری عکس در وردپرس
- نحوه ایجاد گالری عکس با افزونه Envira
- افزونههای 5 وردپرس برای ایجاد گالری عکس
- نحوه استفاده از ماژول گالری تصاویر در Divi
