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

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

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