Создаём parallax scrolling эффект с помощью jQuery и CSS

Автор: admin от 16-04-2012, 01:40, посмотрело: 2977

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

Создаём parallax scrolling эффект с помощью jQuery и CSS

Что такое «parallax» ?


Даже если вы не знакомы с термином «parallax scrolling», вы наверняка знакомы с техникой. Parallax scrolling — это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Когда вы наблюдаете за движущимся автомобилем, вам кажется, что объекты расположенные перед автомобилем, движутся быстрее, чем объекты расположенные за автомобилем. Parallax scrolling использует тот же принцип, чтобы заставить зрителя думать, что он наблюдает за 3D сценой...

Категория: Операционные системы » Linux

 

Переменные в CSS

Автор: admin от 12-04-2012, 01:39, посмотрело: 2903

Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных...

Категория: Информационная безопасность

 

Полезные ссылки для изучения CSS анимации

Автор: admin от 10-04-2012, 03:10, посмотрело: 2370

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками...

Категория: Информационная безопасность

 

Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

Автор: admin от 8-04-2012, 00:55, посмотрело: 1570

Привет, Хабр.
Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

Немного отойду от темы и расскажу предысторию.

...

Категория: Операционные системы » Linux

 

Codecademy добавил курсы по HTML и CSS

Автор: admin от 2-04-2012, 23:36, посмотрело: 1820

Интернет-школа программирования Codecademy расширила программу обучения и с понедельника запустила курс по HTML, CSS и JS.

Codecademy добавил курсы по HTML и CSS


Курс рассчитан на новичков в веб-разработке и пока содержит только один урок («Основы HTML») и один проект («Создание веб-страницы»). Урок состоит из семи секций и 21 упражнения. Ученики в интерактивном режиме обучаются вставлять гиперссылки, кликабельные картинки и т.д. Как обычно, во время занятий экран можно переключать в режим просмотра кода и просмотра итогового результата...

Категория: Железо » Гаджеты

 

Фотореалистическое изображение облака при помощи JavaScript и трёхмерных CSS-преобразований

Автор: admin от 27-03-2012, 09:52, посмотрело: 2435

Эта картинка, если на первый взгляд, выглядит фотографией реального облака в реальных небесах:

[эта картинка]

Тем не менее на сайте «CSS3D Clouds» она вращается, реагируя на движение мыши, и может быть заново (иначе) сгенерирована в любой момент. Потому что на деле является итогом тщательного применения джаваскрипта и трёхмерных CSS-преобразований ко множеству копий одной и той же картинки, из которой формируются своего рода воксели облака.

Категория: Железо » Гаджеты

 

SCSS — немного практики, часть I

Автор: admin от 24-03-2012, 12:22, посмотрело: 1882

SCSS — немного практики, часть IСтатей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего...

Категория: Операционные системы » Linux

 

Про вычислительную сложность алгоритмов HTML и CSS

Автор: admin от 24-03-2012, 08:59, посмотрело: 2421

HTML документ загруженный в browser есть дерево DOM элементов и набор CSS правил. Каждое CSS правило это пара — селектор (selector) и список свойств (list of properties).

Мы мало задумываемся над тем, а собственно чего стоит нарисовать HTML документ c вычислительной точки зрения? Знания про то что думатель — думает, а неонка у нея унутре ярко светит сквозь opacity:0.5 элементы бывает явно не достаточно...

Категория: Операционные системы » Linux

 
Назад Вперед