Fishki Webflow
1.64K subscribers
62 photos
31 videos
2 files
230 links
Разбираем разные приёмы верстки элементов в редакторе webflow.
Download Telegram
<script>
(function () {

var deadline = '2018-09-28 00:00';

function pad(num, size) {
var s = "0" + num;
return s.substr(s.length - size);
}

// fixes "Date.parse(date)" on safari
function parseDate(date) {
const parsed = Date.parse(date);
if (!isNaN(parsed)) return parsed
return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
}

function getTimeRemaining(endtime) {
let total = parseDate(endtime) - Date.parse(new Date())
let seconds = Math.floor((total / 1000) % 60)
let minutes = Math.floor((total / 1000 / 60) % 60)
let hours = Math.floor((total / (1000 * 60 * 60)) % 24)
let days = Math.floor(total / (1000 * 60 * 60 * 24))

return { total, days, hours, minutes, seconds };
}

function clock(id, endtime) {
let days = document.getElementById(id + '-days')
let hours = document.getElementById(id + '-hours')
let minutes = document.getElementById(id + '-minutes')
let seconds = document.getElementById(id + '-seconds')

var timeinterval = setInterval(function () {
var time = getTimeRemaining(endtime);

if (time.total <= 0) {
clearInterval(timeinterval);
} else {
days.innerHTML = pad(time.days, 2);
hours.innerHTML = pad(time.hours, 2);
minutes.innerHTML = pad(time.minutes, 2);
seconds.innerHTML = pad(time.seconds, 2);
}
}, 1000);
}

clock('js-clock', deadline);
})();
</script>
​​Привет ребята. В общем скоро выйдет новая фишка в webflow называется grid то есть сетка. Это крутая штука которая облегчит кучу задач. Ее свойства как по мне, потрясающие. Уже сейчас я увидел кучу вариантов решения прошлых задач при помощи этого инструмента, например создание таблиц.
А так, все ограничивается лишь вашим воображением.
Хотите что бы после релиза я сделал обзор на новинку? Ставьте ваш королевский лайк 👍🏻 и я обязательно запишу для вас обзор. Это огонь !!! 🔥🔥🔥
Релиз новой фишки обещали в октябре. Так что осталось совсем немного, и мы с вами получим классный инструмент. Жду не дождусь уже. 😁
Вот сидел тут думал думал, как решить такую вот задачу.. И подкинул друг идею. Я решил попрбовать и правда решилась задача.

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

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

Смотрите видео, что у меня получилось.. !!!📽
Забыл отрезать в начале заставку ))) Сори!!!
Желаете такой урок ?? Ну тогда с вас ваш королевский 👑 лайк👍🏻
Привет друзья. Как и обещал, записал для вас урок о том как создать форму с индентификацией карточек или выбранных пунктов на сайте. Мы объеденяем сатичную форму и модальное окно.

Надеюсь вам понравится. Если да?, с вас поддержка. 👍🏻Если нет.. 😒 Запишем как бесполезный урок и пойдем писать дальше. 😁

Ладно Все же он кому то будет полезен. Ведь мне пригодился. Смотрим.📽

Отдельно спасибо за пальцы вверх на канале youtube !!!

https://youtu.be/iksE4eBCEqY
​​Привет.. И снова webflow нас порадовал. Добавил в интеракции функцию фильтры. Возможности фантазии расширяются)
Привет !! Наконец то сегодня вышла обнова для webflow GRID (сетки). Сегодня вечером сделаю обзор.

Ну как всегда прошу поддержки, вашими королевскими лайками, что бы понять ваш интерес к этому обзору нового инструмента.
Привет Друзья. Еще один опрос. И сегодня выпускаю 3 урока. Обзор GRID Прозрачный текст с обводкой, и как установить маски телефонов на сайт. За маски голосуем )
Покажу как сделат на платном и бесплатном аккаунте
Привет.. как и обещал!! Даю 3 урока в 1 Думал получится коротко но не совсем, я расставил трекеры по времени по этому ты можешь перейти на интересующий тебя эпизод.

Приятного просмотра. И кажи, потом как тебе, Твое мнение очень важно для меня это отразится будущих видео.

https://youtu.be/uQOaFEmSwFg
Простите друзья.. забыл про скрипы... Выкладываю!!

Это стиль для обводки:

<style>
.stroked {
-webkit-text-stroke: 1.0px rgba(248, 21, 21, 0.6);
-webkit-text-fill-color: transparent;
}
</style>

Это скрипты маски:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/1vi7frwfsxjopfl/input%20mask.js"></script>

<script>
$('.mask-phone').mask('+7 (999) 999-99-99');
$('.mask-date').mask('99.99.9999');
</script>
1👍1
Маски вставляем до закрывающего тега Body
Привет.. Наконец то кто то дождался.
И вот на часах 3 ночи. Отрендерилось видео и через минуту будет загружено. Урок Пошаговый слайдер, друзья. Приятного просмотра.

Ну от вас царские лайки как всегда. Хотя толку от них. Ну вас все равно, а мне приятно. а еще по количеству лайков я вижу на сколько вам интересно что я делаю для вас.

Так что жми свой королевский. ОГОНЬ🔥

https://youtu.be/1FN0hSc4-BA

#слайдер
Привет.. Интересно как сделать ? .. Основа анимации конечно сама крутящаяся мельница..
Такие штуки могуг захватывать внимание посетителей на сайте.. увидел на одном сайте.. Подумал а почему бы не повторить. )