Инструкция:
Шаг 1
В Zero-блоке вешаем класс на тот элемент, который будет служить триггером для запуска со своим порядковым номером: trg-1, -2, -3, -4, -5 и тд
Шаг 2
Загружаем необходимое изображение на сайт, к примеру через блок IM01 и копируем его url путь
Шаг 3
Добавляем код из шага 5 и заменяем путь до первого изображения. По такой же системе проделываем и с последующими. К примеру trg-1 для image-1, а trg-2 для image-2 и тд
Шаг 4
В настройках меняем параметры под себя: размеры, радиус скругления
Шаг 5
Код из видео (autoscale)
<div class="string-img-group-1">
<div class="tutorial-cursor" string-cursor string-cursor-lerp="0.75">
<!--Добавляем изображения-->
<figure class="image-1"><img src="https://static.tildacdn.com/tild6665-3862-4037-b663-336632623666/Rectangle_5.jpg"></figure>
<figure class="image-2"><img src="https://static.tildacdn.com/tild3734-6663-4462-b532-613430306134/Rectangle_8.jpg"></figure>
<figure class="image-3"><img src="https://static.tildacdn.com/tild3664-3965-4938-a534-623732653539/Rectangle_7.jpg"></figure>
<figure class="image-4"><img src="https://static.tildacdn.com/tild6663-3132-4563-a433-303030306565/Rectangle_6.jpg"></figure>
<figure class="image-5"><img src="https://static.tildacdn.com/tild3166-6264-4436-a566-306662643530/Rectangle_9.jpg"></figure>
</div>
</div>
<style>
/* Настройки изображений */
:root {
--img-string-width: 250px;
--img-string-height: 250px;
--img-border-radius: 10px;
}
html {
scroll-behavior: auto;
}
.tutorial-cursor {
position: fixed;
top:0;
left:0;
pointer-events:none;
display:grid;
place-items:center;
z-index:100;
transform: translate3d(calc(var(--x) * 1px + 1rem), calc(var(--y) * 1px + 1.5rem), 0) rotate(calc(var(--x-lerp) * 0.5deg));
}
.tutorial-cursor figure {
margin:0;
overflow:hidden;
position: absolute;
left: 0;
top: 0;
width:var(--img-string-width);
height:var(--img-string-height);
border-radius:var(--img-border-radius);
opacity:0;
transform: translateY(25%) scale(0.5);
transition: transform 0.3s cubic-bezier(0.86, 0, 0.31, 1), opacity 0.3s cubic-bezier(0.86, 0, 0.31, 1);
}
.tutorial-cursor img {
width:100%;
height:100%;
object-fit:cover;
}
.tutorial-cursor figure {
opacity:0;
}
.tutorial-cursor figure[data-target="active"] {
opacity:1;
transform: translateY(0) scale(1);
transition: transform 0.6s, opacity 0.3s;
}
</style>
<script src="https://matilda-design.ru/library/string-tune.js"></script>
<script>
$(document).ready(function(){
const stringTune = StringTune.StringTune.getInstance();
stringTune.use(StringTune.StringCursor);
stringTune.scrollDesktopMode = 'smooth'; // заменить на default, если нужен стандартный скролл
stringTune.start(0);
$('[class*="trg-"]').each(function(){
const classList = $(this).attr('class').split(/\s+/);
const trgClass = classList.find(c => c.startsWith('trg-'));
if (!trgClass) return;
const trgNumber = trgClass.split('-')[1];
$(this).attr('string', 'cursor');
$(this).attr('string-cursor-class', '-target-' + trgNumber);
$(this).on('mouseenter', function(){
$('.tutorial-cursor figure').removeAttr('data-target');
$('.tutorial-cursor .image-' + trgNumber).attr('data-target', 'active');
});
$(this).on('mouseleave', function(){
$('.tutorial-cursor figure').removeAttr('data-target');
});
});
});
</script>