Copy of Код для тильды

Заказать сайт

Поиск

Instagram

Уроки

прокачай свои знания по работе со стандартными блоками в тильде

кастомизация стандартных блоков с помощью кода

чат предзаписи

Подгоняем ширину стандартаного блока TX16N2 (ответы на вопросы) под ширину зероблока


<style>
    /*Подгоняем ширину блока под зеро-блоки для адаптивов у блока с ответами на вопросы TX16N2*/
 
   /*Ширина блока на мобилках до 480px*/
   @media screen and (max-width: 480px){
   #rec384559232 .t-col {  /*Тут прописываем ID блока*/
   padding-left: 10px;
   padding-right: 10px;
}
   #rec384559232 .t-container {     /*Тут прописываем ID блока*/
   max-width: 320px;
}}


    /*Ширина блока на мобилках от 480px до 640px*/
   @media (min-width: 481px) and (max-width:640px){
   #rec384559232 .t-col {       /*Тут прописываем ID блока*/
   padding-left: 0px;
   padding-right: 0px;
}  
   #rec384559232 .t-container {     /*Тут прописываем ID блока*/
   max-width: 460px;
}}

    /*Тут подгоняем шрифт под общий размер шрифта на всем сайте*/


    /*Размер шрифта  до 640px, телефон горизонтальный и вертиклаьный*/
    @media screen and (max-width:640px){
       .t668__title{ 
           font-size: 16px !important;      /*Размер заголовка*/
       }
   .t668__text{
       font-size: 14px !important;      /*Размер текста*/
   }}


  

   /*Размер шрифта  от 640px до 960px*/
   @media (min-width:641px) and (max-width:1200px){
   .t668__title{ 
           font-size: 18px !important;      /*Размер заголовка*/
       }
   .t668__text{
       font-size: 16px !important;      /*Размер текста*/
   }}
   </style>

Добавляем анимацию скругления углов у блока TE110 при наведении

Digital Storytelling

Tilda Publishing

Digital Storytelling

The Future

Digital Storytelling

Tilda Publishing


<style>
/*Добавляем анимацию скругления углов у блока TE110 при наведении, только для десктопа*/

@media screen and (min-width:1200px){
    .t694__col{
        transition: all .5s;
        -webkit-transition: all .8s;
    }
    
    .t694__col:hover{   /*Одинаковый радиус для всех карточек*/
        border-radius: 50px 200px 50px 150px !important;  /*Радиус скругления у блока*/
        transition: all .5s; /*Скорость анимации*/
        -webkit-transition: all .8s;
    }
    
/*Если не нужен разный радиус для каждой карточки, то блоки ниже можно удалить */
    
    .t694__col:nth-child(0):hover{   /*Первая карточка*/
        border-radius: 100px 500px 50px 50px !important;  /*Радиус скругления у блока*/
        transition: all .5s; /*Скорость анимации*/
        -webkit-transition: all .8s;
    }
    
    .t694__col:nth-child(1):hover{      /*Вторая карточка*/
        border-radius: 500px 10px 10px 10px !important;  /*Радиус скругления у блока*/
        transition: all .5s; /*Скорость анимации*/
        -webkit-transition: all .8s;
    }
    
    .t694__col:nth-child(2):hover{      /*Третья карточка*/
        border-radius: 500px 500px 50px 50px !important;  /*Радиус скругления у блока*/
        transition: all .5s; /*Скорость анимации*/
        -webkit-transition: all .8s;
    }
    /*Удалять до этого комментария*/
}

</style>

Добавляем любое количество Lottie анимаций

автопроигрывание

по скроллу


<!--Lottie анимация с автоматическим проигрыванием-->

<!--Создаем в зеро-блоке html и добавляем туда этот код-->
<div id="lottie"></div>


<!--Добавляем код ниже в блок T123-->

<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js'></script>


<script>

/* Первая анимация*/
var svgContainer = document.getElementById('lottie');   // ID в зеро-блоке и тут должны совпадать
var animItem = bodymovin.loadAnimation({
  wrapper: svgContainer,
  animType: 'svg',
  loop: true,   // Если нужно проиграть анимацию один раз, то ставим false вместо true
  path: 'https://labs.nearpod.com/bodymovin/demo/markus/walk/girl.json'     // Ссылка на json файл
});
animItem.setSubframe(false); //Если false, то используется частота кадров из AE 


/* Вторая анимация*/
var svgContainer = document.getElementById('lottie1'); // ID в зеро-блоке и тут должны совпадать
var animItem2 = bodymovin.loadAnimation({
  wrapper: svgContainer,
  animType: 'svg',
  loop: true,   // Если нужно проиграть анимацию один раз, то ставим false вместо true
  path: 'https://labs.nearpod.com/bodymovin/demo/markus/walk/parents.json' // Ссылка на json файл
});
animItem2.setSubframe(false);


animItem.setSpeed(0.8)  // Скорость проигрывания анимации 
animItem2.setSpeed(0.8)
window.onresize = function(){
  animItem.resize()
  animItem2.resize()
}
</script>


<!--Lottie анимация с проигрыванием по скролу-->

<!--Создаем в зеро-блоке html и добавляем туда этот код-->
<lottie-player id="firstLottie" src="https://labs.nearpod.com/bodymovin/demo/markus/walk/sasquatch.json" style="width:100%; height:100%;"></lottie-player>

<!--Добавляем код ниже в блок T123-->
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>


<script>

//Первая анимация 
LottieInteractivity.create({
  mode: 'scroll',
  player: '#firstLottie', //ID lottie-player в зеро-блоке и тут должны совпадать
  container: "#myсontainer", //ID контейнера, где лежит lottie player
  actions: [
    {
      visibility: [0, 0.1], // C 0 до 10% от высоты экрана анимация на паузе
      type: "stop",
      frames: [0]
    },
    {
      visibility: [0.1, 1], // C 10% до 100% от высоты экрана анимация воспроизводится
      type: "seek",
      frames: [0, 100] // С какого по какой кадр будет проигрываться анимация
    }
  ],
});


// Вторая анимация
LottieInteractivity.create({
  mode: 'scroll',
  player: '#secondLottie', //ID lottie-player в зеро-блоке и тут должны совпадать
  actions: [
    {
      visibility: [0, 0.2], // C 0 до 10% от высоты экрана анимация на паузе
      type: "stop",
      frames: [0]
    },
    {
      visibility: [0.2, 1], // C 10% до 100% от высоты экрана анимация воспроизводится
      type: "seek",
      frames: [0, 100] // С какого по какой кадр будет проигрываться анимация
    }
  ],
});
    
</script>

Добавляем появление иконки у пункта меню при наведении


<style>

/*Добавляем появление иконки  при наведении на пункт меню*/
@media screen and (min-width:1200px){ /*Задаем параметры только для десктопа*/
.t450__list_item a{
   display: flex;
   align-items: center;
   position:relative;
   left: -20px;
}

.t450__list_item a:before{
    content: "";
    position: relative;
    height: 44px;   /*Высота иконки*/
    width: 44px;    /*Ширина иконки*/
    margin-right: 15px; /*Отступ справа у иконки от текста*/
    left:-30px;
    display:flex;
    opacity:0;
    background: url(https://static.tildacdn.com/tild3230-6462-4538-a630-343761363963/MapPinLine2.svg) no-repeat; /*Ссылка на иконку*/
    transition: 0.6s ease-in-out; /*Скорость появления иконки и плавность перехода*/
}

.t450__list_item a:hover:before{
    opacity:1;
    left: 0px;
}
    
.t450__list_item:last-child a {
    display: flex;
}
}

</style>

I am ready for a long road flight for work with a week- or months-long projects.

3D эффект для карточек

Critical Writings on Graphic Design

The view of images in the critical perspective is when the viewers criticize the images.

100 Ideas that Changed Graphic Design

Visual communication takes place through pictures, graphs, and charts.

Critical Writings on Graphic Design

The view of images in the critical perspective is when the viewers criticize the images.


<style>

/*3D эффект для карточек (пример на блоке TE215, также можно применить для любого стандартного блока, где есть подобные колонки из товаров или статей, название класса нужно вытащить через просмотр кода*/

/*Значение перспективы для родительского блока, чем больше значение, тем меньше эффект перспективы*/     
#rec353765248 .t688__row{  /*Указываем ID блока где находятся карточки*/
    perspective:400px; 
    -webkit-perspective:400px;
}

/*Размер искажения карточек в нормальном состоянии*/
#rec353765248 .t-col_4{
    transform:rotateX(10deg); /*Угол поворота карточки по оси X, также можно добавить через пробел rotateY и Z*/ 
    -webkit-transform:rotateX(10deg);
    -moz-transform:rotateX(10deg);
    transition:1s ease; /*Скорость анимации при возвращении в исходное положение*/
    -webkit-transition:1s ease;
    -moz-transition:1s ease;
    
}
/*Размер искажения карточек при наведении*/
#rec353765248 .t-col_4:hover{
    transform:rotateX(0deg);
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    transition:1s ease;
    -webkit-transition:1s ease;
    -moz-transition:1s ease;

}}

/*Если нужно, чтобы этот код применялся только на декстопной версии, то весь код выше нужно вставить между этим кодом
@media screen and (min-width:1200px){

}
*/
<style/>

Плавное увеличение карточки при наведении

Premium 10 days

Access to all studios
Thee days with a personal trainer
Evening classes after 6 AM
5 days shifting

$250 / person

Join now

Premium 30 days

Access to all studios
15 days with a personal trainer
All-day classes
15 days shifting

$400 / person

Join now

Premium 1 year

Access to all studios
20 days with a personal trainer
All-day classes
20 days shifting

$600 / person

Join now


<style>
/*Плавное увеличение карточки при наведении. Нужно через инспектор кода вытащить класс карточки и указать ID блока*/
#rec353797691 .t615__col{
    transition:1s ease; /*Скорость анимации при возвращении в нормальное состояние*/
    -webkit-transition:1s ease;
    -moz-transition:1s ease;
}

#rec353797691 .t615__col:hover{
    transform:scale(1.1); /*Анимация увеличения или уменьшения.Начальное значение просто 1*/
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    transition:1s ease; /*Скорость анимации при наведении*/
    -webkit-transition:1s ease;
    -moz-transition:1s ease;
}

</style>

Меняем расстояние между карточек

Product 1

Graphic design is the process of visual communication and problem-solving

Ask for price

Product 2

Information architecture is the art and science of structuring and organizing information

Product 3

It is a form of solution-based thinking with the intent of producing a constructive future result

Read article


<style>

/*Меняем размер отступа между карточками на декстопе. Главное чтобы общая сумма была равна 400px*/
/*Указываем ID блока, и через инспектор кода ищем класс одной карточки, нам нужен самый первый */

@media screen and (min-width:1200px){
#rec353807800 .t774__col {
    max-width: 390px; /*Размер самой карточки*/
}

#rec353807800 .t774__col {
    margin-left: 5px; /*Отступ слева*/
    margin-right: 5px; /*Отступ справа. Сумма этих отступов будет расстоянием между карточками*/
}
}

</style>

Покадровая анимация по скролу

Проведи мышкой (свайп) вправо


/*Создаем зеро-блок, добавляем туда этот код html. Прописываем ссылки на изображения,
сколько изображений, столько и кадров. Можно использовать стандартные блоки,
чтобы получить ссылки на изображения, которые будут залиты на тильду, например Галерею GL03 */

<div id="myTurntable" class="turntable">
  <ul>
    <li data-img-src="ссылка на изображение1" class="">
    <li data-img-src="ссылка на изображение2" class="">
    <li data-img-src="ссылка на изображение2" class="">
  </ul>
</div>



/*Добавляем блок html T123 и вставляем туда код, который ниже */

<style>
.turntable {
  margin: 0px; 
}
.turntable ul {
  padding: 0px;
  margin: 0px; 
}
.turntable ul li {
  list-style-type: none;
  display: none; 
}
.turntable ul li img {
  width: 100%; 
}
.turntable ul li.active {
  display: block; 
}
</style>


/*Добавляем еще один блок html T123 и вставляем код ниже*/
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> /*Его можно прописать в настройках сайта*/

<script>
!function e(i,t,o){function a(r,s){if(!t[r]){if(!i[r]){var c="function"==typeof require&&require;if(!s&&c)return c(r,!0);if(n)return n(r,!0);var l=new Error("Cannot find module '"+r+"'");throw l.code="MODULE_NOT_FOUND",l}var m=t[r]={exports:{}};i[r][0].call(m.exports,function(e){var t=i[r][1][e];return a(t?t:e)},m,m.exports,e,i,t,o)}return t[r].exports}for(var n="function"==typeof require&&require,r=0;r<o.length;r++)a(o[r]);return a}({1:[function(e,i,t){"use strict";!function(e){e.fn.turntable=function(i){function t(i){var t,o=i.length;t="scroll"===n.axis?e(window).height():"y"===n.axis?r.height():r.width();for(var a=t/o,c=0;c<i.length;c++)s[c]={min:a*c,max:a+a*c,index:c};n.reverse===!0&&(s.reverse(),e.each(s,function(e,i){i.index=e}))}var o=function(){var e=!1;return function(i){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(i)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(i.substr(0,4)))&&(e=!0)}(navigator.userAgent||navigator.vendor||window.opera),e},a=e("ul",this).children(),n=e.extend({},e.fn.turntable.defaults,i),r=e(this),s=[];!function(i){a.each(function(){e(this).html('<img src="'+e(this).data("imgSrc")+'">')})}(),e("li:first-child>img",r).load(function(){e(this).parent().addClass("active"),t(a)}),e(window).resize(function(){t(a)});var c=function(i,t){e.each(i,function(){t>=this.min&&t<=this.max&&(a.removeClass("active"),a.eq(this.index).addClass("active"))})};return"scroll"===n.axis?e(window).scroll(function(){var i;i="bottom"===n.scrollStart?r.height():"top"===n.scrollStart?0:r.height()/2;var t=r.offset(),o=t.top-(e(window).scrollTop()-i);c(s,o)}):o()?r.on("touchmove",function(i){i.preventDefault();var t,o=e(this).offset(),a=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];t="y"===n.axis?a.pageY-o.top:a.pageX-o.left,c(s,t)}):r.on("mousemove",function(i){var t,o=e(this).offset();t="y"===n.axis?i.pageY-o.top:i.pageX-o.left,c(s,t)})},e.fn.turntable.defaults={axis:"x",reverse:!1,scrollStart:"middle"}}(jQuery)},{}]},{},[1]);

$('#myTurntable').turntable({
  axis:'scroll',
  reverse:'true',
  scrollStart:'bottom' /*Откуда будет начинаться анимация, bottom, top, center*/
});

$('#myTurntable2').turntable(); /*Анимация по перемещению мышки. Тогда нужно будет поменять в самом первом коде, который вставляли в зеро-блок id, который будет указан здесь*/
</script>


/*Создаем зеро-блок, и там вставляем код ниже, сам html блок растягиваем на 100% по гриду и высоту задаем равную размеру шрифта*/

<div id="container">
	<span id="text1"></span>
	<span id="text2"></span>
</div>

<svg id="filters">
	<defs>
	<filter id="threshold">
	<feColorMatrix in="SourceGraphic"
	type="matrix"
	values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" />
	</filter>
	</defs>
</svg>


/*Добавляем html блок T123 и вставляем туда этот код*/

<style>
#container {
	filter: url(#threshold) blur(0.6px);
	width:100%;
	height:100%;
	margin:0 auto;
}
#text1, #text2 {
	position: absolute;
	width: 100%;
	font-family: "Gilroy",serif;     /*Семейство шрифта*/
	font-weight: 700;    /*Начертание*/
	font-size: 140px;     /*Размер текста*/
	display: inline-block;
	color: white; /*Цвет текста, словом, или через HEX #ffffff*/
	text-align: left;   /*Выравнивание текста по левому краю, центру, по правому краю*/
}

/*Если такой эффект нужен на телефоне, то нужно еще прописать дополнительный код ниже, если не нужен, то нужно удалить*/

@media screen and (max-width:640px){ /*Максимальное разрешение, до которого будет применятся данный размер текста*/
#text1, #text2 {
	font-size: 40px;     /*Размер текста для этого разрешения*/
}}
</style>

<script>
const elts = {
	text1: document.getElementById("text1"),
	text2: document.getElementById("text2")
};

const texts = [ //Сюда прописываем текст, который должен меняться
	"Как",
	"сделать",
	"такой",
	"эффект",
	"с помощью",
	"кода?"
];

const morphTime = 0.5; //Скорость перехода к следующему слову 
const cooldownTime = 0.25;

let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;

elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];

function doMorph() {
	morph -= cooldown;
	cooldown = 0;
	
	let fraction = morph / morphTime;
	
	if (fraction > 1) {
		cooldown = cooldownTime;
		fraction = 1;
	}
	
	setMorph(fraction);
}

function setMorph(fraction) {
	
	elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
	elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
	
	fraction = 1 - fraction;
	elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
	elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
	
	elts.text1.textContent = texts[textIndex % texts.length];
	elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}

function doCooldown() {
	morph = 0;
	
	elts.text2.style.filter = "";
	elts.text2.style.opacity = "100%";
	
	elts.text1.style.filter = "";
	elts.text1.style.opacity = "0%";
}

function animate() {
	requestAnimationFrame(animate);
	let newTime = new Date();
	let shouldIncrementIndex = cooldown > 0;
	let dt = (newTime - time) / 2000;
	time = newTime;
	
	cooldown -= dt;
	
	if (cooldown <= 0) {
		if (shouldIncrementIndex) {
			textIndex++;
		}
		
		doMorph();
	} else {
		doCooldown();
	}
}

animate();  
</script>


/*Создаем зеро-блок, и там вставляем код ниже, сам html блок растягиваем на 100% по гриду и высоту задаем равную размеру шрифта*/

<div class="container">
  <div class="text"></div>
</div>


/*Добавляем html блок T123 и вставляем туда этот код*/

<style>
.container{
  height: 100%;
  width: 100%;
}
.text{
  font-family: 'Gilroy', serif; /*Семейство шрифта*/
  font-weight: 300;     /*Начертание шрифта*/
  font-size: 80px;  /*Размер шрифта*/ /*Цвет шрифта*/
  color: white;      /*Цвет текста*/
  text-align: left;  /*Выравнивание текста по правому краю, центру или левому*/
} 
  .dud{
      color:green; /*Цвет символов*/
      font-weight: 100; /*Начертание символов*/
  }
  
/*Если такой эффект нужен на телефоне, то нужно еще прописать дополнительный код ниже, у которого убрать комментарии*/

/*
@media screen and (max-width:640px){ /*Максимальное разрешение, до которого будет применяться данный размер шрифта*/
  .text{
  font-size: 40px !important;  /*Размер шрифта*/
}  
*\

</style>

<script>

class TextScramble {
  constructor(el) {
    this.el = el
    this.chars = '!<>-_\\/[]{}—=+*^?#________'
    this.update = this.update.bind(this)
  }
  setText(newText) {
    const oldText = this.el.innerText
    const length = Math.max(oldText.length, newText.length)
    const promise = new Promise((resolve) => this.resolve = resolve)
    this.queue = []
    for (let i = 0; i < length; i++) {
      const from = oldText[i] || ''
      const to = newText[i] || ''
      const start = Math.floor(Math.random() * 60)  //Если нужно появление медленне, то тут и снизу увеличиваем значение
      const end = start + Math.floor(Math.random() * 60)
      this.queue.push({ from, to, start, end })
    }
    cancelAnimationFrame(this.frameRequest)
    this.frame = 0
    this.update()
    return promise
  }
  update() {
    let output = ''
    let complete = 0
    for (let i = 0, n = this.queue.length; i < n; i++) {
      let { from, to, start, end, char } = this.queue[i]
      if (this.frame >= end) {
        complete++
        output += to
      } else if (this.frame >= start) {
        if (!char || Math.random() < 0.28) {
          char = this.randomChar()
          this.queue[i].char = char
        }
        output += `<span class="dud">${char}</span>`
      } else {
        output += from
      }
    }
    this.el.innerHTML = output
    if (complete === this.queue.length) {
      this.resolve()
    } else {
      this.frameRequest = requestAnimationFrame(this.update)
      this.frame++
    }
  }
  randomChar() {
    return this.chars[Math.floor(Math.random() * this.chars.length)]
  }
}


const phrases = [   //Сюда пишем слова, которые будут меняться
  'Как',
  'сделать',
  'такой текст',
  'с помощью',
  'кода?'
]

const el = document.querySelector('.text')
const fx = new TextScramble(el)

let counter = 0
const next = () => {
  fx.setText(phrases[counter]).then(() => {
    setTimeout(next, 600)   //Пауза между сменой слов
  })
  counter = (counter + 1) % phrases.length
}

next()
</script>


<style>

/*Фильтры наложения*/

/*Создаем шейп, задаем ему класс, убираем заливку. Скругление углов происходит через код, также добавление обводки, если она нужна*/
.class1{
  backdrop-filter: hue-rotate(200deg);
  -webkit-backdrop-filter: hue-rotate(200deg);
  -moz-backdrop-filter: hue-rotate(200deg);
  border-radius: 25px;
  border:1px solid gray;
}

.class2{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  border-radius: 25px;
  border:1px solid #F4f4f4;
}

.class3{
  backdrop-filter: brightness(40%);
  -webkit-backdrop-filter: brightness(40%);
  -moz-backdrop-filter: brightness(40%);
  border-radius: 25px;
  border:1px solid gray;
  
}

.class4{
  backdrop-filter: contrast(10%);
  -webkit-backdrop-filter: contrast(10%);
  -moz-backdrop-filter: contrast(10%);
  border-radius: 25px;
  border:1px solid gray;
  
}

.class5{
  backdrop-filter: grayscale(300%);
  -webkit-backdrop-filter: grayscale(300%);
  -moz-backdrop-filter: grayscale(300%);
  border-radius: 25px;
  border:1px solid gray;
  
}

.class6{
  backdrop-filter: invert(160%);
  -webkit-backdrop-filter: invert(160%);
  -moz-backdrop-filter: invert(160%);
  border-radius: 25px;
  border:1px solid gray;
  
}

/*Смена эффекта при наведении*/
.class7{
  backdrop-filter: sepia(200%);
  -webkit-backdrop-filter: sepia(200%);
  -moz-backdrop-filter: sepia(200%);
  border-radius: 25px;
  border:1px solid gray;
}

.class7:hover{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  border-radius: 25px;
  border:1px solid #F4f4f4;
  
}

 .class8{
  backdrop-filter: saturate(200%);
  -webkit-backdrop-filter: saturate(200%);
  -moz-backdrop-filter: saturate(200%);
  border-radius: 25px;
  border:1px solid gray;
  
}
</style>

6 карточек товара в один ряд и минимум кода

SALE

Sabrina Fossi clock

₽

200

₽

SALE

Sabrina Fossi clock

₽

200

₽

SALE

Sabrina Fossi clock

₽

200

₽

Radio BRAUN

₽

Radio BRAUN

₽

Accessories by Ionna Vautrin

108

₽

Accessories by Ionna Vautrin

108

₽


<style>

/*Не стандартное количество карточек в ряд, 5,6,7 и тд. для блока ST305N*/

@media screen and (min-width:1200px){  /*Задаем эти изменения только для десктопной версии сайта*/

/*Сюда вставляем ID блока и класс обертки самих товаров*/
   #rec354494705 .t776__parent {
    display: flex;
    flex-wrap: wrap;
}

#rec354494705 .t-col_3 { /*Это класс самой карточки товара*/
    max-width: 13%; /*Сколько места занимает одна карточка*/
}
</style>


<style>

/*Не стандартное количество карточек в ряд, 5,6,7 и тд. для блока ST315N*/

@media screen and (min-width:1200px){ /*Задаем эти изменения только для десктопной версии сайта*/
/*Сюда вставляем ID блока и класс обертки самих товаров*/
#rec354491914 .t786__container {
    display: flex;
    flex-wrap: wrap;
}

#rec354491914 .t786__col_25 {   /*Это класс самой карточки товара*/
    width: 16%;     /*Сколько места занимает одна карточка*/
}}
</style>

Фильтры наложения

Наведи на меня

можете меня поблагодарить

если у вас есть желание поблагодарить автора за работу, то вы можете пожертвовать любую сумму на развитие проекта

2023. Копирование материалов разрешено только с указанием источника