{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Бурмистров Таргет: заметки с тегом пост-инструкция",
    "_rss_description": "Блог Сергея Бурмистрова: таргетированная реклама в ВК, смыслы в рекламе и Landing Pages, автоматизация задач с Google Sheets и Notion, эффективная работа на iPad. А также просто мысли. О чём мыслишь — тем и живёшь.",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/burmistrovtarget.ru\/tags\/post-instrukciya\/",
    "feed_url": "https:\/\/burmistrovtarget.ru\/tags\/post-instrukciya\/json\/",
    "icon": "https:\/\/burmistrovtarget.ru\/user\/userpic@2x.jpg?1661006849",
    "author": {
        "name": "Сергей Бурмистров",
        "url": "https:\/\/burmistrovtarget.ru\/",
        "avatar": "https:\/\/burmistrovtarget.ru\/user\/userpic@2x.jpg?1661006849"
    },
    "items": [
        {
            "id": "5",
            "url": "https:\/\/burmistrovtarget.ru\/all\/kak-sdelat-knopku-neaktivnoy-v-tilde-zero-block\/",
            "title": "Как сделать кнопку неактивной в Тильде (Zero-block)",
            "content_html": "<p>(Или как переключать активность кнопки по клику на чек-боксе) — именно такое поведение необходимо, например, когда банк требует, чтобы кнопка оплаты была неактивной ДО согласия посетителя с правилами. Для этого обычно предлагается разместить над кнопкой чек-бокс, выбирая который, пользователь активирует кнопку. Понятно, что в случае html+css вопросов не возникает — у тега<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;button&gt;<\/code><\/pre><p>может быть псевдокласс :disabled, с которым кнопка становится неактивной (отключённой).<\/p>\n<p>Но мы рассмотрим вопрос, как сделать кнопку неактивной, применительно к Тильде, потому что в Тильде нет &lt;button&gt;. И потому что есть <b>способ гораздее<\/b>. Читайте ниже.<\/p>\n<p>Первое, что я обычно делаю, когда возникает вопрос «Как сделать неактивную кнопку на Тильде» — это иду в официальный <a href=\"https:\/\/help-ru.tilda.cc\/\">help<\/a> и смотрю в экран:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png\" width=\"1046\" height=\"699\" alt=\"Вопрос знатокам: &quot;Как сделать кнопку на Тильде в Зеро-блоке неактивной?&quot;\" \/>\n<\/div>\n<p>Следующим шагом можно поискать информацию в сети, но чаще всего там не то, что нужно.<br \/>\nПосле этого становится ясно, что придётся включить голову и применить знакомые инструменты, а именно:<\/p>\n<ul>\n<li>A. Кнопки и шейпы<\/li>\n<li>B. Пошаговую анимацию элементов<\/li>\n<\/ul>\n<p>Первое, что надо сделать — чек-бокс для активации нашей кнопки.<br \/>\nСделаем его из 2 картинок: неактивный чек-бокс — квадрат, активный — квадрат с галочкой внутри. Сверху разместим невидимую прозрачную кнопку такого же размера. Клик по ней будет запускать анимацию проявления «галочки внутри» чекбокса.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"160\" data-ratio=\"4.5714285714286\">\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/checkbox-0.png\" width=\"160\" height=\"35\" alt=\"\" \/>\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/checkbox-1.png\" width=\"164\" height=\"33\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Тут важно, что настроить пошаговую анимацию нужно только для картинки, изображающей выбранный чек-бокс (с «галочкой»). В настройках пошаговой анимации делаем клик по верхней прозрачной и невидимой кнопке триггером, запускающим анимацию. Сама анимация — проявление данной картинки (Прозрачность 0% -> 100%).<\/p>\n<p>Эту же анимацию потом копируем на все остальные анимированные элементы, немного модифицируя эти анимации. Неизменным остаётся только триггер — клик по нашему псевдо-чекбоксу.<\/p>\n<p>Начинаем с того, что делаем неактивную кнопку серого цвета. Примерно вот такую:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/neaktivnaya-knopka-na-tilda.png\" width=\"384\" height=\"73\" alt=\"Неактивная кнопка на Тильде\" \/>\n<\/div>\n<p>Тут самое главное, чтобы у пользователя не возникло желания на неё кликнуть и с первого взгляда было понятно, что кнопка не сработает. В принципе, совсем необязательно, чтобы это была именно кнопка. Достаточно и просто картинки или шейпа (shape) нужного размера. Нужный размер здесь — это размер точно такой же, как у активной кнопки.<\/p>\n<p>Вторым шагом делаем такую же по форме кнопку, но по виду всю такую «активную»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/aktivnaya-knopka-na-tilda.png\" width=\"381\" height=\"81\" alt=\"Активная кнопка на Тильде\" \/>\n<\/div>\n<p>Размещаем её точно над первой серой кнопкой. Больше ничего не трогаем. Тут пока самое главное, чтобы кнопка явно кричала: «Нажми меня, Алиса! Я-кнопка!» При этом этот элемент так же не обязан быть кнопкой. Почему? Объясню чуть ниже.<\/p>\n<p>Вы уже догадались, что следующим шагом я с помощью анимации выведу прозрачность у активной кнопки из 0 к 100%, а прозрачность неактивной уберу со 100% до 0?<\/p>\n<p>Я тоже так думал. <b>Но так не работает<\/b>. Потому что даже полностью прозрачная активная кнопка сохраняет свою активность, если она находится в верхнем слое, выше, чем серая. Даже если её не видно, по ней все равно можно кликнуть и перейти. Но её так или иначе придётся скрывать до момента, пока не выбран чек-бокс (хотя бы визуально), так что продолжаем работать.<\/p>\n<p>Анимация красной кнопки — это наша вторая анимация. Эту анимацию мы просто скопируем из первой и применим к элементу красной кнопки, только сделаем так, что она сначала (то есть на Шаге 1) — полностью прозрачна, а на Шаге 2 — полностью проявлена. Триггер — тот же. Серая кнопка точно так же и за то же время «исчезает» ((Opasity = 100->0). (Это уже третья анимация).<\/p>\n<p><b>Внимание!<\/b> В панели настроек все кнопки должны изначально быть проявлены (Opasity = 100), их прозрачность мы настраиваем только в анимации!<\/p>\n<p>Как же сделать, чтобы кнопка работала после выбора чек-бокса и НЕ работала до его выбора?<br \/>\nПрименим смекалку и еще один прозрачный шейп.<\/p>\n<p>Итого бутерброд из элементов у нас состоит из 3 этажей:<\/p>\n<ol start=\"1\">\n<li>Неактивная серая кнопка<\/li>\n<li>Красная кнопка, делающая вид, что она активная<\/li>\n<li>Прозрачный шейп над этими кнопками, к которому привязан url кнопки и который по сути кнопкой и является. Но изначально он будет стыдливо прятаться за пределами экрана и перейти по нему до той поры, как он займёт своё законное место строго над нашими рисованными кнопками, мы не сможем, потому что его изначально не будет на месте кнопки.<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"872\" data-ratio=\"2.7770700636943\">\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-0.png\" width=\"872\" height=\"314\" alt=\"1 шаг анимации: Шейп за пределами видимости (кнопка неактивна)\" \/>\n<img src=\"https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-1.png\" width=\"884\" height=\"327\" alt=\"2 шаг анимации: Шейп незаметно занял свое место, кнопка обрела функциональность\" \/>\n<\/div>\n<\/div>\n<p>1 шаг анимации. Шейп выведен за пределы видимости из Зеро-блока (удостоверьтесь, что в настройках блока у вас стоит OVERFLOW — hidden)<br \/>\n2 шаг анимации. Приводим шейп на место кнопки. Всё, кнопка активна! И путешествия прозрачного шейпа по экрану никто не увидит. На этапе настройки можете задать цвет шейпу и некоторую прозрачность, чтобы удостовериться, что он двигается как научили, а не как попало).<\/p>\n<p>Таким образом, клик по триггеру — кнопке над нашим чекбоксом запустит сразу 4 анимации:<\/p>\n<ol start=\"1\">\n<li>Проявится галочка внутри чекбокса — теперь он выбран<\/li>\n<li>(и 3) — Серая кнопка станет прозрачной, а красная проявится и станет непрозрачной. Т. к. красная кнопка имеет тень, а анимация имеет длительность (DURATION = 0,2s), создаётся иллюзия, что кнопка «всплывает», обретая одновременно цвет<\/li>\n<li>Из ниоткуда приплывёт прозрачная активная кнопка и накроет своим прозрачным телом красную кнопку. Теперь мы можем кликнуть по этой кнопке и перейти куда надо.<\/li>\n<\/ol>\n<p>Оставьте комментарий, если было полезно.<\/p>\n",
            "date_published": "2022-08-24T16:21:27+00:00",
            "date_modified": "2022-09-14T15:54:35+00:00",
            "image": "https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png",
            "_date_published_rfc2822": "Wed, 24 Aug 2022 16:21:27 +0000",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/checkbox-0.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/checkbox-1.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/neaktivnaya-knopka-na-tilda.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/aktivnaya-knopka-na-tilda.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-0.png",
                    "https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-1.png"
                ]
            }
        }
    ],
    "_e2_version": 3860,
    "_e2_ua_string": "E2 (v3860; Aegea)"
}