Привет друг. Запускаю новую рубрику "как это сделано". Буду искать какие нибудь интересные штуки и реализовывать на webflow. Надеюсь тебе понравится. Ставь лайк под видео и тут. Оставляй свой комментарий и предложение что бы ты хотел увидеть.

https://youtu.be/x6hqXuuoj30

Приоткрываю занавес: Один из уроков из моего авторского курса quiz webflow 2.0

https://youtu.be/pRNWeJrWlLs

Привет! Как обещал. Фишка как еще можно работать с элементами TAB Приятного просмотра.

https://youtu.be/FKEUUOlCfjQ

Ой ) Забыл тебе дать скрипт.

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api

// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();

// define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();

if($next.length) {
$next.click(); // click resets timeout, so no need for interval
} else {
$('.tab-link:first').click();
}
}, 7000); // 7 second tab loop
}

// reset timeout if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>

Юху... 1000... Спасибо что вы со мной. Что смотрите и поддерживаете то что я делаю. Буду дальше пилить для вас новые фишки.

Обновление которого все давно ждали !! Дополнительные разрешения экрана. Но есть один нюанс о котором я расскажу. Посмотри что бы не совершить ошибку.

https://youtu.be/If9fzGzEavc

Друзья в связи с договором с заказчиком о конфиденциальности и не разглашении информации, я вынужден убрать видео с канала. В видео засветился их сайт. Но Я запишу новое видео чуть более расширенное так как есть что дополнить.

Выкладываю снова но обновленное видео о новом обновлении webflow

https://youtu.be/FidiFgqbW9A

Как сделать прозрачный текст для красивого эффекта. Смотри в этом видео.

https://youtu.be/tK-vHdg0G8A

<style>
.text-bg {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; }
</style>

Записал новую фишку. Как тебе ?

Ну вот и фишка подоспела. Приятного просмотра. Не забудь поставить лайк )

https://youtu.be/9iRDmCpuzhA

<style>
.white-text {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
}
</style>

#обводкатекста

Привет ! Хотите узнать почему в бесплатной версии не работает виджет embet ? Когда давно, webflow расщедрился и открыл функцию виджета для фрии аккаунтов.

Но Этим сразу воспользовались мошенники и какие-то там, где-то индусы начали пачками штамповать мошеннические сайты. Внедряли в них сторонние коды и использовали их в своих не добрых целях. В итоге гугл начал блокировать все сайты созданные на webflow.

Во избежание такого неприятного инцидента сервис закрыл эту возможность для фрии аккаунтов. А так как мошенники не будут платить за каждый новый аккаунт вся эта деятельность крекращена. По этому их можно понять, не потому что жлобы и так далее , а для того что бы сервис работал и развивался. И выкатывал новые фишки для нас. Вот такая вот история )

Удачи друзья! До встречи в следующем посте!

один из способов переноса сайта с бесплатного аккаунта webflow на свой домен.

https://youtu.be/-FktVGE3bIQ

#переноссайтанадомен

Вижу часто проскакивает вопрос в чате о том как кастомизировать точки навигации в слайдере. И да, там дают правильную помощь. Но как правило в ленте это теряется. По этому, выкладываю один из стилей кастомизации в канале. А поиск можно осуществлять по хештегу #код

Вставляем в head
Настраиваем под себя цвета и размеры. Результат увидим после публикации сайта или в элементе embet

<style>
.w-slider-dot {
width: 20px !important;
height: 20px !important;
background: transparent;
border: 1px solid #d4d4d4;
transition: 300ms !important;
}
.w-slider-dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 100%;
background: #d4d4d4;
}

.w-slider-dot.w-active {
background: transparent;
border: 1px solid #59a72f;
}

.w-slider-dot.w-active::before {
background: #59a72f;
}
</style>

Короче нарыл тут один зацикленный слайдер. С готовым кодом, простой. Даю код. Если хотите урок, увижу по пальцам вверх. Если вдруг кто то не разберется.

в итоге получится так

https://test3test3.webflow.io/slider-swiper

Теперь коды:
Это в head

<!-- swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

Это в before body
<!-- swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var nextprevbuttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(pagination, nextprevbuttons);
/ loop throw all swipers on the page /
$('.swiper-container').each(function( index ) {
$( this ).append(swiperNodes);
});
</script>
<!-- swiper JS Initialize -->
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
slidesPerView: 1,
spaceBetween: 30,
freeMode: false,
loop: true,
centeredSlides: false,
// Enable lazy loading
lazy: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
keyboard: {
enabled: true,
},
breakpoints: {
0: { / when window >=0px - webflow mobile landscape/portriat /
slidesPerView: 1,
spaceBetween: 10,
},
767: { / when window >= 767px - webflow tablet /
slidesPerView: 2,
spaceBetween: 15,
},
988: { / when window >= 988px - webflow desktop /
slidesPerView: 3,
spaceBetween: 20,
}
},
/ uncomment if you want autoplay slider
autoplay: {
delay: 3000,
},
/
/ uncomment if you want scrollbar
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
/
})
</script>

Так же в коде есть закомментированные функции можно открыть и применить те кто разбирается в js поймет.

Держи инструкцию к предыдущему посту

https://youtu.be/pH4T9YBLfs8

Сегодня я тебя порадую еще одним уроком! Он прикольный Я уверен тебе понравится !!! Вот такую штуку с тобой сделаем )

https://test3test3.webflow.io/