Bouwen - Tolga1999/ROCKET-PAGE GitHub Wiki
De slider is op een hele unieke manier gemaakt. Met transform: rotate(-90deg); roteren we het element en daarbinnen roteren we het weer terug zodat de browser denkt dat je naar beneden scrolt maar in werkelijkheid scrol je naar de zijkant.
Zo ziet dat er uit in de CSS:
.outer-wrapper {
position: fixed;
margin-top: -2px;
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh); /*Roteer 90 graden*/
transform-origin: top left;
overflow-x: scroll;
scroll-snap-type: y mandatory;
overscroll-behavior: contain;
}
.all {
display: flex;
transform: rotate(90deg) translateY(-100vh); /*Roteer 90 graden terug*/
transform-origin: top left;
}
Elk visite kaartje is een
element met een breedte van 33.3% op desktop, 50% op tablet en 100% op een telefoon.Omdat alle kaartjes anders zijn hebben we CSS toegepast om de kaartjes in de sections te croppen.
.background_format {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Één van de interessantste en handigste dingen die we als groepje geleerd hebben op het gebied van CSS is section:nth-child(). Je kan zonder elke section een unieke class te geven zo toch elke sections appart stylen. Heel handig!
Tijdens de schetsfase zijn wij met ons groepje tegen een probleem aangelopen. De pagina die wij graag wilde gaan coderen was niet overzichtelijk genoeg. Door middel van een kleine brainstorm zijn we op de 'overview' pagina gekomen. De overview is gemaakt door middel van flexbox, hier hebben wij een workshop over gehad waardoor wij dit gelijk zelf konden implementeren in onze website. Het fijne aan flexbox is is dat je eigenlijk door het stijlen van één object een volledige reeks kan stijlen en het gelijk responsive is.
Toen de overview pagina klaar was moest deze nog in beeld gebracht worden. Dit was heel simpel op te lossen door een link naar een andere pagina toe te voegen maar dat werkte voor ons niet mooi. Het doen was om de overview in te laten vliegen over de standaard content. Door een knop toe te voegen aan de onderkant van de pagina is het in combinatie met JS mogelijk geweest te overview pagina in te laten vliegen.
let openGallery = new Boolean(false);
gallery = document.querySelector('.gallery')
galleryOpenButton = document.getElementById('galleryOpenButton')
galleryCloseButton = document.getElementById('galleryCloseButton')
function menuFunction() {
// gives true or false as value
if(openGallery == false){
gallery.classList.add('galleryTop')
openGallery = true
galleryCloseButton.style.display = "inline"
}else{
gallery.classList.remove('galleryTop')
openGallery = false
galleryOpenButton.style.display = "inline"
galleryCloseButton.style.display = "none"
}
}
function fotoFunction(){
fotoPersoon = document.querySelector('.gallery')
fotoPersoon.classList.remove('galleryTop')
galleryOpenButton.style.display = "inline"
galleryCloseButton.style.display = "none"
}
function logoFunction(){
gallery.classList.remove('galleryTop')
galleryCloseButton.style.display = "none"
}
Het is mogelijk om in de overview een van de projecten aan te klikken. Als er op een project geklikt wordt sluit de overview automatisch en scroll je op de website naar het desbetreffende project toe. Om dit te bereiken hebben wij gebruik gemaakt van links die intern gelinkt zijn aan ID's van content op de website. Om daarbij ook de overview te sluiten wordt bij het klikken van de link ook de regel in de JS opgeroepen.
<a class="gallery_link" href="#2" onclick="fotoFunction()">
animatie.mp4
Hierboven staat een van de animaties die wij hebben toegevoegd aan onze website. Wij hebben vooral geanimeerd door middel van :hover. Om de animaties soepel te laten verlopen hebben we gezorgd dat niet alles tegelijk animeert maar dat er een animation delay en een ease in/out in zit. Op de tablet en mobiele variant kwamen wij er achter dat als je geen muis hebt je ook niet kunt hoveren, dit hebben wij getackeld door een media query te gebruiken die zorgt dat de animatie altijd aan staat als de gebruiker geen muis gebruikt.
Voor mobile en tablet hebben wij media queries gecreëerd met hun eigen breakpoint, de breakpoint is alleen gebaseerd op de width van de het scherm zelf. Tolga heeft gewerkt aan de tablet media query en Milan heeft gewerkt aan de mobile media query, hieronder de code van Tolga en Milan.
Mobile:
/*--------------------Mobiel view--------------------*/
@media screen and (max-width: 480px) {
.outer-wrapper {
margin-top: -2px;
width: 100vh;
height: 100vw;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.all {
display: flex;
width: 100vw;
}
section {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100vh;
width: 100vw !important;
transition: 0.5s;
position: relative;
/*scroll snap*/
scroll-snap-align: start;
}
.content_container,
.card,
.section {
padding: 0.5em;
}
.subtext {
font-size: 0.5em;
}
p {
padding-right: 3em;
}
.logo {
position: fixed;
width: 12%;
margin-left: 1em;
}
.raket {
position: fixed;
width: 20%;
margin-left: 1em;
}
.overlay::before {
content: "";
opacity: 100%;
}
.content_container h2,
.content_container p,
.content_container .knop {
transition: 0.3s;
transition-timing-function: ease;
transform: translateY(0px);
opacity: 1;
}
.mainschrift {
font-size: 1em;
padding-right: 0.3vw;
display: block;
width: 80vw;
}
.first_text_swipe {
display: inline;
}
.first_text_scroll {
display: none;
}
.gallery img {
width: 400px;
max-width: 95%;
height: 300px;
object-fit: cover;
border-radius: 0.2em;
box-shadow: none;
cursor: pointer;
transition: 0.5s all ease;
}
.gallery {
max-width: 110%;
left: 0;
margin: auto;
background-color: rgba(0, 0, 0, 0.898);
transition: 2s;
z-index: 1;
padding-right: 1.5em;
padding-left: 1.5em;
}
#onderschrift,
h5 {
margin-top: 10px;
}
#onderschrift {
margin-bottom: 40px;
margin-top: -30px;
}
.gallery_link {
width: 80%;
color: white;
text-decoration: none;
}
#galleryOpenButton{
width: 14vw;
}
}
Tablet:
/*--------------------Tablet view--------------------*/
@media screen and (max-width: 1024px) {
.frontpage {
width: 50vw;
}
.overlay {
opacity: 100%;
}
.card {
width: 50vw;
}
.logo {
width: 20vw;
}
/* ANIMEREN UITZETTEN*/
.overlay::before {
content: "";
opacity: 100%;
}
.content_container h2,
.content_container p,
.content_container .knop {
transform: translateY(0);
opacity: 1;
}
.card:hover .overlay::before {
opacity: 1;
}
/* ---------------- */
.first_text_swipe {
display: inline;
font-size: 3.25em;
}
.first_text_scroll {
display: none;
}
.mainschrift{
margin-top: 10vh;
}
.content_container{
font-size: 1.4em
}
#galleryOpenButton{
height: 4.5vh;
}
.subtext{
width: 40vw;
}
/* hover hiden door zelfde background color */
.knop:hover {
background-color: rgba(81, 168, 225, 1);
}
}
Binnen de media queries veranderen we de sizing van buttons, subteksten, fonts, titels, images en logo's. Voor mobile zetten we de width van de section op 100% zodat het hele scherm alleen 1 visitekaartje laad zien, voor tablet is dit veranderd naar 50% (2 visitekaartjes op 1 scherm). Hover is uitgezet voor de containers met daarin de subtext en namen. We hebben ook de hover van de button zelf uitgezet, dit allemaal hebben we gedaan omdat je niet kan hoveren als je een touchscreen device gebruikt zoals een mobile of tablet.
Als laaste veranderen we de display op de front page van "scroll" naar "swipe" op beide media queries, hieronder de code:
.first_text_swipe {
display: inline;
font-size: 3.25em;
}
.first_text_scroll {
display: none;
}