Прелоaдер лого с анимацией на tilda, easy!
Путем замены этих данных на свои собственные, вы можете настроить содержимое прелоадера для отображения вашего логотипа и цитаты.
- your-logo-url : URL-адрес вашего логотипа. Замените your-logo-url на URL-адрес изображения вашего логотипа, который вы хотите использовать для прелоадера. Например, https://example.com/logo.png .
- Preloader Logo : Альтернативный текст для логотипа прелоадера. Замените Preloader Logo на текст, который вы хотите использовать в качестве альтернативного описания для логотипа. Например, «Логотип сайта».
- Your Quote Here : Текст цитаты. Замените Your Quote Here на текст цитаты, который вы хотите отображать на прелоадере. Например, «Загружаемся для вас».
ШАГ 2. Сюда же вставляем код JAVASCRIPT
JAVASCRIPT
Этот код анимирует текст в виде печатной машинки на прелоадере и закрывает прелоадер после завершения анимации и загрузки контента.
Путем изменения этих значений, вы можете настроить анимацию печатной машинки и поведение прелоадера под свои нужды.
- text : Текст, который будет анимироваться в виде печатной машинки. Вы можете изменить значение этой переменной на любой другой текст, который вы хотите использовать для анимации.
- speed : Скорость анимации печатной машинки. Задержка между печатаемыми символами. Вы можете изменить это значение на любое другое целое число, чтобы настроить скорость анимации.
- contentLoaded : Флаг, указывающий, загружен ли весь контент страницы или нет. Это значение будет устанавливаться в true после полной загрузки контента на странице.
- $(‘#preloader-quote’) : Выборка элемента с идентификатором preloader-quote , который содержит текст для анимации печатной машинки. Вы можете изменить селектор на любой другой, чтобы выбрать нужный элемент для анимации.
- $(‘#preloader’) : Выборка элемента с идентификатором preloader , который представляет прелоадер. Этот элемент будет скрыт после завершения анимации и загрузки контента.
- fadeOut(‘slow’) : Метод jQuery для плавного скрытия элемента. Вы можете изменить аргумент slow на другое значение, такое как fast или числовое значение, чтобы настроить скорость скрытия прелоадера.
- setTimeout() : Функция JavaScript для установки таймера. Мы используем ее для установки задержек перед закрытием прелоадера. Вы можете изменить значения аргументов внутри setTimeout , чтобы настроить время задержки.
Сохраняем.
ШАГ 3. Не забываем в HTML поменять your-logo-url на свою ссылку с лого, а вместо Your Quote Here подставить свой текст.
Шаг 4. Спускаемся ниже и идем во вкладку CSS, вставляем следующий код
Анимация логотипа
Заказчик хочет сделать анимированный логотип, хочет добавить эффект движения. Рассматривает 2 варианта: 1) Запустить крутиться планету — тогда нужно искать для нее полную модель глобуса и чтобы она начинала крутиться с такого ракурса материков, как сейчас изображено на лого. Таким образом планета будет крутиться, а буквы «Мир принадлежит тебе» будут стоять на месте. Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг земного шара. 2) Если планету запустить не получится, тогда нужно запустить надпись «Мир принадлежит тебе», тоже с прокруткой в левую сторону вокруг планеты. Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?
Отслеживать
задан 30 авг 2019 в 9:51
Sergey Konovalenko Sergey Konovalenko
856 1 1 золотой знак 8 8 серебряных знаков 22 22 бронзовых знака
Даже если планета будет изначально в «неправильном» ракурсе — можно пересобрать гифку/видео в правильный. С гифкой проще.
30 авг 2019 в 10:08
Может, и не в тему вопроса, но стоит упомянуть, имхо — это уже не логотип, в правильном понимании этого понятия — посмотрите, разве хоть одна серьезная компания имеет анимированный логотип?) — Цыганщиной-с отдаетс. ) Логотип coderhs.com/snippets/logo-what
30 авг 2019 в 10:34
«Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг земного шара». Вообще-то, Земля может вращаться только в одном направлении — с запада на восток. То есть, если смотреть на Землю сверху в направлении Северного полюса, то она должна вращаться против часовой стрелки. В предлагаемом вами варианте расматривается вариант движения Земли в обращенном времени (или перемотки видео назад), но и тогда дирижабль изначально должен был лететь попой вперед в нормальном времени.
30 авг 2019 в 10:37
@Coder Вон, Татьяныч, сделал анимированный лого для Хованского и ничего ;D
30 авг 2019 в 10:42
@Coder Вон, военные тоже в фуражках в помещениях ходят. То есть в дизайне нет правила, которые нельзя нарушить, всегда найдется обстаятельство, при котором заданное правило не действует. Но, впрочем, ладно, ладно, я не настроен вести священные войны ;D
Создание анимированного лого на CSS
В этом уроке мы воспользуемся CSS3 анимацией, трансформациями и прочими техниками для создания анимированного логотипа.
Логотип
Идея: логотип состоит из четырёх разноцветных элементов (точек). Эти точки преобразуются в линии, а затем снова возвращаются в исходное состояние.
HTML
Всего у нас будет четыре элемента различного цвета. Каждый элемент будет располагаться по отдельности для того чтобы мы могли отдельно управлять цветом, анимацией и прочими фишками:
Результат сейчас не виден. Для этого нам нужно написать немного CSS.
Определение Sass переменных & родительского класса
Мы будем использовать Sass (SCSS) для работы с переменными и математическими операциями:
- Определяем размер лого: 96px;
- Так же нам понадобится диаметр точек 18px;
- Финальное лого должно быть перевёрнуто на 15 градусов;
- Всё должно происходить за 2 секунды;
- Так же для каждого цвета мы заведём отдельную переменную.
Вот список переменных, которые я буду использовать:
// переменные $slack-size: 96px; $dot-diameter: 18px; $slack-angle: 15deg; $duration: 2s; $slack-blue: #6ecadc; $slack-yellow: #e9a820; $slack-pink: #e01563; $slack-green: #3eb991;
Давайте приступим к написанию стилей родительского класса. Внутренние элементы будут расположены абсолютно, так что самому элементу будет присвоено релативное позиционирование:
.c-slack
Позиционирование точек
Каждая точка будет позиционироваться абсолютно относительно родительского контейнера и содержит border radius равный диаметр/2 . Так же каждая из точек будет расположена согласно опциям top , right , bottom , и left . Располагаем точки по углам квадратного контейнера:
.c-slack__dot < display: block; position: absolute; width: $dot-diameter; height: $dot-diameter; border-radius: $dot-diameter/2; >.c-slack__dot—a < top: 0; left: 0; background-color: $slack-green; >.c-slack__dot—b < top: 0; right: 0; background-color: $slack-blue; >.c-slack__dot—c < bottom: 0; right: 0; background-color: $slack-yellow; >.c-slack__dot—d
Результат должен быть следующий:
Далее приступим к анимации.
Анимация
Давайте анимируем первую точку, «dot a»: будем увеличивать высоту переменной $slack-size . После этого не только форма, но и позиция должна стать прежней:
@keyframes slack-animation--a < 0% < top: 0; bottom: auto; height: $dot-diameter; >33% < top: 0; bottom: auto; height: $slack-size; >34% < top: auto; bottom: 0; height: $slack-size; >66% < top: auto; bottom: 0; height: $dot-diameter; >100% < top: auto; bottom: $slack-size - $dot-diameter; height: $dot-diameter; >>
В браузере ничего не изменится. Для этого мы должны активировать анимацию:
.c-slack__dot--a < /* other styles */ animation: slack-animation--a $duration infinite; >
Теперь результат должен быть такой:
Теперь давайте сделаем такую же операцию со второй точкой:
@keyframes slack-animation--b < 0% < right: 0; left: auto; width: $dot-diameter; >33% < right: 0; left: auto; width: $slack-size; >34% < right: auto; left: 0; width: $slack-size; >66% < right: auto; left: 0; width: $dot-diameter; >100% < right: auto; left: $slack-size - $dot-diameter; width: $dot-diameter; >>
Не забываем подключить анимацию:
.c-slack__dot--b < /* other styles */ animation: slack-animation--b $duration infinite; >
Теперь делаем то же самое с точкой c:
@keyframes slack-animation--c < 0% < bottom: 0; top: auto; height: $dot-diameter; >33% < bottom: 0; top: auto; height: $slack-size; >34% < bottom: auto; top: -($slack-size - $slack-size); height: $slack-size; >66% < bottom: auto; top: -($slack-size - $slack-size); height: $dot-diameter; >100% < bottom: auto; top: $slack-size - $dot-diameter; height: $dot-diameter; >>
Подключаем анимацию для точки c:
.c-slack__dot--c < /* other styles */ animation: slack-animation--c $duration infinite; >
И наконец, точка d. Анимация:
@keyframes slack-animation--d < 0% < left: 0; right: auto; width: $dot-diameter; >33% < left: 0; right: auto; width: $slack-size; >34% < left: auto; right: -($slack-size - $slack-size); width: $slack-size; >66% < left: auto; right: -($slack-size - $slack-size); width: $dot-diameter; >100% < left: auto; right: $slack-size - $dot-diameter; width: $dot-diameter; >>
.c-slack__dot--d < /* other styles */ animation: slack-animation--d $duration infinite; >
Теперь можем посмотреть результат в браузере:
Перекрытие элементов
Теперь нам необходимо сделать так чтобы элементы логотипа были немного смещены и перекрывали друг друга:
.c-slack__dot--a < /* other styles */ transform: translateX($dot-diameter); >.c-slack__dot--b < /* other styles */ transform: translateY($dot-diameter); >.c-slack__dot--c < /* other styles */ transform: translateX(-$dot-diameter); >.c-slack__dot--d < /* other styles */ transform: translateY(-$dot-diameter); >
Теперь результат будет таков:
Поворот логотипа
Теперь нам необходимо повернуть логотип на запланированное число градусов:
.c-slack < /* other styles */ transform: rotate(-$slack-angle); >
Режим отображения цвета
Далее преобразуем режим отображения цвета элементов массива, в результате чего логотип становится полу-прозрачным:
.c-slack__dot < /* other styles */ mix-blend-mode: multiply; >
Итог
Вот и всё! Надеемся, что данный урок будет вам полезен!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/building-the-slack-animating-logo-with-only-css
Перевел: Станислав Протасевич
Урок создан: 7 Сентября 2015
Просмотров: 20282
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Создание анимации для логотипа сайта
Размер логотипа бут анимации
Всем доброго дня. В линуксе совсем новичок, решил на днях попробовать. Поставил последнюю минт.
Создание логотипа для игры
Здравствуйте все, с прошедшими! Подскажите в каком формате и каких размеров должен создаватса.
Создание логотипа для магазина обуви
нужен логотип интернет магазина на тему мужской и женской обуви -в логотипе должны быть 2-4.
Поиск анимации (GIF) для сайта
В нете полно сервисов по поиску иконок для сайтостроения с возможностью выбора ключевых слов.
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Сообщение было отмечено wonoidar как решение
Решение
wonoidar, к примеру — песочница
div>span>STRV/span>/div>
1 2 3 4 5 6
@import url('https://fonts.googleapis.com/css?family=Muli:800'); div{position:relative;height:40px;width:100px;overflow:hidden;} span{position:absolute;left:0;font-family: 'Muli', sans-serif;font-size:30px;color:red;padding:0 10px;cursor:pointer;transition:.3s;} span:after{content:"STRV";color:black;position:absolute;padding:0 10px;} span:hover{left:-100px;transition:.3s;} span:hover:after{left:100px;transition:.3s;}
1080 / 642 / 240
Регистрация: 05.05.2015
Сообщений: 3,559
Записей в блоге: 2
wonoidar, там белые буквы реализованы с помощью background-image у псевдоэлемента :after. visibility у псевдоэлемента стоит hidden, поэтому он не виден до наведения мыши.
При наведении срабатывает :hover, у его :after уже меняется visibility и opacity на visible и 1 соответственно.
Уход в темноту красной надписи и появление белой реализованы с помощью transition.
Понятно объяснил?
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Набор энтузиастов для создания сайта по рисованию анимации
Данный проект осуществляется на Canvas, а конкретно редактор где создаются анимации. Так же этот.
Создание одной анимации для двух наборов спрайтов?
Здравствуйте, у меня есть два персонажа с одинаковой анимацией на двух текстурных атласах. Скажите.
Удаление логотипа с сайта
Подскажите как правильно сделать удаление аватарки с сайта. Я сделала вот так сама кнопка удалить.
Мерцание логотипа сайта
Добрый день. Я новичок в Jquery. Есть задача ,сделать на сайте,что логотип мерцал. Есть рабочий.