Skip to content

Instantly share code, notes, and snippets.

@OlegBudkev
OlegBudkev / jqueryPluginTemplate.js
Last active April 1, 2018 16:29
JQ - jqueryPluginTemplate.js - Шаблон плагина jQuery
//Name jQuery Plugin
//Example:
(function($) {
$.fn.namePlagin = function() {
var settings = {
};
settings = $.extend(settings, options);
@OlegBudkev
OlegBudkev / form.pug
Created April 1, 2018 16:24
form.pug - Форма, пример формы
form(action="mail.php").form
//- Start: Hidden inputs
input(type="hidden" name="project_name" value="Название сайта")
//- input(type="hidden" name="admin_email" value="Почта администратора")
input(type="hidden" name="admin_email" value="OlegBudkeev-Test@yandex.ru")
input(type="hidden" name="form_subject" value="Тема письма. Например: Заявка с сайта olegbudkeev.ru")
//- End: Hidden inputs
.form__input-box
input(type="text" name="Имя" placeholder="Имя" #username required).form__input
.form__input-box
@OlegBudkev
OlegBudkev / mail.js
Created April 1, 2018 16:23
mail.js - Скрипт для отправки формы
$(document).ready(function() {
//E-mail Ajax Send
$(".form").submit(function() { //Change
var $th = $(this);
$.ajax({
type: "POST",
url: "../mail.php", //Change
data: $th.serialize()
})
@OlegBudkev
OlegBudkev / form__success-error.sass
Last active April 1, 2018 16:22
form__success-error.sass - Стили сообщения об успешной (или с ошибкой) отправки формы
.form__success, .form__error
display: none
text-align: center
margin-top: 20px
padding: 20px
background-color: #C5FFB9
color: #1A3814
.form__error
background-color: #FFB9B9
color: #381414
@OlegBudkev
OlegBudkev / menuItemHighliter.js
Created March 20, 2018 17:21
JQ-s - menuItemHighliter.js - Подсветка актитвного пунтка меню
// Подсветка активной пункта меню
var menuSelector = ".nav"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню.
var offset = headerHeight; // offser для случаев когда есть фиксированное меню
function onScroll(offset){
var offset = offset || 0;
var scrollTop = $(document).scrollTop();
$(menuSelector + " a").each(function(){
var hash = $(this).attr("href");
var target = $(hash);
@OlegBudkev
OlegBudkev / addSpace.js
Last active March 16, 2018 15:48
JS-s - addSpace.js - Добавление пробелов между разрядностями числа, добавление пробелов для цены
function addSpace(var){
return String(var).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')
}
@OlegBudkev
OlegBudkev / import-stiles-for-animate.css.sass
Last active March 16, 2018 15:52
import-stiles-for-animate.css.sass - Подключение стилей для плагина animate.scss. Стили для плагина animate.scss
// Подключение всех стилей анимации animate.css при использовании плагина scss-animate https://www.npmjs.com/package/scss-animate
// Пример настроек: bounce($count: infinite, $duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden)
// $count — Определяет количество повторений анимации. Чтобы анимация повторялась бесконечно, введите значение 'infinite'. По умолчанию: 1
// $duration — продолжительность анимации в секундах или миллисекундах (мс) По умолчанию: 0
// $delay — Устанавливает время начала анимации. По умолчанию: 0
// $function — вид анимации во времени. По умолчанию: ease
// $fill — Указывает, как анимация CSS должна применять стили к месту назначения до и после ее запуска. По умолчанию: both
// $visibility — Определяет, следует ли отображать обратную сторону элемента для пользователя. По умолчанию: hidden
// INDEX OF ATTENTION SEEKERS
@OlegBudkev
OlegBudkev / _flipInY-line.scss
Last active March 16, 2018 15:54
_flipInY-line.scss - Моя анимация для плагина animate.scss
//Плагин scss-animate https://www.npmjs.com/package/scss-animate
@include keyframes(flipInY-line) {
0% {
opacity: 0;
@include transform(perspective(400px) rotateY(90deg));
}
100% {
opacity: 1;
@include transform(perspective(400px) rotateY(0deg));
}
@OlegBudkev
OlegBudkev / animate.css-series.js
Last active March 24, 2018 13:29
JQ-p - animate.css-series.js - animate.css + waipoints, последовательная анимация для группы элементов
//Animate CSS + WayPoints javaScript Plugin
//Example: $(".element").animated("zoomInUp");
//Example: $(".element").animated("zoomInUp", '70%', 'series', '300', '.elem2');
//offset, series, interval и triger можно не указывать
//Значения по умолчанию: offset = 85, interval = 200, triger = перебираемые-элементы
//series — включает последовательную анимацию для группы элементов
(function($) {
$.fn.animated = function(inEffect, offset, series, interval, triger) {
var interval = interval || '200';
var offset = offset || '85%';
@OlegBudkev
OlegBudkev / animate.css.js
Created March 5, 2018 09:15
animate.css.js - плагин jQuery для animate.css + waipoints
//Animate CSS + WayPoints javaScript Plugin
//Example: $(".element").animated("zoomInUp");
//Author URL: http://webdesign-master.ru
(function($) {
$.fn.animated = function(inEffect, offset) {
$(this).each(function() {
var ths = $(this);
ths.css("opacity", "0").addClass("animated").waypoint(function(dir) {
if (dir === "down") {
ths.addClass(inEffect).css("opacity", "1");