270 lines
8.4 KiB
Vue
270 lines
8.4 KiB
Vue
<script setup lang="js">
|
|
import ski from "../../assets/myself/ski.png";
|
|
import book from "../../assets/myself/SmartTom.jpeg";
|
|
import surf from "../../assets/myself/surf.png";
|
|
import boxen from "../../assets/myself/TOm.jpg";
|
|
import florencs from "../../assets/myself/15.jpg";
|
|
import schnee from "../../assets/myself/DSCN1921.jpg";
|
|
import water from "../../assets/myself/27-2.jpg";
|
|
import gopro from "../../assets/myself/GOPR0521.png";
|
|
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import gsap from "gsap";
|
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
|
import Flip from "gsap/dist/Flip";
|
|
|
|
(gsap.registerPlugin(ScrollTrigger), gsap.registerPlugin(Flip));
|
|
|
|
const section = ref(null);
|
|
const gallery = ref(null);
|
|
|
|
let ctx;
|
|
let flipCtx;
|
|
|
|
const createTween = () => {
|
|
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
|
|
|
let galleryElement = gallery.value;
|
|
let galleryItems = galleryElement.querySelectorAll(".gallery__item");
|
|
|
|
flipCtx && flipCtx.revert();
|
|
galleryElement.classList.remove("gallery--final");
|
|
|
|
flipCtx = gsap.context(() => {
|
|
galleryElement.classList.add("gallery--final");
|
|
const state = Flip.getState(galleryItems);
|
|
galleryElement.classList.remove("gallery--final");
|
|
|
|
const flip = Flip.to(state, {
|
|
simple: true,
|
|
ease: "expoScale(1,5)",
|
|
});
|
|
|
|
const tl = gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: galleryElement,
|
|
start: "center center",
|
|
end: "+=100%",
|
|
scrub: true,
|
|
pin: galleryElement.parentNode,
|
|
},
|
|
});
|
|
|
|
tl.add(flip);
|
|
}, section.value);
|
|
};
|
|
onUnmounted(() => {
|
|
ctx.revert();
|
|
flipCtx?.revert();
|
|
|
|
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
|
|
|
window.removeEventListener("resize", createTween);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
ctx.revert();
|
|
flipCtx?.revert();
|
|
|
|
window.removeEventListener("resize", createTween);
|
|
});
|
|
</script>
|
|
<template>
|
|
<section class="image-section" ref="section">
|
|
<div class="gallery-wrap">
|
|
<div
|
|
class="gallery gallery--bento gallery--switch"
|
|
id="gallery-8"
|
|
ref="gallery"
|
|
>
|
|
<div class="gallery__item">
|
|
<img :src="boxen" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="gopro" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="schnee" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="surf" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="florencs" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="book" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="ski" alt="" />
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img :src="water" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
<h2>Here is some content</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.gallery-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gallery {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: none;
|
|
}
|
|
|
|
.gallery__item {
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
flex: none;
|
|
position: relative;
|
|
img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.gallery--bento {
|
|
display: grid;
|
|
gap: 1vh;
|
|
grid-template-columns: repeat(3, 32.5vw);
|
|
grid-template-rows: repeat(4, 23vh);
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.gallery--final.gallery--bento {
|
|
grid-template-columns: repeat(3, 100vw);
|
|
grid-template-rows: repeat(4, 49.5vh);
|
|
gap: 1vh;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(1) {
|
|
grid-area: 1 / 1 / 3 / 2;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(2) {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(3) {
|
|
grid-area: 2 / 2 / 4 / 3;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(4) {
|
|
grid-area: 1 / 3 / 3 / 3;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(5) {
|
|
grid-area: 3 / 1 / 3 / 2;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(6) {
|
|
grid-area: 3 / 3 / 5 / 4;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(7) {
|
|
grid-area: 4 / 1 / 5 / 2;
|
|
}
|
|
|
|
.gallery--bento .gallery__item:nth-child(8) {
|
|
grid-area: 4 / 2 / 5 / 3;
|
|
}
|
|
|
|
.text {
|
|
padding: 2rem 5rem;
|
|
}
|
|
</style>
|