Design and Build Scroll-Based CSS Animations [2014 г.]

Ответить на тему
 

neoman ®

Стаж: 3 года 9 месяцев

Сообщений: 25

Симпатии: 15

Design and Build Scroll-Based CSS Animations
Производитель: Tuts+
Год выпуска: 2014
Язык: английский
Автор: Gary Simon
Продолжительность: 2:00 ~ 9:00
Файлы примеров: присутствует
Описание: Activating CSS animations based on scrolling is a relatively new (and cool) technique that many of today’s front-end developers are taking advantage of. These parallax scrolling effects are triggered by a user scrolling the page, and can really show off your content and help to enhance your websites. In this course, Gary Simon will show you how to design and then build scroll-based CSS animations.
Курс создание WEB страничку от дизайна до готовый верстки. Автор показывает как с помощью CSS3 сделать эффект плавный появление элементы, Respone дизайн для мобильные устройств.

Содержание

1.Introduction1 lesson, 01:28
1.1Introduction01:28
2.Photoshop Mockup Design5 lessons, 58:16
2.1Mockup Design (Part 1: Above the Fold)14:33
2.2Mockup Design (Part 2: First Animation)13:12
2.3 Mockup Design (Part 3: Second Animation)09:58
2.4Mockup Design (Part 4: Third Animation)12:40
2.5Exporting Graphic Assets07:53
3.HTML & CSS3 lessons, 37:54
3.1HTML & CSS (Part 1: Above the Fold)14:56
3.2HTML & CSS (Part 2: First Animation)10:01
3.3HTML & CSS (Part 3: Second & Third Animation)12:57
4.Tying It All Together5 lessons, 38:57
4.1Animating the Phone and Monitor09:08
4.2Animating the Icons04:52
4.3Animating the Columns & Map07:43
4.4Responsive Adjustments (Part 1)13:10
4.5Responsive Adjustments (Part 2)04:04
5.Conclusion1 lesson, 01:07
5.1Conclusion01:07

MI

General
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 10.6 MiB
Duration : 1mn 28s
Overall bit rate mode : Variable
Overall bit rate : 1 006 Kbps
Movie name : 1-Introduction
Encoded date : UTC 2014-02-24 22:01:22
Tagged date : UTC 2014-02-24 22:01:22
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : [email protected]
Format settings, CABAC : No
Format settings, ReFrames : 3 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 1mn 28s
Source duration : 1mn 28s
Bit rate : 814 Kbps
Width : 1 280 pixels
Height : 720 pixels
Display aspect ratio : 16:9
Frame rate mode : Variable
Frame rate : 30.000 fps
Minimum frame rate : 30.000 fps
Maximum frame rate : 30.030 fps
Standard : NTSC
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.029
Stream size : 8.56 MiB (81%)
Source stream size : 8.56 MiB (81%)
Language : English
Encoded date : UTC 2014-02-24 22:01:22
Tagged date : UTC 2014-02-24 22:01:22
mdhd_Duration : 88267
Audio
ID : 2
Format : AAC
Format/Info : Advanced Audio Codec
Format profile : LC
Codec ID : 40
Duration : 1mn 28s
Source duration : 1mn 28s
Bit rate mode : Variable
Bit rate : 192 Kbps
Maximum bit rate : 248 Kbps
Channel(s) : 2 channels
Channel positions : Front: L R
Sampling rate : 44.1 KHz
Compression mode : Lossy
Stream size : 2.00 MiB (19%)
Source stream size : 2.00 MiB (19%)
Language : English
Encoded date : UTC 2014-02-24 22:01:22
Tagged date : UTC 2014-02-24 22:01:22
mdhd_Duration : 88305
Видео кодек: Другой MPEG4
Видео: h264, yuv420p, 1280x720, 30.00 fps(r)
Аудио: aac, 44100 Hz, stereo

Скриншоты





Создавать темы 02-Фев-2015 15:29

[Профиль]  [ЛС] 

metallyst

Стаж: 5 лет 10 месяцев

Сообщений: 5

Не легче ли использовать библиотеку animate.css?

Создавать темы 02-Фев-2015 20:09

[Профиль]  [ЛС] 

neoman ®

Стаж: 3 года 9 месяцев

Сообщений: 25

Симпатии: 15

916578Не легче ли использовать библиотеку animate.css?
Здесь все делается с нуля, потом вы сами можете самостоятельно сделать подобные вещи.

Создавать темы 03-Фев-2015 09:45

[Профиль]  [ЛС] 

hulki

Стаж: 3 года 10 месяцев

Сообщений: 75

Симпатии: 8

а с русском переводом нету?

Создавать темы 03-Фев-2015 11:20

[Профиль]  [ЛС] 

neoman ®

Стаж: 3 года 9 месяцев

Сообщений: 25

Симпатии: 15

916734а с русском переводом нету?
К сожалению нету, но там всё понятно можещ даж звук выключить :-)

Создавать темы 03-Фев-2015 11:55

[Профиль]  [ЛС] 

ivin

Стаж: 5 лет 7 месяцев

Сообщений: 41

neoman раздает нужные курсы для веб разработчиков. Цены ему нет.

Создавать темы 03-Фев-2015 12:10

[Профиль]  [ЛС] 

neoman ®

Стаж: 3 года 9 месяцев

Сообщений: 25

Симпатии: 15

916742neoman раздает нужные курсы для веб разработчиков. Цены ему нет.
Ожидается Серии Уроков: :-)

Список

jQuery Mobile 1.4 New Features and Migration
Create an HTML5 Video Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
Create an Interactive Homepage Marquee with jQuery and Dreamweaver
jQuery for Web Designers
Create a Sortable Photo Gallery with jQuery
Create an Interactive Photo Gallery with jQuery and Dreamweaver
Create a Sliding Tabbed Panel with jQuery and Dreamweaver
Create an Interactive Animated Timeline with jQuery
Create Navigation Menus with jQuery and Dreamweaver
Create Animated Rollovers with jQuery and Dreamweaver
jQuery Data with AJAX
jQuery Mobile Essential Training
jQuery UI Widgets
Add a Wraparound Effect for a Marquee with jQuery
Set a Marquee to Autoplay with jQuery
Set a Marquee to Autoplay with jQuery and Dreamweaver
Create an Animated Bar Chart with jQuery
Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver
Create an Expandable FAQ Listing with jQuery and Dreamweaver
Create an Animated Bar Chart with jQuery and Dreamweaver

Создавать темы 03-Фев-2015 12:27

[Профиль]  [ЛС] 

Jack Smeet

Стаж: 4 года 8 месяцев

Сообщений: 67

Симпатии: 17

У меня есть с русской озвучкой

Создавать темы 03-Фев-2015 14:36

[Профиль]  [ЛС] 

neoman ®

Стаж: 3 года 9 месяцев

Сообщений: 25

Симпатии: 15

916768У меня есть с русской озвучкой
залейте тогда

Создавать темы 03-Фев-2015 14:57

[Профиль]  [ЛС] 

fira_fira

Стаж: 4 года 6 месяцев

Сообщений: 52

Симпатии: 2

916578Не легче ли использовать библиотеку animate.css?
там ограничиваетесь эффектами появления и выхода

_________________
Подпись отключена за нарушение правил форума

Создавать темы 06-Фев-2015 15:26

[Профиль]  [ЛС] 

ivin

Стаж: 5 лет 7 месяцев

Сообщений: 41

Ожидается Серии Уроков: :-)
Я так понял вы с js много работаете. Тогда посмотрите и CoffeeScript

Создавать темы 07-Фев-2015 15:46

[Профиль]  [ЛС] 

alimalibaev

Стаж: 5 лет 5 месяцев

Сообщений: 28

917825
Ожидается Серии Уроков: :-)
Я так понял вы с js много работаете. Тогда посмотрите и CoffeeScript
С выпуском EcmaScript 6, обоятельный CoffeeScript сдохнет td

Создавать темы 07-Фев-2015 22:15

[Профиль]  [ЛС] 
Показать сообщения:    
Ответить на тему

Текущее время: 20-Ноя 01:01

Часовой пояс: UTC + 5



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы