31 марта, 2010

Презентация про CSS3 и HTML5 на них же

Я показывал ее на недавнем Openwebcamp. Презентация на CSS3 и HTML5 без джаваскрипта. Как надо работает только в Safari и Хроме, но вы уже привыкли, да?

Предыстория

Началось с того что мне нужно было сделать доклад об использовании новых технологий. Делать его в Powerpoint и потом все время говорить «Ну вы это легко проверите в своём браузере» мне не нравилось, и я решил сделать презентацию целиком на этих эффектах. Вот что получилось.
То что получилось устроить все без Javascript — случайность. Приятная.

Сразу о поддержке браузеров

Это всего лишь презентация, и я c самого начала не преследовал цель полной кроссбраузерности. Мне было важно чтобы она работала в моем Сафари. Однако, в Опере и Фаерфоксе она будет работать, просто в некоторых местах коряво, а кое-где очень коряво. В Хроме она работает отлично, но иногда по непонятным мне причинам хром делает что-то вроде «Я устал от твоего CSS3» и опускает руки. Редко.
Вобщем Сафари и Хром наш выбор сегодня.

Презентация

В презентации которую я показывал на конференциях ссылки были скрыты, было видно только их черную границу справа, которая становилась красной при фокусе на ссылке. Однако чтобы можно было смотреть ее в интернете, я сделал ссылки видимыми, кликайте.

о том как это сделано

Структура кода примерно такая:

  1. <body>
  2. <section id="slide1">
  3. <h1>CSS3 и HTML5</h1>
  4. <p>Openwebcamp, Киев, 2010</p>
  5. </section>
  7. <section id="slide2">
  8. …

Каждый section — отдельный слайд. Всем им задан:

  1. section{
  2. position:absolute;
  3. top:0;left:0;
  4. height:100%;
  5. opacity:0;/*по умолчанию все слайды скрыты*/
  6. }

То есть они отображены все на одном месте, на весь экран, с прозрачностью 0.
Кроме этого, в файле содержится навигация, просто список ссылок на все эти слайды-section:

  1. <ul>
  2. <li><a tabindex="100" href="#slide1">slide1</a></li>
  3. …

Навигации тоже заданы координаты через position:absolute;. tabindex тут не просто так, позднее станет ясно зачем он мне.

Но как же я переключаю слайды? Это делается с помощью псевдокласса :target.

Этот селектор указывает на блоки, которые являются «адресом» внутренней ссылки. То есть при blabla.html#slide21, для блока у которого id=”slide21″ сработает :target.

Результат в CSS выглядит так:

  1. section:target{
  2. opacity:1;
  3. }

То есть при клике на любую ссылку из навигации, слайд на который она ссылается станет видимым.
Известное свойство transition позволит нам сделать это плавно:

  1. section{
  2. transition:all 1s linear;
  3. }

Таким образом вместо того чтобы отобразить слайд моментально, он будет плавно появляться.
Более того, я добавил еще пару эффектов, такой например:

  1. .effect-slideleft{
  2. left:-100%;
  3. opacity:1;
  4. transition:all 1s ease-in-out;
  5. }

Это значит по умолчанию слайд будет смещен влево от экрана, а при клике плавно изменит положение. (opacity:1 значит что прозрачность не будет анимироваться).
А вот эффект кручения-исчезновения в центр:

  1. .effect-rotate{
  2. transform:rotate(360deg) scale(.01) translate(50%, 50%);
  3. transition:all 1s ease-in-out;
  4. }

Подробнее об играх с transform можно почитать в моем же посте

Как переключать слайды пультом?

Я написал небольшой applescript, который по нажатию Apple Remote табулировался по ссылкам навигации (вот зачем tabindex), и по нажатию на пульте «Play» — кликал на них. Это единственная часть которую по понятным причинам трудно реализовать совсем без скрипта.

Хотя у меня была идея построить все на -webkit-transition-delay (расписать в CSS появление каждого слайда по времени). Но тогда даже я сам считал бы себя психом.
Если кому-то интересно итоговый скрипт выглядел примерно так (табулирование + enter):

  1. on nextElement()
  2. simulate keycode 48 with option
  3. simulate keycode 76
  4. end nextElement

Это я позаимствовал из Sofa Control.

Почитать

Буду рад услышать ваши мысли про эту затею. Надеюсь она вдохновит кого-то на что-нибудь еще клёвое :)

Fun, XHTML/CSS, Общие

23 комментария к “Презентация про CSS3 и HTML5 на них же”

1. 31 марта | burkanov

Очень мило получилось, спасибо.

2. 31 марта | Ptico

26й слайд очень полезный)

3. 31 марта | Vladimir

обалденно! А видео с мероприятия можно где-то скачать?
а то слайдов мало :)

4. 31 марта | Чистяков Денис

Мило, интересно и познавательно как всегда, вот только не понял, что делает иконка IE на 16-ом слайде про круглые углы?
Или вы про IE9, который обещает CSS3?)

5. 31 марта | akella

Да, про IE9, просто я это проговаривал, к сожалению презентация не очень автономная получилась, но я скорее хотел поделиться ее кодом чем содержанием =)

Vladimir: да, видео выложат со дня на день на сайте Openwebcamp

Ptico может ты про 27-й? ) Мне он по крайней мере кажется полезнее =)

6. 31 марта | arty

честно говоря, мне больше нравится продвигаемый оперой вариант (http://www.opera.com/browser/tutorials/operashow/), который менее приложение, и более документ. Конечно, в нём нет красивых переходов, зато переключение слайдов работает привычными пробелом и стрелками, заодно можно стандартными home/end оказаться в начале или конце. Вот мой пример такой презентации: http://arty.name/clientside2007/speed.manipulation.slides.xhtml Сразу скажу, что в хроме/сафари он «не работает» только потому, что они не включают для полноэкранного режима media projection, зато этот «баг» демонстрирует graceful degradation.

7. 1 апреля | mikhail

Выглядит впечатляюще, но у меня очень сильно грузило процессор, причем все время. Но, в отличии от флэша, не тормозило ;)

А можно хотя бы вкратце, про что было во время 7-го слайда (со звездой смерти)?

8. 1 апреля | Люба

В хроме (убунту) все слайды слились в один.

9. 1 апреля | Akella

Как раз то о чем я говорил, бедняга не выдерживает ;)

10. 1 апреля | vitex

1 апреля на стартовой по CSS3-му :)))

11. 2 апреля | Nayjest, web-superman

На Украинском форуме интернет-деятелей эта презентация тоже очень доставляла, спасибо. Особенно звезда смерти, коты и демотиватор :)

Разве что, можно было побольше уделить внимания мобильным платформам.

12. 2 апреля | macgera

Прикольно сделано

13. 3 апреля | Nayjest, web-superman

Вот мой отчет (и кросспост на Хабре). Юрий, вам будет интересно :)

14. 4 апреля | Vladimir

жаль, что видео до сих пор не выложили на Openwebcamp :((

15. 4 апреля | Samter

Довольно прикольно. Хром справился на “Ура”…. а вот опера 10.51 на некоторых поперхнулась. Жаль не скоро всему этому начать жить.

16. 8 апреля | kigorw

тоже сделал описание своей презентации http://www.kigorw.com/articles/talks-engine

17. 30 апреля | alex.kotomanov

Спасибо, очень интересно! Сейчас тоже делаю презентацию на hml5+css3. Так что очень пригодится информация. =)

18. 30 апреля | shaman.sir

Отличная была презентация! Иллюстративная.

19. 5 мая | akella

Спасибо! :)

20. 14 июня | Макс

Пасибо за презентацию)) очень познавательно))

21. 20 июня | Bobi

Хорошая презентация всем спасибо!!!!

22. 23 июня | Oxygen

Классная презентация! Ах, когда же закончится битва кодеков и HTML5 наконец станет стандартом. Хотя… это меньше, чем полдела, пока жив IE, HTML5 будет оставаться в тени. Ну и с этим IE, всё равно я забацал блог на HTML5 (http://oxygen.ho.ua), правда, он пока пустой.

23. 30 августа | Лига

Я олдскульный какой-то. Не прельщают меня сабжи.

Оставить комментарий

Комментировать

Обязательные поля