Смесь кода и креативности: Как AI меняет игру в веб-дизайне

iromanov — Sat, 01 Jul 2023 08:08:13 GMT

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

Midjourney | Reminiscent of the works of Edward Hopper, executed in the style of social realism, the painting, frozen in deep shadows of brown and golden hues, portrays a young IT specialist engaged in his work on his laptop in the gloomy solitude of his apartment

Впуская AI в свой код, разработчики могут сосредоточить свое внимание на важных штучках, типа структуры сайта, пользовательского опыта, и прочих деталях, которые обычно под капотом. Открывает возможности к графону высшего качества, что раньше было прерогативой только для кодеров с отличием.

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

И главное, что не нужно быть вторым Ван Гогом, чтобы этим пользоваться. Неважно какой у тебя диплом в кармане или какой опыт за плечами - AI дает тебе крутые способности, которые раньше были как голая королева на поле боя.

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

Яндекс.Дзен

Прелоaдер лого с анимацией на tilda, easy!

iromanov — Fri, 30 Jun 2023 21:56:30 GMT

ШАГ 1. Бежим в настройки нашего проекта/сайта, кликаем на пункт меню "еще", немного пролистываем и находим вкладку HTML - переходим в нее и вставляем наш код HTML

HTML

 
 
Your Quote Here

Этот код создает прелоадер, который состоит из изображения (логотипа) и текста (цитаты)

Путем замены этих данных на свои собственные, вы можете настроить содержимое прелоадера для отображения вашего логотипа и цитаты.

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, вставляем следующий код

CSS

#preloader { 
position: fixed; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background-color: black; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
} 

#preloader-logo { 
width: 70px; 
height: auto; 
} 

#preloader-quote { 
margin-top: 40px; 
width: 30%; 
text-align: center; 
font-size: 12pt; 
color: #d6d6d6; 
max-width: 300px; 
opacity: .5; 
font-family: 'TildaSans'; 
letter-spacing: 1px; 
}

Этот код стилизует прелоадер.

Путем изменения этих значений, вы можете настроить внешний вид и расположение прелоадера и его содержимого в соответствии с вашими предпочтениями и дизайном сайта.

#preloader: Стили для элемента с идентификатором preloader, который представляет прелоадер. Мы устанавливаем позицию элемента на фиксированную (position: fixed;), чтобы он оставался на месте при прокрутке страницы. Он занимает всю ширину и высоту окна браузера (width: 100%; height: 100%;), находится в самом верху страницы (top: 0; left: 0;), и имеет очень высокий z-index (9999), чтобы быть поверх остального контента. Фоновый цвет установлен на черный (background-color: black;), а элементы внутри него выравниваются по вертикали с помощью display: flex; flex-direction: column; justify-content: center; align-items: center;.
#preloader-logo: Стили для элемента с идентификатором preloader-logo, который содержит логотип прелоадера. Здесь мы устанавливаем ширину на 70 пикселей (width: 70px;), а высоту автоматически подстраивается пропорционально (height: auto;).
#preloader-quote: Стили для элемента с идентификатором preloader-quote, который содержит текст на прелоадере. Устанавливаем отступ сверху на 40 пикселей (margin-top: 40px;), ширину на 30% от родительского элемента (width: 30%;), выравнивание текста по центру (text-align: center;), размер шрифта 12 пунктов (font-size: 12pt;), цвет шрифта серый (color: #d6d6d6;), максимальную ширину 300 пикселей (max-width: 300px;), прозрачность текста на 50% (opacity: .5;), используем шрифт TildaSans, устанавливаем интервал между символами в 1 пиксель (letter-spacing: 1px;).

Сохраняем

Опубликовываем все станицы и хвалим себя за проделанную работу.

Посмотреть проект http://hutkez.ru/

Подписывайтесь, будет интересно!

, Яндекс.Дзен

Илья Романов

Смесь кода и креативности: Как AI меняет игру в веб-дизайне

Прелоaдер лого с анимацией на tilda, easy!