dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add background image to hero

Browse source
This commit is contained in:
Daniel Bulant 2022-05-17 14:57:01 +02:00
parent c14e6e1074
commit 47acb8a568
2 changed files with 49 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/lib/components/hero.svelte
View file

@ -1,11 +1,37 @@
<script>
import { onMount } from "svelte";
let current = 0;
export var appTypeHover;
$: if(appTypeHover == "websites") current = 0;
$: if(appTypeHover == "applications") current = 3;
$: if(appTypeHover == "bots") current = 1;
onMount(() => {
let i = setInterval(() => {
current++;
if(current > 3) current = 0;
}, 5000);
return () => clearInterval(i);
});
</script>
<div class="hero">
<div class="bg">
<img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker.webp" alt="">
<img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
<img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
<img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.webp" alt="">
</div>
<slot />
</div>
<style>
.hero {
border-radius: 5px;
background: #F4C4C4;
background: rgba(244, 196, 196, 0.616);
position: relative;
padding: 40px 120px;
padding: 40px min(120px, 10vw);
margin: 0 20px;
@ -15,6 +41,27 @@
margin-bottom: 30px;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
z-index: -1;
filter: darken(20%);
background: #F4C4C4;
overflow: hidden;
}
.bg img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
transition: right .4s;
}
@media (min-width: 1760px) {
.hero {
margin: 0 auto;

2
src/routes/index.svelte
View file

@ -50,7 +50,7 @@
<Navbar />
<main class:dark={$darkmode}>
<Hero>
<Hero {appTypeHover}>
<h1>I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
<u on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</u> and
<u on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</u>.</h1>