Fishki Webflow – Telegram

Fishki Webflow

1.64K subscribers

62 photos

31 videos

2 files

230 links

Разбираем разные приёмы верстки элементов в редакторе webflow.

Download Telegram

About

Blog

Apps

Platform

1.64K subscribers

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

Настраивать форму для отправки. Этот курс не похож на другие. Вам не придётся подключать сторонние сервисы или плагины. Всё сделано исключительно средствами редактора webflow. А самое главное вы можете сделать его на бесплатном аккаунте. Так же в дополнительной версии курса, вы получите готовый шаблон который сможете настроить под себя и использовать в своих проектах.

2.31K viewsВячеслав Володин, edited 01:04

Fishki Webflow pinned a photo

01:04

Привет. Зписал короткий урок. Как сделать линию прогресса при прокрутке сайта. Приятного просмотра.

https://youtu.be/D44PYobfblU

#прогрессбар

Как сделать прогрессбар в webflow | Webflow урок №32.

Делаем прогрессбар при помощи элементов див и подключаем анимацию.

Поддержать канал.
https://money.yandex.ru/to/410013637868275

Мой ВК - https://vk.com/slavariik
Мой telegram - https://t.me/vvstudio
Telegram канал - https://t.me/webflowschool

2.01K viewswebflowschool, edited 01:04

👍🏻 21 👎🏻

Давайте попробуем провести стрим..сегодня.. Могу разобрать ваши работы, ответить на вопросы. как на это смотрите ?

1.56K viewswebflowschool, edited 16:14

👍🏻 14 👎🏻

Привет. Как и обещал. Новая фишка. Приятного просмотра.

https://youtu.be/GY38ddPga-Y

Делаем печатающийся текст в webflow. | Webflow урок №33.

Делаем печатающийся текст в webflow. Вставляем JS скрипт на сайт.

Поддержать канал.
https://money.yandex.ru/to/410013637868275

Мой ВК - https://vk.com/slavariik
Мой telegram - https://t.me/vvstudio
Telegram канал - https://t.me/webflowschool

1.76K viewswebflowschool, edited 10:22

👍🏻 25 👎🏻

Присоединяйся к чату

<Head>

<style>
/* add custom cursor */
.typed-words::after {
content: "|";
display: inline;
animation: blink 1s infinite;
}

/* custom cursor animation */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

1.55K viewsВячеслав Володин, 13:46

<footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

<script>
var typed = new Typed(".typed-words", {
strings: ["Привет НЕО", "Матрица нашла тебя", "Иди за белым кроликом", "ТУК ТУК НЕО"],
typeSpeed: 50,
backSpeed: 0,
backDelay: 3000,
startDelay: 500,
loop: true,
showCursor: false,
cursorChar: "|",
attr: null,
});
</script>

1.49K viewsВячеслав Володин, 13:46

Привет лови еще одну фишку на сегодня. Манипуляции со слайдером. Приятного просмотра.

https://youtu.be/Yj5wdykrM5A

1.45K viewswebflowschool, edited 17:08

👍🏻 20 👎🏻

Присоединяйся к чату

Сервис для тестирования разрешения сайта.

http://lab.maltewassermann.com/viewport-resizer/

1.48K viewsВячеслав Володин, 18:49

Добавляю ссылочку на проект со слайдером.

https://preview.webflow.com/preview/test2test?utm_medium=preview_link&utm_source=designer&utm_content=test2test&preview=5434c37884b3037912c7647a7255537e&pageId=5cdc7e65a01596ec7065c528&mode=preview

1.32K viewsВячеслав Володин, 21:52

Привет. Держи новую фишку. Как стилизовать стандартный scrollbar

https://youtu.be/2rgt8Cw3QDo

#скроллбар

Как стилизовать скроллбар в webflow | Webflow урок №35.

Как стилизовать скроллбар в webflow. Добавляем код стилизацию на страницу, и меняем стиль ползунка как для всего сайта так и для отдельного блока.

Если желаете поддержать мой канал. )
https://money.yandex.ru/to/410013637868275

Мой ВК - https://vk.com/slavariik…

1.57K viewswebflowschool, edited 00:42

👍🏻 21 👎🏻

Присоединяйся к чату

Стилизация скролл бар

<style>
.content-scroll_wrapper::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px
}

.content-scroll_wrapper::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}

.content-scroll_wrapper::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url('https://yraaa.ru/_pu/24/59610063.png');
background-position:center;
background-repeat:no-repeat;
}

.content-scroll_wrapper::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}

.content-scroll_wrapper::-webkit-scrollbar{
width: 11px;
}
</style>

1.54K viewsВячеслав Володин, 00:43

::-webkit-scrollbar-thumb – Это ползунок скроллбара (чем вы держите и прокручиваете страницу). Он может иметь цвет или использовать градиент в качестве фона.

::-webkit-scrollbar-track – позволяет настроить трек скроллбара (путь движения ползунка).

::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов (или левого и правого для горизонтальных полос прокрутки):

1.54K viewsВячеслав Володин, 00:47

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

https://youtu.be/fqEFpu6EIwM

#слайдер

Слайдер карусель в webflow | Webflow урок №36

Как сделать слайдер карусель в webflow при помощи анимаций.

Если желаете поддержать мой канал. )
https://donate.stream/ya410013637868275

Мой ВК - https://vk.com/slavariik
Мой telegram - https://t.me/vvstudio
Telegram канал - https://t.me/webflowschool

1.65K viewswebflowschool, edited 20:32

👍🏻 39 👎🏻

Присоединяйся к чату

Привет друзья. Заждались новых видео ? Записал новый интересный урок. Он скоро будет готов. Покажите ваше желание своими лайками )))

1.21K viewswebflowschool, 20:17

👍🏻 72 👎🏻

Готово !!! Приятного просмотра.. Видео получилось довольно продолжительным, по этому давайте назовем это WORKSHOP WEBFLOW.

https://youtu.be/6237BzpnCUU

workshop вёрстка в webflow

Получился некий воркшоп по верстке блока с применением css grid и анимаций

Если желаете поддержать мой канал. )
https://money.yandex.ru/to/410013637868275

Мой ВК - https://vk.com/slavariik
Мой telegram - https://t.me/vvstudio
Telegram канал - https:…

1.38K viewswebflowschool, 12:45

👍🏻 25 👎🏻

Присоединяйся к чату

Привет.. Оказывается не многие умеют делать такой эффект в webflow. Записал для тебя короткий урок. Приятного просмотра.

https://youtu.be/Zr9sEWW0YEs

Эффект Кена Барнса в webflow | Webflow урок №37

Плавное увеличение изображения на заднем фоне или в слайдере называется Ken Burns Effect. Такой эффект оживляет ваши сайты и привлекает посетителей.

Если желаете поддержать мой канал. )
https://money.yandex.ru/to/410013637868275

Мой ВК - https://vk.com/slavariik…

1.44K viewswebflowschool, 22:19

👍🏻 23 👎🏻

Присоединяйся к чату

This media is not supported in your browser

VIEW IN TELEGRAM

Привет. Я тут подумал. А что если карточки товара на сайте можно сделать такой эффект. Я думаю записать урок. Если вам интересно. Давайте посмотрим по количеству лайков. Сложного тут ничего. Давайте повторим по импровизируем. Ну в общем смотрю за вашей активностью. И если что, записываю урок. Знаю новичкам это будет полезно.

1.22K viewsВячеслав Володин, 16:44

Fishki Webflow via @like

Поехали

1.25K viewsВячеслав Володин, 16:46

👍🏻 73 👎🏻 2

привет... я наконец записал для вас фишку к предыдущему анонсу. и через и скоро выложу урок

1.09K viewsВячеслав Володин, 13:18

а так же еще одну интересную новость ) ... интрига

1.1K viewsВячеслав Володин, 13:18