Блог веб разработчика

16.02.2018

Как подключить wow к сайту

Для создания красивых эффектов при загрузке сайта и переходе между секциями используют скрипт WOW.js в связке со стилями animate.css. В <head> необходимо подключить стили:

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

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

Перед закрывающимся тегом <body> необходимо вставить

<script src="js/wow.min.js"></script>

1	<script src="js/wow.min.js"></script>

Для работы WOW необходимо, чтобы был подключен jQuery. Теперь к анимируемым элементам необходимо добавить классы wow и класс эффекта анимации. Но просто добавить их недостаточно, необходимо в скриптах запустить инициализацию

new WOW().init();

1	new WOW().init();

Теперь все должно работать.

10.02.201818.02.2020

Админ панель на лендинг

Необходимо, чтобы заказчик сам менял данные на лендинге. Подходящих скриптов найти не удалось. Нашел только сервис edit-content.com/sites. Это именно сервис, а не скрипт. В настройках сервиса настраивается доступ к сайту по фтп и можно производить редактирование заранее размеченных (с помощью класса editable) областей. Данный сервис бесплатный, так я прочитал в одной статье. Но спустя две недели использования пришло письмо, ваш тестовый период заканчивается, платите деньги. Для одного сайта -10$ в месяц. За бугром это может и копейки, по у нас — это деньги.

Стал искать дальше и нашел. На хостинге hostland.ru есть очень удобный файловый менеджер, а в нем — WYSIWYG редакторы. Не могу сказать, чтобы они работали идеально, но для моих задач вполне подошел CKEditor. Он позволяет менять тексты, ссылки, картинки, таблицы — именно то, что и было нужно.

Есть очень простое решение, называется textolite. Оно скачивается с сайта разработчика и папки копируются в директорию сайта. textolite создает что-то наподобие примитивной системы управления сайтом. В бесплатной версии можно менять текстовое содержимое сайта, чего зачастую бывает достаточно.

09.02.2018

Добавить шрифты в css

Обычно шрифты подключаются из fonts.google.com. Однако, часто в PSD макетах для верстки используются шрифты, отсутствующие там. В таком случае приходится искать шрифты в других местах и скачивать архив с ними. Для подключения новых шрифтов в файле стилей необходимо прописать следующее:

@font-face {
  font-family: 'AvenirNextCyr-Bold';
  src: url('../fonts/AvenirNextCyr-Bold.eot');
  src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {

font-family: 'AvenirNextCyr-Bold';

src: url('../fonts/AvenirNextCyr-Bold.eot');

src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

09.02.201809.02.2018

Увеличить изображение при наведении

Необходимо, чтобы при наведении мыши на картинку, она увеличивалась. Сделать это можно с помощью следующего css кода:

img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform:scale(1.1) ;
  -o-transform: scale(1.1);
  transform:scale(1.1) ;
}

img:hover{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform:scale(1.1) ;

-o-transform: scale(1.1);

transform:scale(1.1) ;

}

07.02.201807.02.2018

Где брать шаблоны оформления элементов сайта

Очень часто заказчик хочет чтобы его сайт выглядел красиво и эффектно и при этом сам не знает как. В таком случае можно посмотреть примеры оформления на следующем сайте: atuin.ru/blog/

Там можно найти красивое и нестандартное оформление:

Списков
Таблиц
Иконок
Видео
И многое другое

Скопировать код в верстку очень просто, html код добавляется на страницу, а css свойства дописываются в файл стилей.