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

Apply new slideshow mechanism

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-28 13:40:30 +03:00
parent 44c840a1c6
commit 343db77006
2 changed files with 64 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -49,9 +49,14 @@
</nav>
<div id="container">
<main id="content">
<div class="showcase content-spacing">
<h1 style="color: white; font: 500 45px Montserrat, sans-serif;">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz! </h1>
</div>
<h1 class="welcome">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz!</h1>
<ul class="slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<!-- TODO <section class="araclar">
<a href="https://ugurgaleri1.sahibinden.com/">Araçlarımızı incelemek için tıklayınız.</a>
</section>-->

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

@@ -1,6 +1,7 @@
@use "../variables.scss";
@use "../mixins.scss";
@use "../urls.scss";
@use "../keyframes";
@use "sass:math";
$table-item_img_width_l: 150px;
@@ -11,30 +12,71 @@ $table-item_margin_between_items: 10px;
$social-button_img_width: 32px;
$social-button_inner_margin: 10px;
.showcase {
display: flex;
height: 90vh;
background-image: urls.$index_showcase_bg_day;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
.welcome {
position: absolute;
color: white;
font: 500 50px Montserrat, sans-serif;
z-index: 5;
bottom: 200px;
left: 200px;
text-shadow: 2px 2px 15px black;
@include mixins.header_overflow2 {
height: 95vh;
bottom: 300px;
left: 50px;
}
@include mixins.mx_mobile {
font-size: 32px;
}
}
.showcase-animation {
animation: slideshow-appear 1000ms;
.slideshow {
list-style-type: none;
@include mixins.header_overflow2 {
height: calc(100vh - 45px);
}
}
@keyframes slideshow-appear {
from {
.slideshow {
margin: 0;
padding: 0;
height: 80vh;
z-index: 0;
li span {
position: absolute;
width: 100%;
height: 80vh;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: slideshow 30s linear infinite 0s;
}
to {
opacity: 1;
li:nth-child(1) span {
background-image: urls.$index_slide1;
}
li:nth-child(2) span {
background-image: urls.$index_slide2;
animation-delay: 6s;
}
li:nth-child(3) span {
background-image: urls.$index_slide3;
animation-delay: 12s;
}
li:nth-child(4) span {
background-image: urls.$index_slide4;
animation-delay: 18s;
}
li:nth-child(5) span {
background-image: urls.$index_slide5;
animation-delay: 24s;
}
}