Коллекция эффектов переходов для страниц
Сегодня мы хотим поделиться с вами набором анимаций для ваших страниц. Получилась довольно-таки интересная коллекция, которую вы можете использовать в своих нуждах. Эффекты есть как и простенькие, так и с применением 3d эффектов.
CSS анимация разделена на секции, в зависимости от эффекта.
Примерная структура страницы:
<div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-1"> <h1><span>A collection of</span><strong>Page</strong> Transitions</h1> </div> <div class="pt-page pt-page-2"><!-- ... --></div> <!-- ... --> </div>
Размер контейнера рассчитан на 1200px. Для анимаций, нужно вставить следующие стили:
.pt-perspective { position: relative; width: 100%; height: 100%; perspective: 1200px; transform-style: preserve-3d; } .pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .pt-page-current, .no-js .pt-page { visibility: visible; } .no-js body { overflow: auto; } .pt-page-ontop { z-index: 999; }
Класс .pt-page-ontop используется для перехода между страницами, так чтобы одна страница оставалась поверх других.
Пример анимации:
/* scale and fade */ .pt-page-scaleDown { animation: scaleDown .7s ease both; } .pt-page-scaleUp { animation: scaleUp .7s ease both; } .pt-page-scaleUpDown { animation: scaleUpDown .5s ease both; } .pt-page-scaleDownUp { animation: scaleDownUp .5s ease both; } .pt-page-scaleDownCenter { animation: scaleDownCenter .4s ease-in both; } .pt-page-scaleUpCenter { animation: scaleUpCenter .4s ease-out both; } /************ keyframes ************/ /* scale and fade */ @keyframes scaleDown { to { opacity: 0; transform: scale(.8); } } @keyframes scaleUp { from { opacity: 0; transform: scale(.8); } } @keyframes scaleUpDown { from { opacity: 0; transform: scale(1.2); } } @keyframes scaleDownUp { to { opacity: 0; transform: scale(1.2); } } @keyframes scaleDownCenter { to { opacity: 0; transform: scale(.7); } } @keyframes scaleUpCenter { from { opacity: 0; transform: scale(.7); } }
Для примера, применяем анимацию для текущих элементов страницы. К примеру:
//... case 17: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromRight pt-page-ontop'; break; case 18: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromLeft pt-page-ontop'; break; case 19: outClass = 'pt-page-scaleDown'; inClass = 'pt-page-moveFromBottom pt-page-ontop'; break; // ...
Взгляните на демо для большего эффекта. Надеюсь данная коллекция вам пригодится!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/jnMKoEcz43E/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp