Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
$e — jQuery элемент (объект) внутрь которого будет добавляться текст с числом.
from — начальное число (с которого начать отсчет)
to — конечное число (на котором остановить счетчик)
duration — время в миллисекундах, за которое нужно дойти до конечного числа (если не указано — смена числа будет происходить каждый 50 миллисекунд)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function animateCount($e, from, to, duration) { if (from === to) return; if ($e.hasClass('_counted')) return; let current = from, interval = duration ? Math.abs(Math.floor(duration / (to - from))) : 50, timer; $e.addClass('_counted'); timer = setInterval(function() { current += (to > from ? 1 : -1); $e.text(current); if (current == to) { clearInterval(timer); } }, interval); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
jQuery(document).ready(function($) { $W = $(window); // Меню (слежка) (function(){ var $trigs = $B.find('.nav a[href^="#"]'); if (!$trigs.length) return; var doing = false; $W.on('scroll', function() { if (doing) return; doing = true; var st = $W.scrollTop(); $trigs.each(function(i, e) { var $e = $(e), $a = $B.find('a[name="' + $e.attr('href').replace('#', '') + '"]'); if (!$a.length) return; if (st + window.innerHeight / 2 >= $a.offset().top) { if (!$e.hasClass('current')) { $trigs.removeClass('current'); $e.addClass('current'); } } }); doing = false; }); })(); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="tabs"> <div class="tabs_trigs"> <button class="tabs_trig active" type="button"></button> <button class="tabs_trig" type="button"></button> <button class="tabs_trig" type="button"></button> </div> <div class="tabs_targs"> <div class="tabs_targ active"></div> <div class="tabs_targ"></div> <div class="tabs_targ"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.tabs {} .tabs_trigs {} .tabs_trig {} .tabs_trig.active {} .tabs_targs {} .tabs_targ { display: none; } .tabs_targ.active { display: block; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
jQuery(document).ready(function($) { // Табы (function(){ // let $B = $('body'); let $tabs = $B.find('.tabs'), $trigs = $tabs.find('.tabs_trig'), $targs = $tabs.find('.tabs_targ'); if (!$trigs.length || !$targs.length) return; $trigs.on('click', function() { let $trig = $(this), $targ = $targs.eq($trig.index()); if (!$targ.length) return; $tabs.find('.active').removeClass('active'); $trig.add($targ).addClass('active'); return false; }); })(); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
jQuery(document).ready(function($) { // Скрол к якорям (function(){ var $links = $('a[href^="#"]'); if (!$links.length) return; var head_h = $('.head').height(); $links.on('click', function() { var $target = $('a[name="' + $(this).attr('href').replace('#', '') + '"]'); if ($target.length) { $('html, body').animate({ scrollTop: $target.offset().top - head_h }, 500); return false; } }); })(); }); |
Определяет, находится ли указанный элемент на экране (в зоне видимости).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function isInView($e, everytime) { let screen_top = $(window).scrollTop(), screen_bot = screen_top + $(window).height(), elem_top = $e.offset().top, elem_bot = elem_top + $e.height(), in_view = ((elem_bot <= screen_bot) && (elem_top >= screen_top)); if (in_view) { if (everytime) { return true; } else if ($e.hasClass('in_view')) { return false; } else { $e.addClass('in_view'); return true; } } } |
Вычисляет ширину полосы прокрутки, при её наличии у запрашиваемого элемента.
|
1 2 3 4 5 |
jQuery(document).ready(function($) { var scroll_bar_width = window.innerWidth - document.querySelector('body').offsetWidth + 'px'; }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
jQuery(document).ready(function($) { // Меню (подпункты) (function(){ var $cover = $('.menu'), $trigs = $cover.find('.menu_item'), $targs = $cover.find('.menu_item_popup'); if (!$trigs.length || !$targs.length) return; $trigs.on('click', function() { var $trig = $(this), $targ = $trig.siblings(); // Закрыть остальное if (!$trig.hasClass('active')) { $trigs.removeClass('active'); $targs.slideUp(); } // Открыть/Закрыть нужное $trig.toggleClass('active'); $targ.slideToggle(); }); })(); }); |
|
1 2 3 |
[outview] { opacity: 0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
jQuery(document).ready(function($) { // Эффект появления (function(){ var $win = $(window), $items = $('[outview]'), items = {}; if (!$items.length) return; $items.each(function() { var $item = $(this), item_v = $item.attr('outview') || '0,0', item_t = $item.offset().top, item_a = parseInt(item_t + 100); $item.css({ transition: 'all 400ms linear', opacity: 0, transform: 'translate(' + item_v + ')', }); if (!items[item_a]) { items[item_a] = []; } items[item_a].push($item); }); var fx = function($win) { var win_h = window.innerHeight, win_t = $win.scrollTop(), win_b = win_t + win_h; $.each(items, function(item_a, arr) { $.each(arr, function(i, $item) { if (win_b > item_a) { setTimeout(function() { $item.css({ opacity: 1, transform: 'translate(0,0)', }); }, i * 100); } }); }); }; setTimeout(function() { fx($win); }, 400); $win.scroll(function(){ fx($win); }); })(); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="player"> <div class="player_frame"> <video playsinline webkit-playsinline> <source src="/_/media/demo.mp4#t=0.2" type="video/mp4"> </video> </div> <div class="player_pause"> <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z" fill="white"/> <path d="M37 25L20 35V15L37 25Z" fill="black"/> </svg> </div> <div class="player_scale_duration"> <div class="player_scale_current"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.player { position: relative; overflow: hidden; } .player_frame { min-height: 100%; position: relative; padding-bottom: 56.25%; overflow: hidden; } .player_frame video { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); } .player_scale_duration { position: absolute; bottom: 0; left: 0; width: 100%; height: 12px; background: #cfcfcf; } .player_ctrl + .player_scale_duration { bottom: 60px; height: 8px; } .player_scale_current { width: 0; height: 100%; background: #73ab19; transition: all 200ms linear; border-radius: 0 6px 6px 0; } .player_scale_current.end { border-radius: 0; } .player_ctrl { display: flex; align-items: center; height: 60px; padding: 0 10px; color: #fff; background: #58575c; } .player_ctrl svg { height: 24px; } .player_pause { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); transition: all 300ms linear; } .playing .player_pause { opacity: 0; } .player_pause, .player_volume { cursor: pointer; margin: 0 20px; } .player_date { margin: 0 10px 0 auto; font-size: 16px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
jQuery(document).ready(function($) { // Видео (function(){ var $players = $('.player'); if (!$players.length) return; $players.each(function () { var $player = $(this), $video = $player.find('video'); // Пауза при клике на видео $video.on('click', function() { if ($video.hasClass('playing')) { $video[0].pause(); $video.removeClass('playing'); } else { $video[0].play(); $video.addClass('playing'); } }); // Пауза при клике на описание (function(){ var $cap = $('.promo_caption'); if (!$cap.length) return; $cap.on('click', function() { $video.trigger('click'); }); })(); // Пауза при клике на кнопку (function(){ var $pause = $player.find('.player_pause'); if (!$pause.length) return; $pause.on('click', function() { $video.trigger('click'); }); })(); // Шкала прогресса (function(){ var $current = $player.find('.player_scale_current'), _duration = 0 // Определить Продолжительность $video.on('canplay', function(event) { _duration = $video[0].duration; }); // Прогресс воспроизведения $video.on('timeupdate', function(event) { var curr = $video[0].currentTime / (_duration / 100); $current.css('width', curr + '%'); if (curr == _duration) { $current.addClass('end'); } else { $current.removeClass('end'); } }); })(); // Звук (function(){ var $volume = $('.player_volume'); if (!$volume.length) return; $volume.on('click', function() { $video[0].muted = $video[0].muted ? false : true; $volume.find('.sound_st3').toggle(); }); })(); // if ($video.is('[autoplay]')) { $video[0].play(); } }); })(); }); |
Данный параллакс применим к любому html тегу. Для этого достаточно подключить скрипт и нужным элементам указать атрибуты: px-top (или px-bottom) и/или px-left (или px-right).
Можно изменить скорость движения блоков, указав атрибутам значения больше нуля и меньше единицы (По умолчанию: 0.1).
|
1 2 |
<img src="" alt="" px-bottom> <img src="" alt="" px-top=".2" px-left=".3"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
jQuery(document).ready(function($) { // Паралакс блоков (function(){ var $W = $(window); // Отключить для мобильных if ($W.innerWidth() < 768) return; // Пересчитывает позицию элементв function transform_translate($item) { var is_t = $item.is('[px-top]'), is_b = $item.is('[px-bottom]'), is_y = is_t || is_b, is_l = $item.is('[px-left]'), is_r = $item.is('[px-right]'), is_x = is_l || is_r, half_y = Math.round($W.scrollTop() + ($W.innerHeight() / 2)), shift_x = 0, shift_y = 0; // Рассчитать движение по вертикали if (is_y) { var item_top = Math.round($item.offset().top) - shift_y, item_height = Math.round($item.height()), item_half_y = (item_height > 0) ? item_height / 2 : 0, direction_y = is_t ? 'top' : 'bottom', speed_y = $item.attr('px-' + direction_y) || .1; // Движение вверх shift_y = Math.round((item_top - half_y + item_half_y) * parseFloat(speed_y)); // Движение вниз if (is_b) { shift_y *= -1; } } // Рассчитать движение по горизонтали if (is_x) { var item_top = Math.round($item.offset().top) - shift_x, item_width = Math.round($item.width()), direction_x = is_l ? 'left' : 'right', speed_x = $item.attr('px-' + direction_x) || .1; // Движение влево shift_x = Math.round((item_top - half_y) * parseFloat(speed_x)); // Движение вправо if (is_r) { shift_x *= -1; } } // Сдвинуть элемент $item.css('transform', 'translate('+shift_x+'px, '+shift_y+'px)'); } // Найти и перебрать элементы с нужными атрибутами $('[px-top], [px-bottom], [px-left], [px-right]').each(function (i, e) { var $item = $(this); // Сразу выставить элементы на сови места transform_translate($item); // При прокрутке $W.on('scroll', function() { // Пересчитывать позиции элементов transform_translate($item); }); }); })(); }); |
px-bottom
px-top
px-left
px-right
px-top px-left
px-top px-right
px-bottom px-left
px-bottom px-right