If you were here, we'd skinny dip.
I miss spending the summers with you.
If you were here, we'd skinny dip.
Шаг 1
Создаём Zero-блок
Создаём Zero-блок и отрисовываем желаемый контент, который и будем искажать
Шаг 2
Задаем доп. параллакс
В параметрах одного из блоков я задал дополнительно параллакс по скроллу
со скоростью в 120%. Чтобы еще сильнее выделить эффект искажения
Шаг 3
Добавляем скрипты
Создаем 2 блока T123 (HTML-код) и помещаем в первый скрипт для плавного скролла, а во второй скрипт для искажения контента
Скрипт на плавный скролл
<!--Скрипт для плавного скролла-->



<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
<script>
SmoothScroll({
    // Время скролла 400 = 0.4 секунды
    animationTime    : 800,
    // Размер шага в пикселях 
    stepSize         : 75,

    // Дополнительные настройки:
    
    // Ускорение 
    accelerationDelta : 30,  
    // Максимальное ускорение
    accelerationMax   : 2,   

    // Поддержка клавиатуры
    keyboardSupport   : true,  
    // Шаг скролла стрелками на клавиатуре в пикселях
    arrowScroll       : 50,

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Поддержка тачпада
    touchpadSupport   : true,
})
</script>
Скрипт на искажение блока
<!--Скрипт для искажения блока-->


<style>
 
#allrecords {
    background-color: #DBDBD9 !important; /*Уазать цвет заднего фона такой же, как и у блоков, чтобы не было серых дыр между блоками во время скроллинга*/
}
 
section {
  transition: transform .25s;
  will-change: transform;
}

/*Убрать искажение на мобильных устройствах*/
/*@media (max-width: 480px) 
{ section { transform: none !important; }
     }*/

</style>
 
<script>
 
    //Указать список блоков, к которым нужно применить эффект
    $('#rec334030745, #rec334032860, #rec334032997').wrapAll('<section></section>');
    const section = document.querySelector("section");
    let currentPixel = window.pageYOffset;
 
    const looper = function () {
      const newPixel = window.pageYOffset;
      const diff = newPixel - currentPixel;
      const speed = diff * 0.15; //укажи скорость. По дефолту стояло 0.35
 
      section.style.transform = "skewY(" + speed + "deg)";
 
      currentPixel = newPixel;
 
      requestAnimationFrame(looper);
    };
 
    looper();
 
</script>
Шаг 4
Вносим правки в код
В скрипте для искажения блоков, нужно будем указать тот же цвет, что использовался в Zero-блоке, чтобы не было дыр при скролле. А так же добавить через запятую id zero-блоков, которые будут анимироваться. Их можно посмотреть в настройках самого блока.
(В коде они помечены комментариями)
Made on
Tilda