Даже при том, что мы определенно живем в Эру Flickr (очевидно, это тот, который прибывает сразу после Эры Водолея), все еще есть кое-что настолько прекрасное в том, чтобы иметь возможность распространять большую коробку фотографий по моему кухонному столу. Фактически, мой любимый скринсейвер довольно неплохо справляется с этой задачей — это тот, который встроен в MacOS X, который захватывает фотографии из вашей библиотеки iPhoto и постепенно разбрасывает их по всему экрану в красивой, грязной куче. Это выглядит примерно так:
Фотографии медленно исчезают и падают на экран, беспорядочно вращаясь. Это отличный эффект, и на него довольно приятно смотреть. На правильном сайте это может даже сделать забавную альтернативу обычной галерее изображений.
Можем ли мы достичь этого только с помощью CSS3? Могу поспорить, вы уже думаете о том, как заставить это работать. К сожалению, версии Firefox и IE, которые будут их поддерживать, все еще находятся в бета-версии — и даже когда они появятся, мы все знаем, сколько времени потребуется миру для обновления своих браузеров. А пока давайте рассмотрим гибридный подход:
- Для людей без JS изображения будут показаны в чистой, простой фотогалерее. Здесь нет необходимости в героизме.
- Браузеры с включенным JS, но без CSS3-fu увидят версию этой галереи, которая плавно выцветает на фотографиях и разбрасывает их случайным образом. Мы будем использовать jQuery для этого.
- Браузеры, которые могут выполнять CSS3-преобразования, получат одинаковую анимацию затухания и рассеяния, а также немного поворота для более реалистичного, грязного эффекта.
Создайте простую галерею
Давайте начнем с голой версии. Вот небольшая фотогалерея с использованием снимков размером 250 × 250, которые я сделал с помощью различных приложений для iPhone:
Разметка для пользователей, не являющихся JS, проста: некоторые div , немного CSS для базового макета и изображения, расположенные слева в виде сетки. Это чисто и легко и пока будет хорошо; Вы можете увидеть разметку в Примере 1. Давайте перейдем к рассмотрению пользователей JS.
Введите Модернизр
Существует несколько различных способов проверить наличие или отсутствие JS, но что вы делаете, когда вам нужно больше подробностей, например, поддерживает ли браузер CSS3 box-shadow или знает, что делать с canvas ? Введите Modernizr , простой и интуитивно понятный способ обнаружения различных видов поддержки браузеров, не полагаясь на неуклюжие тесты на анализ и расстраивание браузера. Все подробности о том, как это происходит, вы можете услышать в недавнем выпуске подкаста SitePoint. Мы будем использовать его, чтобы увидеть, доступны ли CSS3-преобразования.
Пользовательский компоновщик Modernizr может создавать аккуратную минимизированную версию скрипта, которая включает в себя только те тесты, которые вам нужны, поэтому я использовал компоновщик для сборки с помощью этой опции.
Давайте включим это и jQuery на нашу страницу. Теперь к вашему HTML-элементу должны быть прикреплены два новых класса: js и csstransforms . Используйте инструменты разработчика вашего любимого браузера, чтобы убедиться, что они есть.
Регулировка CSS
Когда JavaScript включен, я бы хотел, чтобы изображения сначала были скрыты — мы будем раскрывать их, увеличивая их непрозрачность по одному. Они также будут абсолютно позиционированы в области галереи. Modernizr дал нам класс js , так что давайте используем это:
.js #gallery { width: 960px; height: 300px; margin: 50px 0; } .js #gallery, .js #info { width: 100%; position: relative; } .js #gallery img { margin: 0; opacity: 0.0; -moz-opacity: 0.0; -ms-opacity: 0.0; -webkit-opacity: 0.0; position: absolute; bottom:0; left: 0; }
Так как свойство opacity изображений установлено в 0.0 , вы не должны видеть изображений после того, как вставите это. Все нормально; мы вернем их все в следующей части. Если вас это беспокоит, прокомментируйте эти строки.
Подготовка изображений
Наша следующая задача — перетасовать изображения: мы начнем с each цикла jQuery, который назначает им новые стили. Наш div галереи имеет ширину 760 пикселей и высоту 300 пикселей, поэтому нам понадобится число до 510 для левых позиций изображений и до 30 для их позиций снизу — это должно гарантировать, что они остаются в пределах Границы галереи. По мере того, как они попадают в деление, они будут уменьшаться до своего нормального размера, поэтому мы также добавим переменную для количества жира в пикселях, которое мы хотим добавить к каждому измерению. Мои изображения не превышают 250 пикселей в любом измерении, поэтому обязательно сделайте небольшой расчет для размещения больших или меньших изображений!
Объект JavaScript Math позаботится о том, чтобы мы разработали для нас несколько случайных мест размещения. Поскольку Math.random знает только, как выбрать число от 0 до меньше единицы, нам нужно умножить, а затем округлить с помощью Math.floor чтобы получить полезную цифру:
$('#gallery img').each(function(count) { var $photo = $(this); var zoom = 150; var offsetLeft = Math.floor(Math.random() * 510); var offsetBottom = Math.floor(Math.random() * 70); });
Теперь у нас есть наши числа, мы можем подключить их к стилям и атрибутам изображений, используя методы jQuery css и attr . Это несколько простых строк:
$('#gallery img').each(function(count) { ... $photo.css({ "left" : offsetLeft + "px", "bottom" : offsetBottom + "px" }).attr({ height : $photo.height() + zoom, width : $photo.width() + zoom }); });
Showdown
Каждое фото теперь должно быть заправлено искусственными пикселями и небрежно брошено в беспорядок — пора раскрывать их один за другим. Анимационный метод jQuery может позаботиться о постепенном уменьшении изображения и увеличении прозрачности — просто передайте ему атрибуты CSS, которые вы хотите изменить, и время, потраченное на это.
Мы завернем все это в методе JavaScript setTimeout , который позволяет нам выполнять действия после задержки. В нашем случае мы хотим, чтобы наша анимация происходила с интервалом в пять секунд (это 5000 миллисекунд). Вы заметили, что у нас есть счетчик count в each нашей функции? Мы будем использовать это для разметки наших фото-анимаций, умножив их на 5000 в конце each цикла. На этом этапе весь цикл должен выглядеть следующим образом:
$('#gallery img').each(function(count) { var $photo = $(this); var zoom = 150; var offsetLeft = Math.floor(Math.random() * 450); var offsetBottom = Math.floor(Math.random() * 30); $photo.css({ "left" : offsetLeft + "px", "bottom" : offsetBottom + "px" }).attr({ height : $photo.height() + zoom, width : $photo.width() + zoom }); if (Modernizr.csstransforms) { var degrees = Math.floor(Math.random() * 40) -20; var rotations = "rotate(" + degrees + "deg)"; $photo.css({ "transform" : rotations, "-moz-transform" : rotations, "-ms-transform" : rotations, "-o-transform" : rotations, "-webkit-transform" : rotations }); } setTimeout(function() { $photo.animate({ height: "-=" + zoom + "px", width: "-=" + zoom + "px", opacity: 1.0 }, 4000); }, (count*5000)); count++; });
Если все прошло хорошо, у вас должно быть что-то похожее на Пример 2, и когда вы запустите его, ваша галерея должна выглядеть примерно так, как показано ниже.
Наклон!
Это приятно случайно, но углы действительно отражают эффект. Для тех браузеров с поддержкой transform CSS3 мы добавим несколько случайно сгенерированных вращений. как нам это сделать?
Наряду с добавлением удобных имен классов, Modernizr добавляет глобальный объект, который дает нам «да» или «нет» для каждой из запрашиваемых нами возможностей. В нашем скрипте мы проверим, является ли Modernizr.csstransforms истинным; если это так, мы сделаем еще немного математики, чтобы выяснить хороший случайный поворот, а затем применим его как преобразование к фотографии. Это похоже на последний шаг, за исключением того, что наше случайное число может быть отрицательным:
if (Modernizr.csstransforms) { var degrees = Math.floor(Math.random() * 40) -20; $photo.css({ "transform" : "rotate(" + degrees + "deg)", "-moz-transform" : "rotate(" + degrees + "deg)", "-ms-transform" : "rotate(" + degrees + "deg)", "-o-transform" : "rotate(" + degrees + "deg)", "-webkit-transform" : "rotate(" + degrees + "deg)" }); }
Поместите это в each цикл, прежде чем начнется метод setTimeout . Пример 3 показывает вам весь комплект и Caboodle, и если у вас есть браузер с возможностью transform , вы должны увидеть что-то вроде этого:
Это оно!
Вы только что создали гладкую, успокаивающую альтернативу скучным старым вращающимся слайд-шоу изображений. Если вы хотите продвинуться еще дальше, вы можете добавить некоторые изюминки, добавив больше визуальных эффектов, таких как box-shadow или дополнительные анимации. Что еще более важно, если вы впервые использовали Modernizr, вы почувствовали, как легко внедрить его в свои проекты.