آموزش ایجاد یک جدول زمانی متحرک تعاملی با jQuery

Creating an Interactive Animated Timeline with jQuery

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: بیاموزید که یک جدول زمانی جذاب ، تعاملی و متحرک با jQuery ایجاد کنید. در این دوره ، Chris Converse نحوه ایجاد یک جدول زمانی کشویی ، با نشانگرهای تاریخ و محتوای مرتبط را به شما نشان می دهد. داستان خود یا سازمان خود را با یک جدول زمانی تعاملی گرافیکی غنی بگویید.
موضوعات شامل:
  • آماده سازی آثار هنری
  • تنظیم پرونده های پروژه
  • ایجاد محفظه های HTML
  • افزودن محتوا به محفظه های HTML
  • سبک کردن جدول زمانی با CSS
  • افزودن jQuery به پروژه شما
  • تنظیم طرح با jQuery
  • افزودن عناصر ناوبری
  • متحرک سازی محتوا بر اساس پیمایش
  • افزودن ویژگی های تشخیص خودکار و اندازه صفحه

سرفصل ها و درس ها

مقدمه Introduction

  • خوش آمدی Welcome

  • با استفاده از پرونده های تمرینی Using the exercise files

  • برای افرادی که از Dreamweaver استفاده می کنند For those using Dreamweaver

1. ایجاد گرافیک وب و محتوای HTML 1. Creating the Web Graphics and HTML Content

  • در حال ذخیره گرافیک وب از Photoshop Saving web graphics from Photoshop

  • پیوند دادن پرونده های CSS و JavaScript به پرونده HTML شما Linking CSS and JavaScript files to your HTML file

  • ایجاد ظروف اصلی HTML Creating the main HTML containers

  • افزودن محتوا به HTML Adding content to the HTML

2. اضافه کردن سبک های CSS برای چیدمان و موقعیت یابی 2. Adding CSS Styles for Layout and Positioning

  • ظرف اصلی جدول و عنوان را طراحی کنید Styling the main timeline container and heading

  • ایجاد یک پس زمینه شیب برای ظرف پانل Creating a gradient background for the panel container

  • سبک های کشویی Styles for the sliders

  • سبک های محتوای پانل Styles for the panel content

3. نهایی کردن صفحه آرایش و پنل های متحرک با jQuery 3. Finalizing Layout and Animating Panels with jQuery

  • تنظیم طرح با jQuery Adjusting the layout with jQuery

  • ایجاد ناوبری بر اساس HTML Generating the navigation based on the HTML

  • موقعیت یابی و طراحی ناوبری Positioning and styling the navigation

  • فعال کردن ناوبری برای متحرک کردن پانل ها Activating the navigation to animate the panels

  • متحرک کردن زمینه Animating the background

4- ساخت طراحی پاسخگو 4. Making the Design Responsive

  • اضافه کردن سبک های CSS برای تصاویر پانل Adding CSS styles for the panel images

  • ایجاد یک پرس و جو رسانه CSS برای صفحه نمایش های کوچک Creating a CSS media query for small screens

  • پنهان کردن عناصر روی صفحه نمایش های کوچک Hiding elements on small screens

5. اضافه کردن Autostart و تشخیص اندازه صفحه 5. Adding an Autostart and Screen Size Detection

  • تنظیم جدول زمانی به autostart روی یک پانل Setting the timeline to autostart on a panel

  • تشخیص اندازه صفحه برای یک طرح پاسخگو Detecting the screen size for a responsive layout

  • بهینه سازی CSS برای IE 7 و 8 Optimizing CSS for IE 7 and 8

نتیجه Conclusion

  • از اینجا به کجا بروم Where to go from here

نمایش نظرات

آموزش ایجاد یک جدول زمانی متحرک تعاملی با jQuery
جزییات دوره
1h 7m
23
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
47,638
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Converse Chris Converse

طراح و توسعه دهنده در استودیوی طراحی کدیفای