Анимации для изображений

<!--Анимация с увеличением и сдвигом вверх (content-scale-up)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_up: 0s; /*задержка перед анимацией*/
--TransitionDuration_up: 1.3s; /*продолжительность анимации*/
--ScaleContent_up: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShape_up: #1f28bf; /*цвет подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-up {
overflow: hidden;
}
.content-scale-up .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-up .tn-atom:before {
transition-delay: var(--TransitionDelay_up);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShape_up);
display: block;
transform: translate(0%, 0%);
}
.content-scale-up-animation .tn-atom:before {
transition-delay: var(--TransitionDelay_up);
transform: translate(0%, -100%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_up);
}
.content-scale-up-animation .tn-atom {
transition-delay: var(--TransitionDelay_up);
transition-duration: var(--TransitionDuration_up);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_up));
}
}
</style>
<script>
var content_scale_up = function(elem) {
var content_scale_up_distance = elem.getBoundingClientRect();
return (
content_scale_up_distance.top >= 0 &&
content_scale_up_distance.left >= 0 &&
content_scale_up_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_up_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_up_find = document.querySelectorAll('.content-scale-up');
window.addEventListener('scroll', function(event) {
content_scale_up_find.forEach(element => {
if (content_scale_up(element)) {
element.classList.add("content-scale-up-animation");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом вниз (content-scale-down)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_down: 0s; /*задержка перед анимацией*/
--TransitionDuration_down: 1.3s; /*продолжительность анимации*/
--ScaleContent_down: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShape_down: #1f28bf; /*цвет подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-down {
overflow: hidden;
}
.content-scale-down .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-down .tn-atom:before {
transition-delay: var(--TransitionDelay_down);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShape_down);
display: block;
transform: translate(0%, 0%);
}
.content-scale-down-animation .tn-atom:before {
transition-delay: var(--TransitionDelay_down);
transform: translate(0%, 100%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_down);
}
.content-scale-down-animation .tn-atom {
transition-delay: var(--TransitionDelay_down);
transition-duration: var(--TransitionDuration_down);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_down));
}
}
</style>
<script>
var content_scale_down = function(elem) {
var content_scale_down_distance = elem.getBoundingClientRect();
return (
content_scale_down_distance.top >= 0 &&
content_scale_down_distance.left >= 0 &&
content_scale_down_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_down_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_down_find = document.querySelectorAll('.content-scale-down');
window.addEventListener('scroll', function(event) {
content_scale_down_find.forEach(element => {
if (content_scale_down(element)) {
element.classList.add("content-scale-down-animation");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом вправо (content-scale-right)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_right: 0s; /*задержка перед анимацией*/
--TransitionDuration_right: 1.3s; /*продолжительность анимации*/
--ScaleContent_right: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShape_right: #1f28bf; /*цвет подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-right {
overflow: hidden;
}
.content-scale-right .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-right .tn-atom:before {
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShape_right);
display: block;
transform: translate(0%, 0%);
transition-duration: var(--TransitionDuration_right);
transition-delay: var(--TransitionDelay_right);
}
.content-scale-right-animation .tn-atom:before {
transform: translate(100%, 0%);
transition-duration: var(--TransitionDuration_right);
transition-delay: var(--TransitionDelay_right);
}
.content-scale-right-animation .tn-atom {
transition-delay: var(--TransitionDelay_right);
transition-duration: var(--TransitionDuration_right);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_right));
}
}
</style>
<script>
var content_scale_right = function(elem) {
var content_scale_right_distance = elem.getBoundingClientRect();
return (
content_scale_right_distance.top >= 0 &&
content_scale_right_distance.left >= 0 &&
content_scale_right_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_right_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_right_find = document.querySelectorAll('.content-scale-right');
window.addEventListener('scroll', function(event) {
content_scale_right_find.forEach(element => {
if (content_scale_right(element)) {
element.classList.add("content-scale-right-animation");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом влево (content-scale-left)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_left: 0s; /*задержка перед анимацией*/
--TransitionDuration_left: 1.3s; /*продолжительность анимации*/
--ScaleContent_left: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShape_left: #1f28bf; /*цвет подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-left {
overflow: hidden;
}
.content-scale-left .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-left .tn-atom:before {
transition-delay: var(--TransitionDelay_left);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShape_left);
display: block;
transform: translate(0%, 0%);
}
.content-scale-left-animation .tn-atom:before {
transition-delay: var(--TransitionDelay_left);
transform: translate(-100%, 0%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_left);
}
.content-scale-left-animation .tn-atom {
transition-delay: var(--TransitionDelay_left);
transition-duration: var(--TransitionDuration_left);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_left));
}
}
</style>
<script>
var content_scale_left = function(elem) {
var content_scale_left_distance = elem.getBoundingClientRect();
return (
content_scale_left_distance.top >= 0 &&
content_scale_left_distance.left >= 0 &&
content_scale_left_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_left_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_left_find = document.querySelectorAll('.content-scale-left');
window.addEventListener('scroll', function(event) {
content_scale_left_find.forEach(element => {
if (content_scale_left(element)) {
element.classList.add("content-scale-left-animation");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом вверх (двойной цвет) (content-scale-up-2)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_up_2: 0s; /*задержка перед анимацией*/
--TransitionDuration_up_2: 1.3s; /*продолжительность анимации*/
--ScaleContent_up_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShapeBefore_up_2: #FACE34; /*цвет первой подложки во время анимации*/
--BackgroundColorShapeAfter_up_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-up-2 {
overflow: hidden;
}
.content-scale-up-2 .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-up-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_up_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeBefore_up_2);
display: block;
transform: translate(0%, 0%);
}
.content-scale-up-animation-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_up_2);
transform: translate(0%, -100%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_up_2);
}
.content-scale-up-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_up_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeAfter_up_2);
display: block;
position: absolute;
top: 0;
transform: translate(0%, 0%);
background-size: 100%;
background-position: 65% 0%;
background-image:url();
}
.content-scale-up-animation-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_up_2);
transform: translate(0%, -130%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_up_2);
}
.content-scale-up-animation-2 .tn-atom {
transition-delay: var(--TransitionDelay_up_2);
transition-duration: var(--TransitionDuration_up_2);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_up_2));
}
}
</style>
<script>
var content_scale_up_2 = function(elem) {
var content_scale_up_distance_2 = elem.getBoundingClientRect();
return (
content_scale_up_distance_2.top >= 0 &&
content_scale_up_distance_2.left >= 0 &&
content_scale_up_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_up_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_up_find_2 = document.querySelectorAll('.content-scale-up-2');
window.addEventListener('scroll', function(event) {
content_scale_up_find_2.forEach(element => {
if (content_scale_up_2(element)) {
element.classList.add("content-scale-up-animation-2");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом вниз (двойной цвет) (content-scale-down-2)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_down_2: 0s; /*задержка перед анимацией*/
--TransitionDuration_down_2: 1.3s; /*продолжительность анимации*/
--ScaleContent_down_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShapeBefore_down_2: #FACE34; /*цвет первой подложки во время анимации*/
--BackgroundColorShapeAfter_down_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-down-2 {
overflow: hidden;
}
.content-scale-down-2 .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-down-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_down_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeBefore_down_2);
display: block;
transform: translate(0%, 0%);
}
.content-scale-down-animation-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_down_2);
transform: translate(0%, 100%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_down_2);
}
.content-scale-down-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_down_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeAfter_down_2);
display: block;
position: absolute;
top: 0;
transform: translate(0%, 0%);
background-size: 100%;
background-position: 65% 0%;
background-image:url();
}
.content-scale-down-animation-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_down_2);
transform: translate(0%, 130%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_down_2);
}
.content-scale-down-animation-2 .tn-atom {
transition-delay: var(--TransitionDelay_down_2);
transition-duration: var(--TransitionDuration_down_2);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_down_2));
}
}
</style>
<script>
var content_scale_down_2 = function(elem) {
var content_scale_down_distance_2 = elem.getBoundingClientRect();
return (
content_scale_down_distance_2.top >= 0 &&
content_scale_down_distance_2.left >= 0 &&
content_scale_down_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_down_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_down_find_2 = document.querySelectorAll('.content-scale-down-2');
window.addEventListener('scroll', function(event) {
content_scale_down_find_2.forEach(element => {
if (content_scale_down_2(element)) {
element.classList.add("content-scale-down-animation-2");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом вправо (двойной цвет) (content-scale-right-2)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_right_2: 0s; /*задержка перед анимацией*/
--TransitionDuration_right_2: 1.3s; /*продолжительность анимации*/
--ScaleContent_right_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShapeBefore_right_2: #FACE34; /*цвет первой подложки во время анимации*/
--BackgroundColorShapeAfter_right_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-right-2 {
overflow: hidden;
}
.content-scale-right-2 .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-right-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_right_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeBefore_right_2);
display: block;
transform: translate(0%, 0%);
}
.content-scale-right-animation-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_right_2);
transform: translate(100%, 0%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_right_2);
}
.content-scale-right-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_right_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeAfter_right_2);
display: block;
position: absolute;
top: 0;
transform: translate(0%, 0%);
background-size: 100%;
background-position: 65% 0%;
background-image:url();
}
.content-scale-right-animation-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_right_2);
transform: translate(130%, 0%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_right_2);
}
.content-scale-right-animation-2 .tn-atom {
transition-delay: var(--TransitionDelay_right_2);
transition-duration: var(--TransitionDuration_right_2);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_right_2));
}
}
</style>
<script>
var content_scale_right_2 = function(elem) {
var content_scale_right_distance_2 = elem.getBoundingClientRect();
return (
content_scale_right_distance_2.top >= 0 &&
content_scale_right_distance_2.left >= 0 &&
content_scale_right_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_right_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_right_find_2 = document.querySelectorAll('.content-scale-right-2');
window.addEventListener('scroll', function(event) {
content_scale_right_find_2.forEach(element => {
if (content_scale_right_2(element)) {
element.classList.add("content-scale-right-animation-2");
}
});
}, false);
</script>

<!--Анимация с увеличением и сдвигом влево (двойной цвет) (content-scale-left-2)-->
<style>
/*____________________________________________________*/
:root {
/*Настройки анимации*/
--TransitionDelay_Left_2: 0s; /*задержка перед анимацией*/
--TransitionDuration_Left_2: 1.3s; /*продолжительность анимации*/
--ScaleContent_Left_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
--BackgroundColorShapeBefore_Left_2: #FACE34; /*цвет первой подложки во время анимации*/
--BackgroundColorShapeAfter_Left_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
/*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
@media screen and (min-width: 768px) {
/*____________________________________________________*/
/*Ниже не трогать*/
.content-scale-left-2 {
overflow: hidden;
}
.content-scale-left-2 .tn-atom {
width: 100%;
display: block !important;
transform: translate(-50%, 0px) scale(1.05);
margin-left: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100%;
}
.content-scale-left-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_Left_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeBefore_Left_2);
display: block;
transform: translate(0%, 0%);
}
.content-scale-left-animation-2 .tn-atom:before {
transition-delay: var(--TransitionDelay_Left_2);
transform: translate(-100%, 0%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_Left_2);
}
.content-scale-left-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_Left_2);
content:'';
width: 105%;
height: 105%;
background-color: var(--BackgroundColorShapeAfter_Left_2);
display: block;
position: absolute;
top: 0;
transform: translate(0%, 0%);
background-size: 100%;
background-position: 65% 0%;
background-image:url();
}
.content-scale-left-animation-2 .tn-atom:after {
transition-delay: var(--TransitionDelay_Left_2);
transform: translate(-130%, 0%);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transition-duration: var(--TransitionDuration_Left_2);
}
.content-scale-left-animation-2 .tn-atom {
transition-delay: var(--TransitionDelay_Left_2);
transition-duration: var(--TransitionDuration_Left_2);
animation-timing-function: cubic-bezier(.99,0,.01,1);
transform: translate(-50%, 0px) scale(var(--ScaleContent_Left_2));
}
}
</style>
<script>
var content_scale_left_2 = function(elem) {
var content_scale_left_distance_2 = elem.getBoundingClientRect();
return (
content_scale_left_distance_2.top >= 0 &&
content_scale_left_distance_2.left >= 0 &&
content_scale_left_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
content_scale_left_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var content_scale_left_find_2 = document.querySelectorAll('.content-scale-left-2');
window.addEventListener('scroll', function(event) {
content_scale_left_find_2.forEach(element => {
if (content_scale_left_2(element)) {
element.classList.add("content-scale-left-animation-2");
}
});
}, false);
</script>