Loading...

Как сделать эффект рентгена в Tilda?

Модификация может подставить вторую картинку под основное изображение тем самым сделав эффект рентгена
Время настройки: 2 минуты
Генератор кода
Видео инструкция
Инструкция
1. Если вам нужно использовать несколько изображений с этим эффектом на одной странице, пропишите уникальный класс для каждого изображения;

2. Добавляем своё изображение (не шейп) в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс, что и в генераторе;

3. Вставляем галерею GL12 и загружаем в неё второе изображение, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;

4. Настройте параметры эффекта (размер круга, размер и цвет бордера, отключение отображения на экранах до 1200px);

5. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Class блок с фото
Ссылка на 2 фото
Отображения эффекта на экранах
Размер круга рентгена (без рх)
Цвет border
Толщина border (без рх)
Копировать код<!-- Как сделать Эффект рентген лучей в Tilda? -->
<!-- https://nolim.cc/x-ray-tilda -->
<style> .svg-wr { position: relative; } .svg-wr img, .svg-wr image { width: 100%; } .svg-wr svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <script> function createxray(){ let svgWR = document.querySelectorAll(".svg-wr"); for( let i = 0; i < svgWR.length; i++){ let svgElement = document.querySelectorAll('.svg-wr svg')[i]; let imageElement = document.querySelectorAll('.svg-wr image')[i]; let maskedElement = document.querySelectorAll('.svg-wr .mask-circle')[i]; let circleFeedback = document.querySelectorAll('.svg-wr .circle-shadow')[i]; let svgPoint = svgElement.createSVGPoint(); function cursorPoint(e, svg) { svgPoint.x = e.clientX; svgPoint.y = e.clientY; return svgPoint.matrixTransform(svg.getScreenCTM().inverse()); } function update(svgCoords) { maskedElement.setAttribute('cx', svgCoords.x); maskedElement.setAttribute('cy', svgCoords.y); circleFeedback.setAttribute('cx', svgCoords.x); circleFeedback.setAttribute('cy', svgCoords.y); } window.addEventListener('resize', function() { imageElement.style.width = svgWR.offsetWidth; imageElement.style.height = svgWR.offsetHeight; }); window.addEventListener('mousemove', function(e) { update(cursorPoint(e, svgElement)); }, false); document.addEventListener('touchmove', function(e) { e.preventDefault(); let touch = e.targetTouches[0]; if (touch) { update(cursorPoint(touch, svgElement)); } }, false); } } $(document).ready(function(){ /* if ($(window).width() >= 1200){ */ $('.myimg'+' img').wrap("<div class='svg-wr'></div>"); var strgn = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"><defs><clipPath id="'+'sudaklass'+'mask1"><circle class="mask-circle" cx="50%" cy="50%" r="'+'12%'+'" style="fill: #ffffff"/></clipPath></defs><g clip-path="url(#'+'sudaklass'+'mask1)"><image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="'+'https://static.tildacdn.com/tild6366-3962-4635-a266-623031386436/_.png'+'" /></g><circle class="circle-shadow" cx="50%" cy="50%" r="'+'12%'+'" style="stroke: '+'#fff'+'; fill: transparent; stroke-width: '+'5'+';"/></svg>'; $('.myimg'+' img').after(strgn); setTimeout(function(){ createxray(); },600); /* } */ }); </script>  
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda