Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
|
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; } } } |
100 – Thin || Hairline
200 – Extra Light || Ultra Light || Thin
300 – Light
400 – Normal || Regular
500 – Medium
600 – Semi Bold || Demi Bold
700 – Bold
800 – Extra Bold || Ultra Bold || Heavy
900 – Black || Heavy
Вычисляет ширину полосы прокрутки, при её наличии у запрашиваемого элемента.
|
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 4 5 6 7 |
[arise] { transition: all 800ms cubic-bezier(0.645, 0.045, 0.645, 1); opacity: 0; } [arise="in"] { opacity: 1; } |
|
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 |
jQuery(document).ready(function($) { $B = $('body'); $W = $(window); // Эффект появления (function(){ var items = {}; var init = function($parent) { let $cover = $parent || $B, $items = $cover.find('[arise]'); if (!$items.length) return; items = {}; $items.each(function() { let $item = $(this), item_t = $item.offset().top, item_a = parseInt(item_t + 100); $item.attr('arise', 'out'); if (!items[item_a]) { items[item_a] = []; } items[item_a].push($item); }); // Задержать появление элементов на первом экране setTimeout(function() { fx(); }, 400); }; var fx = function() { let is_fb = $B.find('.fancybox-is-open').length, $prnt = is_fb ? $B.find('.fancybox-is-open .fancybox-content') : $W, win_h = $prnt.innerHeight(), win_t = $prnt.scrollTop(), win_b = win_t + win_h; $.each(items, function(item_a, arr) { $.each(arr, function(i, $item) { if (win_b > item_a && (!$item.closest('.modal').length || $item.closest('.fancybox-is-open').length)) { setTimeout(function() { $item.attr('arise', 'in'); }, i * 100); } }); }); }; init(); $W.scroll(function(){ fx(); }); $W.on('reinit-arise', function(e, $parent) { init($parent); let $fb = $B.find('.fancybox-content'); if ($fb.length) { $fb.on('scroll', function() { fx(); }); } }); })(); }); |
|
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(); } }); })(); }); |