Для получения полного доступа
зарегистрируйтесь.

Bran    29   12 263

Открыт к предложениям по работе

Люблю писать код!

  • JS, CSS
  • Зарегистрирован 4 года назад
Профиль завершён на 55 %
55 %

Добавляем файла с анимациями (Animate.css):

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Добавим эффект, например, fadeIn:

Результат c414f1672d3e498772c125ad099d7a52.gif

Или, bounceInLeft:

Результат f8cbe60c8260d7109cfc1f42744e961f.gif

На gif, анимация тормозит, но в действительности этого нет.

Для зацикливания анимации, добавьте класс infinite

<!-- fadeIn -->
<h1 class="animated fadeIn">Mega Corporation </h1>

<!-- bounceInLeft -->
<h1 class="animated bounceInLeft">Mega Corporation </h1>

Задача

Иногда, нам нужно пояснить пользователю как всё устроено на нашем сайте (например, сложные формы, CRM, редакторы).

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

l41lHYxV4FjGmaoeI.gif

Лично от меня, не стоит это добавлять на любые задачи. Туры вообще, вещь раздражающая когда я понимаю без что могу справиться с задачей, без стороней помощь.

Решение

На деле всё очень просто. Скачиваем, Bootstrap Tour, подключаем скрипты:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-tour.min.css" rel="stylesheet">

<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-tour.min.js"></script>

Теперь добавим шаги в наш скрипт:

var tour = new Tour({
    steps: [
        {
            element: "#element-1",
            title: "Шаг 1",
            content: "Текст для первого шага"
        },
        {
            element: "#element-2",
            title: "Шаг 2",
            content: "Текст для второго шага"
        }
    ]});

tour.init();
tour.start();

Простой способ показать на временной шкале времени необходимые вам данные. Например, сайт портфолио, вам нужно отобразить на временной шкале сколько времени вы проработали с определёнными языками: c1VkxGh.png Для этого нам понадобится Timesheet.js

Подключаем скрипты и стили:

<link href="timesheet.min.css" media="all" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="timesheet.min.js"></script>

Теперь добавим свои стили, например, чтобы при большом кол-ве данных отображался скролл:

body, .timesheet .data, .timesheet .scale section {
    font-family: Arial, sans-serif;
}
.timesheet {
    width: 100%;
}
.timesheet .data {
    overflow: scroll;
}
.timesheet .data li .bubble{
    opacity: 1;
}
/* Цвета */
.timesheet .bubble-js {
    background: #F0DB4F;
}
.timesheet .bubble-php {
    background: #5F82BA;
}
.timesheet .bubble-sql {
    background: #00618A;
}

Добавим элемент, в который будет выведена шкала времени

<div id="timesheet"></div>

Вызов библиотеки:

$('document').ready(function(){
    new Timesheet('timesheet', 2010, 2015, [
        ['2012', '2015', 'JS', 'js'],
        ['2012', '2015', 'PHP', 'php'],
        ['09/2010', '09/2015', 'SQL', 'sql']
    ]);
});

В предыдущем моём сниппете, я рассказывал про Font Awesome - иконочный шрифт.

Сейчас я покажу, как можно подключить нужный шрифт на вашем сайте. Делается очень просто, копируете шрифты (конвертируем нужный тут), и подключаем в css-файле:

@font-face {
    /* Указываем название шрифта, которое будет использоваться в css */
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNovaRegular.eot');
    src: url('../fonts/ProximaNovaRegular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ProximaNovaRegular.woff') format('woff'),
    url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
    url('../fonts/ProximaNovaRegular.svg#webfont') format('svg');
}

h1 {
    font-family: 'Proxima Nova', sans-serif;
}

Разработчики не тратят время на поиск качественных иконок для UI - и это логично, мы тратим время на другие важные вещи — код.

Но мы делаем проекты для наших пользователей, и будет правильно потратить немного времени на причёсывание UI. В данном случае мы говорим про иконки, самый простой способ решить проблему — начать использовать Font Awesome.

  1. Копируем папки css, fonts к себе в проект
  2. Подключаем font-awesome.min.css

На сайте FA, есть каталог, берём название нужной нам иконки (для меню bars), и делаем так:

<span class="fa fa-bars"></span>

Вот так это можно сделать в самом простом варианте:

$.post("/send");
$.get("/view/1");

И следующий вариант, поможем вам понять - успешно отработал запрос или нет:

$.post(url, data, function() {
    // Запрос отработал успешно
}).fail(function() {
    // Возникла ошибка 
});

$.get(url, data, function() {
    // Запрос отработал успешно
}).fail(function() {
    // Возникла ошибка 
});

Таким образом, мы можем добавлять разделители в выподающие списки:

Dropdown::widget([
    'items' => [
        ['label' => Yii::t('site', 'Profile'), 'url' => ['user/view', 'id' => $id]],
        '<li class="divider"></li>',
        ['label' => Yii::t('site', 'Settings'), 'url' => ['user/settings']],
        '<li class="divider"></li>'
    ],
]);