Полезный код для Webflow

Кастомный курсор

                <style>
	.custom {
	  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
	  }
    </style>
 
    /* Retina */
    <style>
	.custom {
	cursor: url('img/cursor_left.png'), auto;
	cursor: -webkit-image-set(
	  url('img/cursor_left.png') 1x,
	  url('img/cursor_left_hi.png') 2x
	), auto;}
    </style>
          

Вертикальный текст

                <style>
    .box{writing-mode: vertical-lr;}
    </style>
          

mail.js

<script src="php/mail.js" type="text/javascript"></script>

Плавный горизонтальный скролл на мобильных

                .wrapper {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
      }
          

Скролл к секции

                <script>
    $(".field-label").click(function() {
        $('html, body').animate({
            scrollTop: $("#second-section").offset().top
        }, 500);
    });
    </script>
          

Цели метрики

                <script>
      var Webflow = Webflow || [];
		Webflow.push(function(){
      	$('#button_vk').on('click', function(e) {
          yaCounter45776550.reachGoal('vk'); return true;
        });
      	$('#clbkmain').submit(function(e) {
          yaCounter45776550.reachGoal('callback_main'); return true;
        });
      }); 
    </script>
          

Перенос строки в dropdown

                <style>
    .w-dropdown-toggle {
    white-space:normal !important;}
    </style>
          

Неразрывный дефис, неразрывный пробел, м²

‑  « » м²

Sticky

                <style>
      .sticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        top: 50px;
      }
    </style>
          

Remodal

                <link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal-default-theme.min.css" rel="stylesheet" type="text/css">
    <style>
    .remodal-overlay {
      background: rgba(0, 0, 0, 0.8);
    }
    .remodal {
    	background: rgba(0, 0, 0, 0);
      width:auto;
      padding: 0px;
    }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>
          

Отключение подкрашивания номеров на iOS

<meta name="format-detection" content="telephone=no">

Отключение наведения элемента

                <style>
       .hide {
          pointer-events: none;
       }
    </style>
          

Редирект с задержкой

                <script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
      $('#email-form').submit(function() {
        setTimeout(function() { window.location = "http://usefulness.ru/"; }, 5000);
      });
    });
    </script>
          

Задержка перед переходом по ссылке

                <script>
    $('.testlink').click(function(e) {
      e.preventDefault();
      var linkUrl = $(this).attr('href');
      setTimeout(function(url) { window.location = url; }, 3000, linkUrl);
    });
    </script>
          

Ссылка в Webflow без HTTP для ссылок Viber и Whatsapp

viber://add?number

Отключение отображения скролла

                .left {
        -ms-overflow-style: none;  // IE 10+
        overflow: -moz-scrollbars-none;  // Firefox
    }
 
    .left::-webkit-scrollbar {
        display: none; // Safari and Chrome
    }
          

Масштабирование неадаптивного сайта на мобильных

<meta name="viewport" content="width=1000">

Градиентная заливка текста - Работает не во всех браузерах

                <style>
    h1 {
      color: $333;
      background: linear-gradient(45deg, red, #ffe000);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    </style>
          

Blending modes - Режимы наложения, как в фотошопе

                <style>
    /* Blending modes */
    .mbm-normal{mix-blend-mode: normal;}
    .mbm-multiply{mix-blend-mode: multiply;}
    .mbm-screen{mix-blend-mode: screen;}
    .mbm-overlay{mix-blend-mode: overlay;}
    .mbm-darken{mix-blend-mode: darken;}
    .mbm-lighten{mix-blend-mode: lighten;}
    .mbm-color-dodge{mix-blend-mode: color-dodge}
    .mbm-color-burn{mix-blend-mode: color-burn;}
    .mbm-hard-light{mix-blend-mode: hard-light;}
    .mbm-soft-light{mix-blend-mode: soft-light;}
    .mbm-difference{mix-blend-mode: difference;}
    .mbm-exclusion{mix-blend-mode: exclusion;}
    .mbm-hue{mix-blend-mode: hue;}
    .mbm-saturation{mix-blend-mode: saturation;}
    .mbm-color{mix-blend-mode: color;}
    .mbm-luminosity{mix-blend-mode: luminosity;}
    </style>
          

Смена текста при клике - Код для 19 урока

                <script>
      var Webflow = Webflow || [];
		Webflow.push(function(){
		   $('.button').click(function(e) {
			let t1 = 'Подробнее';
			let t2 = 'Скрыть'
			if ($(this).text() === t1) 
		  $(this).text(t2)
			 else 
				$(this).text(t1);
     });
     });
    </script>
          

Анимация названий полей ввода - Код для 20 урока

                <script>
      $(function(){
 
      $('.input').each(function(){
        changeState($(this));
      });
 
      $('.input').on('focusout', function(){
        changeState($(this)); 
      });
 
      function changeState($formControl){
          if($formControl.val().length > 0){
          $formControl.prev().addClass('labelup');
        }
        else{
          $formControl.prev().removeClass('labelup');
        }
         $('.input').on('focusin', function(){
        	$(this).prev().addClass('labelup');
      });  
      }
    });
    </script>
          

Форма и цвет навигации стандартного слайдера

            <style>
.w-slider-dot.w-active {
		background-color:red !important;
}
 
.w-slider-nav.w-round>div {
    width: 30px;
    height: 2px;
    margin-top: 18px;
    margin-left: 16px;
    background-color: rgba(0, 0, 0, .37);
		border-radius: 0px;
}
</style>
          

Fullpage - Код для Inside <head> tag</head>

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
          

Fullpage - Код для Before tag

                <!-- Обязательная ссылка на плагин -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
 
    <!-- Ссылка на дополнительную функцию для стандартного скролла для больших секций -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script>
 
    <!-- Код для подключения плагина и настроек -->
    <script> $(document).ready(function() { 
    		$('#fullpage').fullpage({
    	    responsiveWidth: 900,
    			verticalCentered: true,
    	    scrollingSpeed: 700,
    	    scrollBar:true,
    	    scrollOverflow: true,
    	    navigation: true,
    			anchors: ['first', 'second', 'third'],
    			menu: '#myMenu',
            }); 
    });</script>
          

Fullpage - Атрибуты и классы

            **fp-auto-height** — класс для блока с небольшой высотой
**data-menuanchor** — атрибут для ссылки в меню
**data-anchor** — атрибут для экрана
          

Fullpage - Цвет навигации

                <style>
    #fp-nav ul li a span, .fp-slidesNav ul li a span{ background: #fff; }
    </style>
          

Fullpage - Примеры использования в Webflow

Диагональный скролл

http://diagonal-snap-scroll.webflow.io/

Проект для клонирования

http://bit.ly/2GHwcXD

Анимация переключения слайдов

http://advanced-slider.webflow.io/

Проект для клонирования

http://bit.ly/2GJSQ1C

Slick слайдер - kenwheeler.github.io/slick/

                <style>
	.custom {
	  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
	  }
    </style>
 
    /* Retina */
    <style>
	.custom {
	cursor: url('img/cursor_left.png'), auto;
	cursor: -webkit-image-set(
	  url('img/cursor_left.png') 1x,
	  url('img/cursor_left_hi.png') 2x
	), auto;}
    </style>
          

Slick слайдер - Inside <head> tag</head>

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
          

Slick слайдер - Before tag

            <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
          

Slick слайдер - Код слайдера на странице

                <script>
    $('.slider').slick({
      });
    </script>
          

Slick слайдер - Стиль слайдера

                <style>
    .slidernav .slick-center {
    opacity:0.5;} /* Затемнение активного слайда */ 
 
    .slick-slide {
    outline: none !important; /* Убирает синюю обводку */
    transition: all 500ms ease; /* Добавляет анимацию */
    }
    </style>
          

Slick слайдер - Счётчик слайдов

                <script>
        $('.slider').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
            var i = (currentSlide ? currentSlide : 0) + 1;
            $('.count').text(i + '/' + slick.slideCount);
        });
    </script>
          

Slick слайдер - Дополнительные настройки слайдеров

                <script>
    $('.slider').slick({
		asNavFor: '.slidernav',
		nextArrow: $('.next'),
		prevArrow: $('.prev'),
      });
      $('.slidernav').slick({
      asNavFor: '.slider',
      arrows:false,
      slidesToShow: 3,
      slidesToScroll: 1,
      centerMode: true,
      focusOnSelect: true,
      });
    </script>
          

Slick слайдер - Клик по элементу открывает следующий слайд

                <script>
    $('.nextbut').click(function() {
        $('.slider').slick('slickNext');
      });
    </script>
          

Шрифт для всего сайта

Если задать шрифт для Body, то он будет автоматически присваиваться ко всем текстовым блокам. Такой приём нужен, чтобы не задавать шрифт для каждого текстового элемента.

Математические операции в полях

Простые математические операции можно делать прямо в полях Webflow. Например: вам нужно, чтобы блок занимал ровно треть ширины родительского блока. Для этого можно написать в поле ширины 100/3% результатом будет 3.333%, что и составляет треть. Можно считать и более сложные задачи, например: нужно чтобы блок занимал 2/3 ширины. Для этого вписываем 100/3*2=66.666%

Responsive Div

Можно создавать дивы с фиксированными пропорциями с помощью внутренних отступов в процентах. Полезно, когда приходится использовать картинку с помощью Background image, но хочется чтобы элемент пропорционально уменьшался при сужении окна браузера.

Триггер для анимации при старте скролла

Нужно добавить Div с нулевой высотой в самый верх страницы, чтобы он служил триггером для анимации.

Адаптивный размер шрифта

Чтобы шрифт уменьшался или увеличивался относительно ширины экрана, ему нужно задать размер в единицах VW (VH относительно высоты экрана). При использовании VW (VH) для шрифта, удобно ставить интерлиньяж (межстрочное расстояние) в единицах EM. Тогда интерлиньяж будет подстраиваться под размер шрифта.Классические значения интерлиньяжа
1.2 EM для заголовков
1.6 EM для текста

Полезные плагины

Изменение цвета элемента, в зависимости от фона
http://www.kennethcachia.com/background-check/
Бесплатный слайдер с гибкими настройками
http://kenwheeler.github.io/slick/
Плагин для создания фильтров и сортировок
https://isotope.metafizzy.co/
Платный слайдер с очень тонкой настройкой
https://flickity.metafizzy.co/
Плагин для модальных окон
http://vodkabears.github.io/remodal/
Полноэкранная прокрутка сайта
https://alvarotrigo.com/fullPage/ru/
Слайдер
https://owlcarousel2.github.io/OwlCarousel2/index.html

Flex на примере реальных сайтов - для урока 03

Ссылка на проект для клонирования

https://webflow.com/website/Flex-lesson

Пример правильно выполненного задания

http://flex-e7df2f.webflow.io/

Интенсивный курс по Webflow

Университет Webflow

Custom code