لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش ایجاد یک جدول زمانی متحرک تعاملی با jQuery
Creating an Interactive Animated Timeline with jQuery
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
بیاموزید که یک جدول زمانی جذاب ، تعاملی و متحرک با jQuery ایجاد کنید. در این دوره ، Chris Converse نحوه ایجاد یک جدول زمانی کشویی ، با نشانگرهای تاریخ و محتوای مرتبط را به شما نشان می دهد. داستان خود یا سازمان خود را با یک جدول زمانی تعاملی گرافیکی غنی بگویید.
موضوعات شامل:
آماده سازی آثار هنری li>
تنظیم پرونده های پروژه li>
ایجاد محفظه های HTML li>
افزودن محتوا به محفظه های HTML
سبک کردن جدول زمانی با CSS
افزودن jQuery به پروژه شما li>
تنظیم طرح با jQuery
افزودن عناصر ناوبری li>
متحرک سازی محتوا بر اساس پیمایش li>
افزودن ویژگی های تشخیص خودکار و اندازه صفحه li>
سرفصل ها و درس ها
مقدمه
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
نمایش نظرات