Skip to content

Commit

Permalink
Kinda working
Browse files Browse the repository at this point in the history
  • Loading branch information
@bardsley
bardsley committed Nov 24, 2024
1 parent e52ef18 commit bc63250
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 62 deletions.
65 changes: 33 additions & 32 deletions docs/client/winchester/attempt2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
start: 'top 66%',
end: 'bottom bottom',
scrub: true,
markers: true,
// markers: true,
}
})

Expand All @@ -68,7 +68,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
scrollTrigger: {
trigger: '#goals',
pin: true,
start: 'top top+=50', // when the top of the trigger hits the top of the viewport
start: 'top top', // when the top of the trigger hits the top of the viewport
end: '+=1500px', // end after scrolling 500px beyond the start
scrub: 0.5, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
snap: {
Expand Down Expand Up @@ -117,7 +117,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
end: 'bottom top',
scrub: 0.5,
pin: true,
markers: true,
// markers: true,
snap: {
snapTo: 'labels', // snap to the closest label in the timeline
duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
Expand All @@ -127,37 +127,38 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
})

const sliderElement = document.getElementById('priority-slider') //.getBoundingClientRect()
const sliderContainer = document.getElementById('priorities') //.getBoundingClientRect()
const singlePanel = 750
const panels = Array.from(sliderElement.getElementsByTagName('li'))
const panelNames = panels.map((panel) => { return panel.id })
const numberOfPanels = panels.length
const totalMovement = (sliderElement.scrollWidth - sliderContainer.offsetWidth) * -1
window.sliderElement = sliderElement
window.sliderContainer = sliderContainer
window.panels = panels
window.timeline = tlPriority


const gapSize = 100
const panelSize = panels[0].offsetWidth
const startingPosition = (sliderContainer.offsetWidth/2) - (panelSize/2)
const movementAmount = panelSize + gapSize
console.log("Sizes",gapSize,panelSize, movementAmount)

let lastLabel = tlPriority

panelNames.forEach((panelName,index) => {
lastLabel = lastLabel.addLabel(panelName)
const offset = index*movementAmount
console.log("panelName",panelName,startingPosition,offset)
lastLabel.to('#priority-slider',{x: startingPosition - offset , ease: "none"},panelName)
})

setTimeout(() => {
const sliderContainer = document.getElementById('priorities') //.getBoundingClientRect()
const sliderElement = document.getElementById('priority-slider') //.getBoundingClientRect()
const debug = document.getElementById('debug')
const panels = Array.from(sliderElement.getElementsByTagName('li'))
const panelNames = panels.map((panel) => { return panel.id })
window.sliderElement = sliderElement
window.sliderContainer = sliderContainer
window.panels = panels
window.timeline = tlPriority


const gapSize = 100
const panelSize = panels[0].offsetWidth
const startingPosition = (sliderContainer.offsetWidth/2) - (panelSize/2)
const movementAmount = panelSize + gapSize
console.log("Sizes",gapSize,panelSize, movementAmount)

let lastLabel = tlPriority

panelNames.forEach((panelName,index) => {
lastLabel = lastLabel.addLabel(panelName)
const offset = index*movementAmount
console.log("panelName",panelName,startingPosition,offset)
lastLabel.to('#priority-slider',{x: startingPosition - offset , ease: "none"},panelName)
})

// debug.innerText = `${window.innerWidth} ${sliderContainer.offsetWidth} ${sliderElement.offsetWidth} ${panelSize} ${panels[0].getBoundingClientRect().width}`
},500)


console.log(tlPriority)
// .to('#priority-slider',{x: totalMovement , ease: "none"},)
});

function moveForward() {
Expand Down
4 changes: 3 additions & 1 deletion docs/client/winchester/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,11 @@ <h2>our vision</h2>
<div class="ripple">
<h2>Our Goals</h2>
<div class="rotator">
<div id="goal-wheel-wrap">
<div id="goal-wheel-wrap">
<div class="logo"></div>
<img src="./wheel1.svg" alt="" id="goal-wheel">
</div>

<div class="description">
<div id="community" class="value">Creating communities for students to belong</div>
<div id="familiarity" class="value">We know our members; our members know us</div>
Expand Down Expand Up @@ -115,6 +116,7 @@ <h3>collaboration</h3>
<div id="controls">
<button onclick="moveBack()">Previous</button>
<button onclick="moveForward()">Next</button>
<p id="debug" style="width: 100%; font-size: 2rem;"></p>
</div>

</section>
Expand Down
96 changes: 67 additions & 29 deletions docs/client/winchester/parallax.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ body {
overflow-x:hidden;
background-image: url('./background2.png');
font-size: 62.5%;
box-sizing: content-box;
}
body * {
box-sizing: content-box;
}

h1 { max-width: 80%; }
h2 { margin:0;}

Expand Down Expand Up @@ -142,34 +147,16 @@ section#introduction {
}
}



.basic {
padding: 2rem 5rem;
border: solid 1px transparent;
}
.basic h2 {
text-transform: uppercase;
font-weight: black;
/* font-size: 1.8rem; */
border-bottom: solid var(--line-thickness) var(--organisation);
display: inline-block; padding-bottom: 0.5rem;
}
.basic p {
/* font-size: 1.2rem; */
}


#goals {
color: #fff;
padding-top: 300px;
/* width: 100%; */
/* mix-blend-mode:screen; */
border: solid 1px transparent; /* Triggers block */
/* border-color: hotpink; */
display: block;
overflow: hidden;
position: relative;
height: 100vh;
}
#goals h2 {
font-size: 3em;
Expand Down Expand Up @@ -201,7 +188,10 @@ section#introduction {
@media screen and (min-width: 1024px) {
#goals {
padding-top: 100px;
height: 66vh;
height: 100vh;
}
#goals h2 {
transform: translate(200px,0);
}
#goals .picture {
left: calc(50% - 512px);
Expand All @@ -216,8 +206,6 @@ section#introduction {
margin-top: 200px;
background-color: var(--organisation);
background-size: cover;
/* mix-blend-mode: screen; */
/* clip-path: path('m100.17,6.71c45.26,13.26,52.35,36.65,101.33,49.33,10.89,2.82,51.71,12.33,98.67,0,49.96-13.12,50.04-36.05,100-49.33,48.25-12.83,90.18-2.6,100,0,50.06,13.26,50.05,36.1,100,49.33,9.6,2.54,51.59,12.83,100,0,50.06-13.26,50.08-36.12,100-49.33,47.61-12.6,89.08-2.85,100,0,50.53,13.18,50.66,36.1,101.33,49.33,11.83,3.09,53.01,12.59,100,0,49.44-13.25,49.23-35.93,98.67-49.33,48.64-13.19,91.18-2.72,101.33,0,49.99,13.41,49.97,36.23,100,49.33,47.67,12.49,88.89,2.56,98.67,0,50.04-13.11,50.04-35.95,100-49.33,45.83-12.28,86.22-3.88,101.33,0,48.67,12.49,56.44,34.86,100,49.33,25.41,8.44,64.2,14.6,119,0 v3931H.5V6.71 C 41.94-3.61,74.73-.74,100.17,6.71Z'); */
clip-path: path('m5011.83,62.75c-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.23,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33-16.3-4.77-35.62-7.66-58.29-6.41-15.62-.19-33.54,1.36-52.38,6.41-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-42.77,11.37-48.99,29.81-81.24,43.12-53.79,13.96-91.98,7.86-117.1-.49-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33C74.73-.74,41.94-3.61.5,6.71v3865.33h5130.33V192.38c0,.11,0-6.16,0-25.26V62.75c-54.8,14.6-93.59,8.44-119,0Z');
padding: 100px 3rem 3rem;
height: calc(100% + 100px );
Expand Down Expand Up @@ -261,8 +249,10 @@ section#introduction {
/* overflow: hidden; */
margin: 0 auto;
}
#goals .ripple h2 {
font-size: 5rem;
}
.rotator #goal-wheel-wrap {
height: 100%;
width: 80%;
padding-top: 80px;
background-image: url(./arrow.png);
Expand All @@ -274,6 +264,7 @@ section#introduction {
}
.rotator #goal-wheel-wrap img {
max-height: 100%;
display: block;
}

.rotator #goal-wheel-wrap .logo {
Expand All @@ -286,6 +277,11 @@ section#introduction {
z-index: 10;
}
@media screen and (min-width: 1024px) {

#goals .ripple {
max-height: 100%;;
}

.rotator {
flex-direction: row;
align-items: center;
Expand All @@ -295,14 +291,51 @@ section#introduction {
}
.rotator #goal-wheel-wrap {
/* max-width: 50%; */
width: 100%;
width: 65%;
/* max-height: 100%; */
}
.rotator #goal-wheel-wrap img {
aspect-ratio: 1/1 ;
}
#goals .description .value {
font-size: 3rem;
margin-top:0;
}
.ripple {
border: solid 1px green;
}
.rotator {
}
.rotator #goal-wheel-wrap {
margin: -7rem auto 0;
}
}









.basic {
padding: 2rem 5rem;
border: solid 1px transparent;
}
.basic h2 {
text-transform: uppercase;
font-weight: black;
/* font-size: 1.8rem; */
border-bottom: solid var(--line-thickness) var(--organisation);
display: inline-block; padding-bottom: 0.5rem;
}
.basic p {
/* font-size: 1.2rem; */
}



#measures {
/* width: 100%; */
/* background-color: var(--logo-light); */
Expand All @@ -317,6 +350,7 @@ section#introduction {
/* color: #fff; */
padding: 0;
height: 100vh;
padding-top: 200px;
display: flex;
flex-direction: column;
justify-content:center;
Expand All @@ -329,6 +363,7 @@ section#introduction {
#priorities h2 {
font-size: 5rem;
margin-bottom: 1em;
text-transform: uppercase;
}

#priority-slider {
Expand All @@ -344,14 +379,14 @@ section#introduction {
#priority-slider li{
width: 100%;
flex-shrink: 0;
flex-grow: 0;
font-size: 4rem;
color: #fff;
padding: 6rem;
margin:0;
box-sizing:border-box;
border-radius: 1rem;
background-color: var(--organisation);
max-width: 90%;
max-width: 70%;
width: 750px;

}
Expand All @@ -370,8 +405,9 @@ section#introduction {

#controls {
width: 100%;
padding: 2rem 0 ;
padding: 2rem 0 5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
Expand All @@ -384,6 +420,7 @@ section#introduction {
border-radius: 1rem;
}


#footer {
height: 20rem;
background-color: var(--organisation);
Expand All @@ -395,5 +432,6 @@ section#introduction {
}

/* Debug */
#goals { border-bottom: dashed 3px hotpink;}
/* #priority-slider { border: dashed 3px hotpink; } */
/* #goals { border-bottom: dashed 3px hotpink;} */
#priority-slider { border: dashed 3px transparent; }
#piorities { border: dashed 3px transparent; }

0 comments on commit bc63250

Please sign in to comment.