Image parallax on recipes
This commit is contained in:
parent
ebd1fe00db
commit
e064c58fcc
83
src/lib/components/TitleImgParallax.svelte
Normal file
83
src/lib/components/TitleImgParallax.svelte
Normal file
@ -0,0 +1,83 @@
|
||||
<script>
|
||||
export let src
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--scale: 0.3;
|
||||
--space: 10vw;
|
||||
--font-primary: 'Lato', sans-serif;
|
||||
--font-heading: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:root {
|
||||
--scale: 0;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: -20vh;
|
||||
transform-origin: center top;
|
||||
transform: translateY(-1rem)
|
||||
scaleY(calc(1 - var(--scale)));
|
||||
}
|
||||
|
||||
.section > * {
|
||||
transform-origin: center top;
|
||||
transform: scaleY(calc(1 / (1 - var(--scale))));
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 30vh auto 0;
|
||||
}
|
||||
.blocker{
|
||||
display:block;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
height: max(50dvh, 500px);
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: min(1000px, 100dvw);
|
||||
z-index: -1;
|
||||
height: max(60dvh,600px);
|
||||
object-fit: cover;
|
||||
/*object-position: top;*/
|
||||
object-position: 50% 20%;
|
||||
}
|
||||
|
||||
.image-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
}
|
||||
:global(h1){
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<section class="section">
|
||||
<figure class="image-container"><img {src} alt=""/></figure>
|
||||
<div class=content><slot></slot></div>
|
||||
</section>
|
@ -15,12 +15,15 @@ li{
|
||||
list-style-type:none;
|
||||
transition: 100ms;
|
||||
color: white;
|
||||
user-select: none;
|
||||
}
|
||||
li>a{
|
||||
text-decoration: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
color: inherit
|
||||
color: inherit;
|
||||
border-radius: 1000px;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
li:hover,
|
||||
@ -31,7 +34,7 @@ li:focus-within
|
||||
transform: scale(1.1,1.1);
|
||||
}
|
||||
ul {
|
||||
padding-block: 2rem;
|
||||
padding-block: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
@ -51,7 +54,10 @@ ul {
|
||||
}
|
||||
|
||||
nav{
|
||||
position: sticky;
|
||||
background-color: var(--nord0);
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.wrapper{
|
||||
display:flex;
|
||||
|
@ -8,6 +8,7 @@
|
||||
import EditButton from '$lib/components/EditButton.svelte';
|
||||
import InstructionsPage from '$lib/components/InstructionsPage.svelte';
|
||||
import IngredientsPage from '$lib/components/IngredientsPage.svelte';
|
||||
import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@ -86,6 +87,16 @@ h1{
|
||||
box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.wrapper_wrapper{
|
||||
background-color: #fbf9f3;
|
||||
width: 100svw;
|
||||
padding-top: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -100,26 +111,14 @@ h1{
|
||||
}
|
||||
}
|
||||
|
||||
.title_container{
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.title{
|
||||
position: relative;
|
||||
width: min(800px, 80vw);
|
||||
margin-inline: auto;
|
||||
transform: translateY(-4rem);
|
||||
background-color: var(--nord6);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.title_container .img{
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
translate: 0 1px; /*bruh*/
|
||||
z-index: -1;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
@ -198,33 +197,29 @@ h4{
|
||||
{/each}
|
||||
</MultiImgWrapper>-->
|
||||
|
||||
|
||||
<div class=title_container>
|
||||
<div class=img style="background-image: url({hero_img_src})"></div>
|
||||
<div class=title>
|
||||
<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
|
||||
<h1>{data.name}</h1>
|
||||
{#if data.preamble}
|
||||
<TitleImgParallax src=/images/{data.images[0].mediapath}>
|
||||
<div class=title>
|
||||
<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
|
||||
<h1>{data.name}</h1>
|
||||
{#if data.preamble}
|
||||
<p>{data.preamble}</p>
|
||||
{/if}
|
||||
<div class=tags>
|
||||
<h4>Saison:</h4>
|
||||
{#each season_iv as season}
|
||||
{/if}
|
||||
<div class=tags>
|
||||
<h4>Saison:</h4>
|
||||
{#each season_iv as season}
|
||||
<a class=tag href="/rezepte/season/{season[0]}">{months[season[0] - 1]}-{months[season[1] - 1]}</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class=tags>
|
||||
<h4>Stichwörter:</h4>
|
||||
{#each data.tags as tag}
|
||||
<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>Stichwörter:</h4>
|
||||
<div class=tags>
|
||||
{#each data.tags as tag}
|
||||
<a href="/rezepte/tag/{tag}" class=tag>{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=wrapper_wrapper>
|
||||
<div class=wrapper>
|
||||
<IngredientsPage {data}></IngredientsPage>
|
||||
<InstructionsPage {data}></InstructionsPage>
|
||||
@ -234,4 +229,7 @@ h4{
|
||||
{@html data.addendum}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</TitleImgParallax>
|
||||
|
||||
<EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
|
||||
|
11
src/routes/test/+page.svelte
Normal file
11
src/routes/test/+page.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import TitleImgParallax from "$lib/components/TitleImgParallax.svelte";
|
||||
</script>
|
||||
<style>
|
||||
div{
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<TitleImgParallax></TitleImgParallax>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user