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

2023-07-01T08:08:13.449Z

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

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!

2023-06-30T21:56:30.764Z

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

HTML

<div id="preloader"> 
<img src="your-logo-url" id="preloader-logo" alt="Preloader Logo"> 
<p id="preloader-quote">Your Quote Here</p> 
</div>

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() { var text = "CREATED BY MAN"; var speed = 100; var contentLoaded = false; function typeWriter(text, i, fnCallback) { if (i < text.length) { $('#preloader-quote').html(text.substring(0, i + 1)); setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, speed); } else { fnCallback(); } } function startAnimation() { typeWriter(text, 0, function() { if (contentLoaded) { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 3000); } else { setTimeout(function() { $('#preloader').fadeOut('slow'); }, 5000); } }); } startAnimation(); $(window).on('load', function() { contentLoaded = true; }); });
</script>

Этот код анимирует текст в виде печатной машинки на прелоадере и закрывает прелоадер после завершения анимации и загрузки контента.

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

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!