From 2449e6a8e3fe43e19d312b4968c3561ab083a3a2 Mon Sep 17 00:00:00 2001 From: denis Date: Wed, 20 May 2026 14:31:36 +0000 Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=20js/animaciya.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/animaciya.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/js/animaciya.js b/js/animaciya.js index e69de29..34663fd 100644 --- a/js/animaciya.js +++ b/js/animaciya.js @@ -0,0 +1,45 @@ +(function($) { + function animatedBlocks () { + $('.need-animate').each(function () { + var scrollPosTop = $(window).scrollTop(), // позиция скролла, верх страницы + blockPosTop = $(this).offset().top, // позиция блока (верх), который нужно анимировать + blockPosBottom = blockPosTop+$(this).height(), // позиция блока (низ), который нужно анимировать + windowHeight = $(window).height(), // высота окна браузера + windowLineTop = scrollPosTop+(windowHeight*(1/8)), // верхняя граница окна браузера при пересечении которой анимируется блок + windowsLineBottom = scrollPosTop+(windowHeight*(7/8)); // нижяя граница окна браузера при пересечении которой анимируется блок + + if ( + (windowLineTop <= blockPosBottom && windowLineTop > blockPosTop) // если верхняя часть экрана выше нижней границы блока, но не прошла блок полностью + || (windowsLineBottom >= blockPosTop && windowsLineBottom < blockPosBottom) // если нижняя часть экрана дошла до верхней границы блока, но не прошла блок полностью + || ((blockPosTop > windowLineTop && blockPosTop < windowsLineBottom) || (blockPosBottom > windowLineTop && blockPosBottom < windowsLineBottom)) // или блок по центру экрана + ) { + $(this).removeClass('need-animate').addClass('animated'); + } + }); + } + $(document).ready(function () { + setTimeout(function () { + animatedBlocks(); + }, 1000); + }); + $(window).scroll(function () { + animatedBlocks(); + }); +})(jQuery); + + + + +/** + * CSS + * .animated{ + opacity: 1 !important; + transition: opacity 1s; + transition-delay: 0.25s; +} +.need-animate{ + opacity: 0 !important; +} + * + * + */ \ No newline at end of file