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;
|
list-style-type:none;
|
||||||
transition: 100ms;
|
transition: 100ms;
|
||||||
color: white;
|
color: white;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
li>a{
|
li>a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: inherit
|
color: inherit;
|
||||||
|
border-radius: 1000px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover,
|
li:hover,
|
||||||
@ -31,7 +34,7 @@ li:focus-within
|
|||||||
transform: scale(1.1,1.1);
|
transform: scale(1.1,1.1);
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
padding-block: 2rem;
|
padding-block: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
@ -51,7 +54,10 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav{
|
nav{
|
||||||
|
position: sticky;
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.wrapper{
|
.wrapper{
|
||||||
display:flex;
|
display:flex;
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
import EditButton from '$lib/components/EditButton.svelte';
|
import EditButton from '$lib/components/EditButton.svelte';
|
||||||
import InstructionsPage from '$lib/components/InstructionsPage.svelte';
|
import InstructionsPage from '$lib/components/InstructionsPage.svelte';
|
||||||
import IngredientsPage from '$lib/components/IngredientsPage.svelte';
|
import IngredientsPage from '$lib/components/IngredientsPage.svelte';
|
||||||
|
import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
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);
|
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{
|
.wrapper{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -100,26 +111,14 @@ h1{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_container{
|
|
||||||
max-width: 1000px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
.title{
|
.title{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: min(800px, 80vw);
|
width: min(800px, 80vw);
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
transform: translateY(-4rem);
|
|
||||||
background-color: var(--nord6);
|
background-color: var(--nord6);
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
}
|
translate: 0 1px; /*bruh*/
|
||||||
.title_container .img{
|
z-index: -1;
|
||||||
width: 100%;
|
|
||||||
height: 700px;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
.icon{
|
.icon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -198,33 +197,29 @@ h4{
|
|||||||
{/each}
|
{/each}
|
||||||
</MultiImgWrapper>-->
|
</MultiImgWrapper>-->
|
||||||
|
|
||||||
|
<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}
|
||||||
|
<a class=tag href="/rezepte/season/{season[0]}">{months[season[0] - 1]}-{months[season[1] - 1]}</a>
|
||||||
|
{/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 class=title_container>
|
</div>
|
||||||
<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}
|
|
||||||
<p>{data.preamble}</p>
|
|
||||||
{/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>
|
|
||||||
|
|
||||||
|
|
||||||
<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>
|
<div class=wrapper>
|
||||||
<IngredientsPage {data}></IngredientsPage>
|
<IngredientsPage {data}></IngredientsPage>
|
||||||
<InstructionsPage {data}></InstructionsPage>
|
<InstructionsPage {data}></InstructionsPage>
|
||||||
@ -234,4 +229,7 @@ h4{
|
|||||||
{@html data.addendum}
|
{@html data.addendum}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</TitleImgParallax>
|
||||||
|
|
||||||
<EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
|
<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