Автор

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

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


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

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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close