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(); }); } }); })(); }); |