fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animated brands section

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-03 22:33:27 +03:00
parent 427f2f6f53
commit e0113c1b61
5 changed files with 152 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/css/views/index.scss
View File

@@ -3,7 +3,7 @@
$table-item_img_width: 100px;
$table-item_margin_between_items: 10px;
$table-item_margin_img_to_paragraph: 10px;
$table-item_margin_img_to_paragraph: 100px;
.showcase {
display: flex;
@@ -32,10 +32,11 @@ $table-item_margin_img_to_paragraph: 10px;
margin-top: $table-item_margin_between_items;
display: inline-flex;
flex-direction: row;
align-items: center;
img {
margin-right: $table-item_margin_img_to_paragraph;
height: $table-item_img_width;
height: auto;
width: $table-item_img_width;
}
}
@@ -63,4 +64,72 @@ $table-item_margin_img_to_paragraph: 10px;
border: solid 1px variables.$clr_brand;
margin-right: $table-item_margin_img_to_paragraph;
}
.square {
img {
height: $table-item_img_width;
}
}
.table-item-animation {
animation: slide-in-left 3000ms;
}
.table-item-animation-reverse {
animation: slide-in-right 3000ms;
}
@keyframes fade-in {
from {
margin-left: 10%;
width: 105%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
@keyframes fade-in-reverse {
from {
margin-right: 10%;
width: 105%;
opacity: 0;
}
to {
margin-right: 0;
width: 100%;
opacity: 1;
}
}
@keyframes slide-in-left {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes slide-in-right {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
}

BIN
resources/img/UKT/UKT.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

15
resources/scripts/index.js Normal file
View File

@@ -0,0 +1,15 @@
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.target.classList.contains('reverse'))
entry.target.classList.add('table-item-animation-reverse');
else
entry.target.classList.add('table-item-animation');
}
});
});
let targets = document.querySelectorAll('.table-item');
targets.forEach(target => {
observer.observe(target);
})

66
resources/styles/main.css
View File

@@ -26,10 +26,11 @@
margin-top: 10px;
display: inline-flex;
flex-direction: row;
align-items: center;
}
.table .table-item img {
margin-right: 10px;
height: 100px;
margin-right: 100px;
height: auto;
width: 100px;
}
.table .reverse {
@@ -37,19 +38,74 @@
}
.table .reverse img {
margin-right: 0;
margin-left: 10px;
margin-left: 100px;
}
.table .reverse p {
text-align: right;
}
.table .reverse .vertical-separator {
margin-right: 0;
margin-left: 10px;
margin-left: 100px;
}
.table .vertical-separator {
height: 120px;
border: solid 1px #1d60b5;
margin-right: 10px;
margin-right: 100px;
}
.table .square img {
height: 100px;
}
.table .table-item-animation {
animation: slide-in-left 3000ms;
}
.table .table-item-animation-reverse {
animation: slide-in-right 3000ms;
}
@keyframes fade-in {
from {
margin-left: 10%;
width: 105%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
@keyframes fade-in-reverse {
from {
margin-right: 10%;
width: 105%;
opacity: 0;
}
to {
margin-right: 0;
width: 100%;
opacity: 1;
}
}
@keyframes slide-in-left {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes slide-in-right {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0;
width: 100%;
opacity: 1;
}
}
#header {