Skip to content

Commit

Permalink
Merge pull request #37 from SteinCodeAT/dev-te
Browse files Browse the repository at this point in the history 
feat: added new card animation on mobile screens, added steincode link to footer
  • Loading branch information
@kalvinter
kalvinter authored May 5, 2024
2 parents efa0880 + c2b4e64 commit d52c769
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 50 deletions.
17 changes: 7 additions & 10 deletions src/components/StackItem.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh
grid-template-columns: 1fr 1fr;

height: 100vh;
width: 100vw;
width: 98vw;

position: -webkit-sticky;
position: sticky;
Expand Down Expand Up @@ -71,7 +71,7 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh

.stack-item--image-area {
position: relative;
height: 50vh;
width: 40vw;
aspect-ratio: 1;
overflow: hidden;
}
Expand Down Expand Up @@ -171,12 +171,7 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh
@media (max-width: 762px) {
.stack-item {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.stack-item--col {
padding: 0;
}
Expand All @@ -185,12 +180,14 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh
}

.stack-item .stack-item--image-area {
aspect-ratio: unset;
transform: unset !important;
height: 60vh;
height: 70vh;
width: 80vw;
margin: 5vh 5vw;
}

.stack-item.passed .stack-item--image-area {
transform: translateX(-100%);
}
}

</style>
Expand Down
39 changes: 21 additions & 18 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,9 @@ const projects = [
const description = `
Çağdaş Çeçen is a Vienna based media artist. His focus is in the relationship between
Media Art focusing on the relationship between
human movement, space and uncertainty and developing
new ways of interaction between human and space.
new ways of interaction between humans and spaces.
`
---

Expand Down Expand Up @@ -280,29 +280,30 @@ new ways of interaction between human and space.
<section id="projects-section" style={`height: ${90 * projects.length}vh;`}>
<style>
#projects-section {
width: 100vw;
width: 98vw;
}

.stack-area {
position: sticky;
width: 100vw;
width: 97vw;
height: 100vh;
top: 0;
}

@media ((max-width:762px)) {
@media (max-width: 762px) {
#projects-section {
padding-top: 10vh;
margin-bottom: 10vh;
position: relative;
height: 100vh !important;
overflow-x: hidden;
}

.stack-area {
position: relative;
top: 0;
position: absolute;
display: flex;
flex-direction: column;
gap: 20vh;
flex-flow: column-reverse;
justify-content: flex-end;
flex-direction: row-reverse;
gap: 0;
}
}
</style>
Expand Down Expand Up @@ -338,7 +339,7 @@ new ways of interaction between human and space.

.about-me--header-area {
width: 100%;
height: 40vh;
height: 20vh;
position: sticky;
top: 5vh;
padding-top: 1.5rem;
Expand All @@ -347,7 +348,7 @@ new ways of interaction between human and space.
.about-me--header-img-wrapper {
width: 100%;
position: relative;
height: 40vh;
height: 20vh;
display: flex;
justify-content: center;
}
Expand Down Expand Up @@ -452,6 +453,7 @@ new ways of interaction between human and space.
background: var(--main-bg);
padding-bottom: 2rem;
height: unset;
width: 79vw;
}

.about-me--header-img-wrapper {
Expand Down Expand Up @@ -720,14 +722,15 @@ new ways of interaction between human and space.
<div class="footer--built-by-row">
Built with <Icon name="mdi:heart" /> in Vienna

<!--by <a
by <a
target="_blank"
href="https://www.steincode.com"
>SteinCode</a> -->
href="https://steincode.com"
>SteinCode</a>
</div>
</footer>

<script src="../scripts/copyright-year-updater.js"></script>
<script src="../scripts/index.js"></script>
</Layout>

<script src="../scripts/copyright-year-updater.js"></script>
<script src="../scripts/index.js"></script>

129 changes: 109 additions & 20 deletions src/scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,49 +79,54 @@ document.addEventListener('DOMContentLoaded', function() {

// projects section
document.addEventListener("DOMContentLoaded", () => {
function rotateNotPassedImages() {
const isMobile = !window.matchMedia('only screen and (min-width: 768px)').matches

function transformNotPassedImages() {
const stackItemImageAreas = document.querySelectorAll(
".stack-item:not(.passed) .stack-item--image-area"
)

for (let i = stackItemImageAreas.length - 1; i >= 0; i--) {
stackItemImageAreas[i].style.transform = `rotate(-${0.75 * (stackItemImageAreas.length - i - 1)}deg)`
let transformStyle = ''
const offsetFactor = stackItemImageAreas.length - i

if (isMobile) {
transformStyle = `translate(${offsetFactor * 10}px, ${offsetFactor * 2}px)`
} else {
transformStyle = `rotate(-${0.75 * (offsetFactor - 1)}deg)`
}
stackItemImageAreas[i].style.transform = transformStyle
}
}

// Set initial rotation
rotateNotPassedImages()
transformNotPassedImages()

document.querySelector(".stack-item:last-of-type").classList.add("focus")

const bannerSection = document.querySelector(".banner-section");
const stackArea = document.querySelector(".stack-area")
const stackItems = Array.from(document.querySelectorAll(".stack-item"))

window.addEventListener("scroll", () => {
const propotion = bannerSection.getBoundingClientRect().bottom/(window.innerHeight * 0.8);

if (propotion > 0){
/* stack area is not visible */
return
}

const index = Math.floor(propotion) * -1

function showProjectCardByIndex({index}) {
if (index == stackArea.dataset.currentFocusIndex){
/* return if the focus card would remain the same */
return
}

stackArea.dataset.currentFocusIndex = index

const stackItems = Array.from(document.querySelectorAll(".stack-item"))
console.log(index)

if (index > stackItems.length){
/* return if the index would be larger than the stack items */
if (index > stackItems.length || index < 0){
/* return if the index would be larger than the stack items or less than 0 */
return
}

stackArea.dataset.currentFocusIndex = index

let reversedIndex = stackItems.length - index
console.log("index ", index)
console.log("stackItems.length, ", stackItems.length)
console.log("reversedIndex ", reversedIndex)

const passedStackItems = stackItems.slice(reversedIndex + 1, stackArea.length)
const focusStackItem = stackItems[reversedIndex]
Expand Down Expand Up @@ -156,6 +161,90 @@ document.addEventListener("DOMContentLoaded", () => {
item.classList.remove("display-at-top")
})

rotateNotPassedImages()
})
transformNotPassedImages()
}

/* Add touch event listeners for mobile screens
* This should only be applied if it is a mobile device
* All larger screens should work with the standard scroll animation
*/
if (isMobile){
let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;

const minimumTouchDistance = 25;

document.querySelector(".stack-area")?.addEventListener("touchstart", (event) => {
const touchLocation = event.targetTouches[0];
touchstartX = touchLocation.screenX;
touchstartY = touchLocation.screenY;

touchendX = 0;
touchendY = 0;
}, false)

document.querySelector(".stack-area")?.addEventListener("touchend", (event) => {
const touchLocation = event.changedTouches[0];
touchendX = touchLocation.screenX;
touchendY = touchLocation.screenY;

const distanceX = touchendX - touchstartX
const distanceY = touchendY - touchstartY

/* parse the currently set focus index as int or set to a reasonable default value */
let currentFocusIndex = stackArea.dataset.currentFocusIndex

if (currentFocusIndex === undefined) {
currentFocusIndex = 0
} else {
currentFocusIndex = parseInt(currentFocusIndex)
}

if (distanceX < 0 && Math.abs(distanceX) > minimumTouchDistance){
// swipe left
let targetIndex = currentFocusIndex + 1

if (targetIndex > stackItems.length) {
targetIndex = 1
}

showProjectCardByIndex({index: targetIndex})
} else if (distanceX > 0 && Math.abs(distanceX) > minimumTouchDistance){
// swipe right
let targetIndex = currentFocusIndex - 1

if (targetIndex <= 0) {
targetIndex = stackItems.length
}

showProjectCardByIndex({index: targetIndex})
} else if (Math.abs(distanceY) > minimumTouchDistance) {
// swipe up or down - do nothing
}
}, false)

document.querySelector(".stack-area")?.addEventListener("touchcancel", () => {
// reset touch recorded points
touchstartX = 0;
touchstartY = 0;
touchendX = 0;
touchendY = 0;
}, false)
} else {
/* Add general scroll animation event listener for larger screens */
window.addEventListener("scroll", () => {
const propotion = bannerSection.getBoundingClientRect().bottom/(window.innerHeight * 0.8);

if (propotion > 0){
/* stack area is not visible */
return
}

const index = Math.floor(propotion) * -1

showProjectCardByIndex({index: index})
})
}
})
9 changes: 7 additions & 2 deletions src/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ header nav li {

.banner-card {
display: flex;
padding: 1px;
justify-content: center;

margin: auto;
Expand Down Expand Up @@ -476,7 +475,13 @@ header nav li {
}




@media screen and (max-width: 1000px) {
.banner-card .content-card .title {
font-size: 2.9rem;
}
}

@media (max-width: 762px) {
header {
flex-direction: column;
Expand Down

0 comments on commit d52c769

Please sign in to comment.