Автор

Анимированные эффекты перехода CSS и jQuery

Анимированные эффекты перехода CSS и jQuery


Библиотека анимационных эффектов перехода, основанная на анимации CSS.

В файле для скачивания находятся 11 примеров переходов, я в днмонстрации хочу показать один из них.

 

ДЕМО
ИСХОДНИКИ

 

Как использовать эффекты перехода

Мы создали отдельный файл html для каждого эффекта. Обратите внимание на класс, примененный к тегу <body>, который мы использовали в CSS для таргетинга на конкретный эффект.

<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- ... -->

<title>Cartoon Transition Effect | CodyHouse</title>
</head>
<body class="cartoon-transition">
<main class="cd-main-content">
<!-- ... -->
</main>

<div class="cd-modal" id="modal-1">
<!-- ... -->
</div>

<div class="cd-transition-layer" data-frame="25">
<div class="bg-layer"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
if( !window.jQuery ) document.write('<script src="js/jquery-2.2.1-min.js"><\/script>');
</script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

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

/* -------------------------------- 

Shared style

-------------------------------- */

.cd-btn {
display: inline-block;
padding: 1.6em 2.4em;
font-size: 1.4rem;
letter-spacing: .15em;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: box-shadow .3s;
/*...*/
}

/* --------------------------------

Scrub Effect - Custom effect style

-------------------------------- */

.scrub-transition {
font-family: "PT Sans", sans-serif;
color: #2c1a32;
/*...*/
}

/* --------------------------------

Animations - remember to check the animation name to copy the correct keyframes

-------------------------------- */

@keyframes cd-sequence {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
transform: translateY(-50%) translateX(-98%);
}
}

Если вы хотите изменить цвет переходов, все, что вам нужно сделать, это импортировать спрайты изображений PNG в графический инструмент и изменить цвет заполненной области. Например, в Photoshop вы можете использовать стили слоя для применения наложения цвета. После редактирования изображения просто сохраните его в формате PNG. Если вас беспокоит размер, TinyPNG - отличный инструмент для сжатия изображений PNG.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Анимированные эффекты перехода CSS и jQuery

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


Анимированные эффекты перехода CSS и jQuery

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


Анимированные эффекты перехода CSS и jQuery

Простой слайдер с морфированием изображений предварительного просмотра, анимированных с использованием свойств SVG.


Анимированные эффекты перехода CSS и jQuery

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


87 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close