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