Эффекты блочного раскрытия


Содержание

Плавная анимация объектов только с помощью CSS (5 примеров)

Здравствуйте, дорогие читатели блога. В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются.

Возможно, когда то CSS анимация заменит всякие скрипты и JQuery плагины, но это будет далеко как не скоро, потому что ещё очень ограниченные возможности, а у JQuery скриптов они безграничны.

Единственный минус в том, что некоторые старые (не обновлённые) браузеры данный способ не поддерживают, а за ИЕ (Internet Explorer) я вообще молчу. Но в общем данная анимация в самых популярных браузерах работает на ура, тем более если используются специальные префиксы.

Кстати о префиксах, мы их будем использовать во всех примерах, так сказать, нужно страховаться:

  • -o- — для браузера Опера;
  • -moz- — для Firefox;
  • -webkit- — для Google Chrome и Safari.

Ну а теперь давайте всё рассмотрим подробнее.

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

Обычный блок

HTML

Чтобы добавить такой блок на страницу, нужно просто добавить

CSS

#box <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

border: 1px solid #888;
cursor: pointer;
>

Как видите здесь присутствует атрибут :hover, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.

Плавное изменение цвета элемента при наведении с помощью transition

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;>

#box1:hover <
background-color: #97CE68;
color: #333;
>

Как видите такую анимацию мы добились с помощью атрибута transition. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус :-) ) Это значение можно изменять как Вам нужно.

Цвет фона при наведении ставится атрибутом :hover, он здесь обязательный, иначе анимация работать не будет.

Изменение размера элемента

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;>

#box2:hover <
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
>

В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.

Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover удалить width: — блок изменяется только по высоте, height: — блок изменяется только по ширине.

Также можно изменить скорость изменения. В данном случае это 1с.

Кручение объекта

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;>

#box3:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
>

Кручение происходит с помощью transform и transition. В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform значении нужно поставить -(минус). Естественно градус оборота можно изменять.

Плавное увеличение и уменьшение объекта

CSS

#box4 <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;>

#box4:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
>

В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2). Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза.

Этим же способом можно уменьшить размер блока, например поставить значение 0.5.

Плавное смещение блока вниз

CSS

#box5 <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;>

#box5:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
>

Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно.

Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-)

И ещё, этой информацией поделился с нами сайт shpargalkablog.ru. За что ему огромное спасибо.

Вот теперь точно все :-) До скорых встреч, друзья.

Плавное открытие и скрытие элемента на CSS

Здесь вы можете вверх сайта задействовать, а это установить плавное появление элемента или блока при помощи CSS, что работает по клику кнопки. Сам эффект плавное появление интерфейса очень популярен, который многие задействуют в функциональности сайта, что стало почти обычной практикой им пользоваться. Так как по умолчанию все закрыты и пользователь не видит его, но для этого есть кнопка или, то что напоминает, как пример стрелка. И здесь по клику вы открываете этот блок, что по ширине идет на весь монитор или экран.

Здесь самостоятельно можете выставить параметры, главное это появление и то, что можно очень много поместить в основе. Основу вы ставите по цветовой гамме под свой фон, а раскрытие здесь по умолчанию идет в темной гамме. Также вы можете задать эффект, который с помощью чистого CSS будет работать при открытие. Но главный плюс, это не требуют использования JavaScript для управления, так как все отлично выстроено на стилистике, где совершенно не будет не какой нагрузки на страницы интернет портала.

Расмотрим как будет смотрется после установки материала.

Это по умолчанию, где видна кнопка и ниже идет заголовок.

Здесь уже после нажатие на кнопку, где видим заголовок и небольшое описание.

Приступаем к установке:

ZorNet.Ru

На сайте найдете информацию по созданию сайта


Вашему вниманию большая подборка HTML и CSS.

Привет, здесь вы можете разместить, то что посчитаете нужным. Это скрипты и стили, что отлично подойдет для красивого и оригинального оформление интернет ресурса или блога.

* <
margin:0;
padding:0;
font-family:»Helvetica Neue», Helvetica, Sans-serif;
word-spacing:-2px;
>

h1 <
font-size:29px;
font-weight:bold;
color:#2f2e2e;
-webkit-font-smoothing: antialiased;
>

h2 <
font-weight:normal;
font-size:18px;
color:#867e7e;
padding:3px 0;
>

.lirdsanugsa <
background:#181818;
color:#FFF;
position: absolute;
top: -249px;
left: 0;
width: 100%;
height: 249px;
padding: 18px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

.lirdsanugsa h1 <
color:#f9f4f4;
>

#sapimeglan_zornet <
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
>

#sapimeglan_zornet + label <
position: absolute;
cursor: pointer;
padding: 10px;
background: #266eae;
width: 100px;
border-radius: 53px;
padding: 7px 9px;
color: #fdf9f9;
line-height: 19px;
font-size: 12px;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin: 19px 48px;
transition: all 500ms ease;
>
#sapimeglan_zornet + label:after <
content:»Open»
>

.gukolpestud <
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
>

.gukolpestud <
margin-top: 250px;
>

#sapimeglan_zornet:checked + label <
background: #089e30;
>

#sapimeglan_zornet:checked + label:after <
content:»Close»
>

На этом все, также можно мосмотреть результат работы открытия и скрытия элемента.

Плавное открытие и скрытие блока div средствами jQuery

Практически на каждом сайте Вы можете увидеть кнопки — Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?

Цукерберг рекомендует:  Pascal - перезапись из dos под windows

Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:

Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.

Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:

На будущее: подобное формирование скрытой информации достаточно сильно экономит место на сайте, не делает его информационно перезагруженным и используется почти на всех ресурсах!

Как создать спойлеры на jquery или несколько блоков открыть/закрыть?

По многочисленным просьбам читателей создаю отдельный раздел с примером и файлами для скачивания. Если у Вас несколько блоков-спойлеров, которые нужно плавно открывать и закрывать на jquery, если нужны команды закрыть или открыть всё, то смотрим пример ниже:

Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.

Спасибо за внимание! Экономьте место и не перегружайте сайт вторичным текстом!)

Анимация появления блоков для Landing Page

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

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

Параметры jQuery плагина Revealator

Класс Описание
revealator-fade Обычное появление элемента
revealator-rotateleft Появление элемента с легким поворотом влево
revealator-rotateright Появление элемента с легким поворотом вправо
revealator-slideleft Появление элемента слайдом справа на лево
revealator-slideright Появление элемента слайдом слева на право
revealator-slideup Появление элемента слайдом снизу на вверх
revealator-zoomin Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomout Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Класс Описание
revealator-delay1 Установить задержку эффекта на 100ms
revealator-delay2 Установить задержку эффекта на 200ms
revealator-delay3 Установить задержку эффекта на 300ms
. .
revealator-delay19 Установить задержку эффекта на 1900ms
revealator-delay20 Установить задержку эффекта на 2000ms

Продолжительность:

Класс Описание
revealator-duration1 Установить длительность эффекта на 100ms
revealator-duration2 Установить длительность эффекта на 200ms
revealator-duration3 Установить длительность эффекта на 300ms
. .
revealator-duration19 Установить длительность эффекта на 1900ms
revealator-duration20 Установить длительность эффекта на 2000ms

Показывать эффект только один раз

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Как это работает?

Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.

Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.

На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.

Dobrovoi Master

Создание интересного эффекта раскрытия для миниатюр с помощью CSS и JQuery

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

Эффектов много и все они разные, по исполнению, подаче информации, стилистике оформления и визуальному восприятию конечного результата пользователями.

Начну эту серию с рассмотрения уникального эффекта вертикального раскрытия в виде шторок при наведении на миниатюру с помощью JQuery .

И так, для начала давайте все же взглянем, что это такое на примере:

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

Теперь давайте разберем все детально, как работает этот замечательный эффект.

1. HTML

Мы не будем использовать ul список, потому что это на самом деле не список, а каждая миниатюра, это отдельный блочный элемент. Таким образом, в основном мы работаем с тегом div с заранее обозначенным классом. Заголовок и текст описания получаются скрытыми под изображением.
Вот так будут выглядеть структура 4 отдельных блоков изображений с скрытым содержанием, непосредственно в HTML:

Эффекты появления объектов в виде блоков

Дата публикации: 2020-01-17

От автора: эффекты появления контента в виде блоков уже давно ходят по сети. Сперва появляется декоративный блок, после чего он постепенно уменьшается, открывая контент под ним.

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

Эффект основан на анимации, которую мы видели на нескольких действительно хороших сайтах (и Dribbble шотах).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В сети, естественно, намного больше примеров. Ниже мы покажем лишь парочку недавних, которыми мы вдохновлялись.

Внимание: мы используем flexbox и viewport единицы, которые в старых браузерах могут не поддерживаться, особенно в IE. Сами эффекты используют 3D трансформации и работают только в современных браузерах.

Также обратите внимание, что демо оптимизированы под десктоп.

Посмотрите все демо и HTML файлы, чтобы понять принцип работы эффектов. В каждом демо есть что-то уникальное. В последнем демо часть контента остается скрытой и отображается по нажатию кнопки. Найди этот проект на Github.

Автор: Mary Lou


Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Плавное появление блока (div) в Jquery

В Jquery есть множество различных способов для того, чтобы сделать плавное появление или исчезновения определённых блоков div.

Мы рассмотрим самую популярную функции fadein — для плавного появления и fadeout — для изчезновения.

Рассмотрим на примере, создадим блок и применим к нему следующие стили:

Мы создали простой блок с уникальным идентификатором и изначально скрыли его.

Теперь напишем простой скрипт для его появления.

Теперь при обновлении страницы мы увидим, что наш блок плавно отображается на экране. Сама функция, просто плавно меняет свойство «display».

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

8 простых эффектов CSS3, которые произведут впечатление на ваших пользователей

Буквально пара строк кода даст удивительные эффекты перехода, которые взволнуют ваших пользователей, увеличат вовлечённость и, в конечном итоге, при правильном использовании, увеличит вашу посещаемость. Более того, эти эффекты используют аппаратное ускорение, это прогресс – в котором вы можете принять участие прямо сейчас.

Вот 8 действительно простых эффектов, которые добавят жизнь в ваш UI (пользовательский интерфейс) и улыбок на лица ваших пользователей.

Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:

Сделав это, установите его ширину и высоту (чтобы он имел размеры), его цвет фона (чтобы мы могли видеть его) и свойства его эффекта.

Свойство transition имеет три значения: свойства по переходу (в нашем случае все из них) скорость перехода (в нашем случае 0,3 секунды) и третье значение, которое позволяет изменять как рассчитывается ускорение и замедление, но мы продержимся настройки по умолчанию, оставляя это поле пустым.

Теперь все, что нужно сделать, это менять свойства, и они будут создавать анимацию для нас.

Если вы хотите продолжить самостоятельно, то для вас демо-файлы здесь.

1. Затемнение

Сделать эффекты затемнения – это довольно распространённая просьба клиентов. Это отличный способ подчеркнуть функциональность или обратить внимание на призыв к действию.

Эффект кодируются в два этапа: сначала, вы установите начальное состояние; далее установите изменение, например, при наведении мыши:

(Убедитесь, что вы присвоили вашему div класс «fade», чтобы увидеть, как это работает.)

2. Смена цвета

Раньше анимация изменения цвета был невероятно сложным делом, с вовлечением математики, участвующей в расчете отдельные значения RGB, а затем рекомбинации их. Теперь мы просто устанавливаем div’у класс «color» и задаём цвет, какой хотим, в CSS:

Цукерберг рекомендует:  Типографика в HTMLCSS

3. Увеличение и ужатие

Когда-то чтобы увеличить элемент, вам нужно было использовать его ширину и высоту или параметр наполненности. Но сейчас для увеличения мы можем использовать трансформацию силами CSS3.

Установите класс вашего div, на «grow», а затем добавьте этот код в ваш стиль блока:

Ужать элемент так же просто, как увеличить его. Чтобы увеличить элемент мы указываем значение, большее 1, чтобы уменьшить его, мы указать значение меньше, чем 1:

4. Кручение элементов

CSS предусматривает ряд трансформаций, и одна из лучших – это кручение элемента. Присвойте вашему div’у класс «rotate» и добавьте следующие строки в ваш CSS:

5. Превращение квадрата в круг

Сейчас очень популярен эффект трансформации квадратного элемента в круглый и наоборот. С помощью CSS этого легко добиться, мы просто переход свойство границы радиуса. Мы просто задействуем свойство border-radius.

Присвойте вашему div’у класс «circle» и добавить эти строки к вашим таблицам стилей:

6. 3D тень

3D тени были восприняты с неодобрением в течение года или около того, потому что они, видите ли, не вписывались в плоский дизайн, это, конечно ерунда, они работают фантастически хорошо, давая пользователю почувствовать вовлеченность как при работе с плоским дизайном, так и с псевдо 3D интерфейсом.

Этот эффект достигается путем добавления прямоугольника тени, а затем перемещая элемент на оси х с помощью изменения свойству transform и translate таким образом, что кажется, будто элемент растёт из экрана.

Присвойте вашему div’у класс «threed», а затем добавьте следующий код в ваш CSS:

7. Качание

Не все элементы используют свойство перехода. Мы также можем создать очень сложные анимации с использованием @keyframes, анимации и анимации-итерации.

В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем Chrome, в этом отношении, по крайней мере).

8. Вставка границы

Один из самых горячих стилей кнопок прямо сейчас – это кнопка призрак; кнопка без фона и жирной границы. Мы можем, конечно, просто добавить рамку к элементу, но это изменится положение элемента. Мы могли бы решить эту проблему с помощью размеров бокса, но гораздо более простым решением является переход в border с помощью вставки тени.

Дайте вашему дел класс «border» и добавьте следующий CSS для ваших стилей:

20 jQuery плагинов для создания анимации при скроллинге

В этой статье мы рассмотрим 20 лучших jQuery плагинов для создания анимации элементов сайта при прокрутке страницы. Подобные решения используются в веб-разработке довольно давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно — это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит — единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.js

Неплохой плагин для реализации анимации элементов при скроллинге. Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается.

ScrollMagic

Еще один популярный плагин, с помощью которого можно реализовать сложную анимацию, которая будет срабатывать при прокрутке ролика мышки. В данном случае, плагин позволяет делать действительно сложные parallax, css3 эффекты движения, смены фона на страница и вообще деформации фигур. ScrollMagic часто используют на промо-сайтах, где требуется много анимировать.

Scrollme

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

Superscrollorama

Superscrollorama — мощный, но тяжелый плагин для создания анимации при прокрутке. В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая parallax эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreen

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

OnePage

jQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте Iphone 5s.
Имеются проблемы с адаптивностью, как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

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

jInvertScroll

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


Waypoints

Waypoints — это jQuery плагин, который позволяет показывать любой элемент при нахождении посетителя в заданной точке страницы. Например, когда посетитель дочитывает статью на сайте и приближается к концу текста, сбоку страницы всплывает информационное окно с предложением почитать следующую статью или похожую статью.

Scrollocue

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

Horwheel

Jquery плагин для создания сайта с горизонтальной прокруткой в стиле Windows 8. Как заявляют разработчики — это кроссбраузерное решение.

Scrolling Progress Bar

Интересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

multiScroll.js

multiScroll.js — это jQuery плагин, похож на два предыдущих плагина скользких экранов, но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений. Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера. Думаю, посетители оценят ваш сайт.

browserSwipe.js

Очередной полноэкранный скроллинг-плагин, с помощью которого создается эффектный переход по экранам. Среди доступных эффектов — скользящий переход, переход с вращением всего экрана, масштабируемый и горизонтальный скроллинг по экранам. Можно совмещать все эффекты на одной странице.

jQuery.panelSnap

Полноэкранный скользящий скроллинг-плагин. Плагин ничем особо не отличающийся, на первый взгляд, от предыдущих, но в нем реализована внутренняя область с прокруткой. Если мы докручиваем до конца внутреннего контента, то автоматически происходит переход на следующий экран. Теоретически — это решение проблемы для адаптивных сайтов. Если внутреннее окошко сделать в полный размер, на маленьких экранах контент, который не поместился по высоте, не будет теряться.

Responsive 3D Fold Scroll

Благодаря этому плагину вы можете реализовать на своем сайте интересный 3D эффект при переходе по экранам. Плагин адаптивный и работает на различных мобильных устройствах.

HorizonScroll.js

Еще один плагин для скользящего полноэкранного скроллинга. В этот раз — это горизонтальная прокрутка. Поддерживаются переходы по экранам с помощью стрелок на клавиатуре.

jQuery.scrollSpeed — Плавная прокрутка страницы

Современный эффект, который используется на множестве современных веб-сайтов — плавная прокрутка страницы. В некоторых браузерах этот функционал реализован внутри, а некоторые, такие как Chrome, прокручивают сайт рывками. Данный плагин позволяет смягчить скролл.
Есть много настроек, таких как — скорость прокрутки, инерция и прочее.

ScrollFlow

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

jQuery Air Sticky Block — липкий блок в сайдбаре

jQuery плагин нашей разработки. При прокрутке страницы позволяет зафиксировать блок в сайдбаре. Подходит для адаптивных сайтов. При перестраивании контента, когда колонка «прыгает» под основной контент, липкий эффект отключается.

Цукерберг рекомендует:  Java - Ошибка

15 эффектов для изображений (используем только CSS3)

Здравствуйте, уважаемые читатели XoZbloga! В этой статье подготовлены 15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.

Установка

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

* <
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
>

body <
background : #333 ;
>

.pic <
border : 10px solid #fff ;
float : left ;
height : 300px ;
width : 300px ;
margin : 20px ;
overflow : hidden ;

-webkit-box-shadow : 5px 5px 5px #111 ;
box-shadow : 5px 5px 5px #111 ;
>

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden .

Масштабирование и панорамирование

Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.

Увеличение

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

Как Вы можете видеть здесь мы используем два класса pic и grow . Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.

/*GROW*/
.grow img <
height : 300px ;
width : 300px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.grow img : hover <
width : 400px ;
height : 400px ;
>

Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.

Уменьшение

Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px. таким образом создается эффект сжатия.

/*SHRINK*/
.shrink img <
height : 400px ;
width : 400px ;

-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.shrink img : hover <
width : 300px ;
height : 300px ;
>

Горизонтальное смещение

Данный эффект не манипулирует размерами изображения, но зато меняет позицию в блоке. При наведении картинка смещается горизонтально в сторону.

Изображение имеет размер 600х300px.

/*SIDEPAN*/
.sidepan img <
margin-left : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.sidepan img : hover <
margin-left : -200px ;
>

Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin . При наведении смещаем картинку влево на 200px.

Вертикальное смещение

Аналогичен предыдущему и его можно было бы не приводить. Но все таки следуют продемонстрировать как можно применить такой эффект, точнее с каким изображением.

Изображение имеет размер 300х600px.

/*VERTPAN*/
.vertpan img <
margin-top : 0px ;
-webkit-transition : margin 1s ease ;
-moz-transition : margin 1s ease ;
-o-transition : margin 1s ease ;
-ms-transition : margin 1s ease ;
transition : margin 1s ease ;
>

.vertpan img : hover <
margin-top : -200px ;
>

Теперь смещаем вверх на 200px.

Трансформация

Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.


Наклон

Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.

/*TILT*/
.tilt <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.tilt : hover <
-webkit-transform : rotate ( -10deg ) ;
-moz-transform : rotate ( -10deg ) ;
-o-transform : rotate ( -10deg ) ;
-ms-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
>

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

Поворот

Когда пользователь наводит на изображение, последнее начинает вращаться. Пока изображение вращается, блок див трансформируется в круг. В результате выходит супер эффект.

/*MORPH*/
.morph <
-webkit-transition : all 0.5s ease ;
-moz-transition : all 0.5s ease ;
-o-transition : all 0.5s ease ;
-ms-transition : all 0.5s ease ;
transition : all 0.5s ease ;
>

.morph : hover <
border-radius : 50% ;
-webkit-transform : rotate ( 360deg ) ;
-moz-transform : rotate ( 360deg ) ;
-o-transform : rotate ( 360deg ) ;
-ms-transform : rotate ( 360deg ) ;
transform : rotate ( 360deg ) ;
>

Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.

Фокусировка

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

/*FOCUS*/
.focus <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.focus : hover <
border : 70px solid #000 ;
border-radius : 50% ;
>

При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.

Фильтры изображений

На последок рассмотрим применение фильтров изображений. В отличие от приведенных выше примеров, каждый из которых используется несколько префиксов, чтобы обеспечить максимальную совместимость браузера, в филтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.

Размытие

Первый эффект, который мы рассмотрим это размытие. Здесь с кодом все еще проще, одна строка.

/*BLUR*/
.blur img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.blur img : hover <
-webkit-filter : blur ( 5px ) ;
>

Как вы можете видеть, мы используем -webKit-filter , с размытием 5px.

Черно-белое изображение

С помощью этого фильтра, добьемся эффекта черно-белого изображения.

/*B&W*/
.bw <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.bw : hover <
-webkit-filter : grayscale ( 100% ) ;
filter : grayscale ( 100% ) ;
>

Здесь я установил оттенки серого ( grayscale ) со значением 100%. Процент оттенков серого можно понизить.

Осветление

Теперь поиграем яркостью изображения. Сначала затемним картинку, а при наведении вернем нормальное значение для яркости.

/*DARKEN*/
.brighten img <
-webkit-filter : brightness ( 65% ) ;
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.brighten img : hover <
-webkit-filter : brightness ( 145% ) ;
>

Изначально яркость делаем 65%, а при наведении устанавливаем значение 145% т.е. ярче на 45% от нормального состояние картинки.

Сепия

Еще один ретро эффект) перевод цветного изображения в тональность сепия.

/*SEPIA*/
.sepia img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.sepia img : hover <
-webkit-filter : sepia ( 100% ) ;
>

Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию.

Контрастность

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

/*CONTRAST*/
.contrast img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.contrast img : hover <
-webkit-filter : contrast ( 185% ) ;
>

Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

Оттенок изображения

Данный фильтр изменяет цвета картинки в зависимости от заданного угла.

/*HUE_ROTATE*/
.hue-rotate img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.hue-rotate img : hover <
-webkit-filter : hue-rotate ( 65deg ) ;
>

Значение оттенка изображения задается в градусах от 0-360, где 0 это нормальное значение.

Инверсия

Еще один Webkit фильтр изображений — это инверсия.

/*INVERT*/
.invert img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.invert img : hover <
-webkit-filter : invert ( 100% ) ;
>

Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

Также мы можем объединить фильтры в одном правиле. Получается более комплексный эффект для изображения. Например сделать картинку черно-белой и добавить контрастности:

Прозрачность

Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже.

/*OPACITY*/
.opacity img <
-webkit-transition : all 1s ease ;
-moz-transition : all 1s ease ;
-o-transition : all 1s ease ;
-ms-transition : all 1s ease ;
transition : all 1s ease ;
>

.opacity img : hover <
-webkit-filter : opacity ( 25% ) ;
>

Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

При таком варианте использование значение берется из интервала от 1 до 0.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих