Автор

Анимированные эффекты перехода 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.

 

Вот и всё!


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



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

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

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


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

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


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

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


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

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


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close