@ccrews @AdrienneN @meocoli
Hi everybody,
I am quite new in CSS and have only some basic knowledge and experience 😉 but anyway I tried to find out how this could work...because I wanted it a lot !
By a lot of trial & error & time. - and not sure if the code is really a solution without mistakes - it works!
Simple gallery: in Brine template and I used an index gallery with: layout slideshow, and the fixed height at 108vh. with 6 slides.
#horizontal-gallery {
width:600vw;
margin-top:-5vw;
margin-bottom:-5vw;
overflow-x:scroll;
overflow-y:hidden!important;
position:absolut;
}
#horizontal-gallery
.Index-gallery-item-image {
width:100vw!important;
max-height:105vh;
margin-top:-0vw;
padding-bottom:3.6vw;
}
#horizontal-gallery{
article:nth-of-type(1){
opacity:1.0;
left:0vw!important;
right:0vw;
.Index-gallery-item-content
{margin-left:-500vw!important;
}}
article:nth-of-type(2){
width:100vw!important;
left:0vw!important;
opacity:1.0;
}
article:nth-of-type(3){
width:100vw!important;
left:100vw;
}
article:nth-of-type(4){
width:100vw!important;
left:200vw;
}
article:nth-of-type(5){
left:-200vw!important;
.Index-gallery-item-content
{margin-left:-500vw!important;
}}
article:nth-of-type(6){
left:-100vw!important;
.Index-gallery-item-content
{margin-left:-500vw!important;
}}
}
.Index-gallery-item-content-body p:nth-of-type(1){font-size:0.5em!important;
color:#ccaa78;
margin-top:-4vw!important;
}
A bit more complex is this version - but it's an entire index that works like this and so you are free with the content for each page. The scrolling go up and down while the window is horizontal - I love this !! 🙂Sometimes the browser blocks the scrolling until you make the window a tiny bit larger or smaller - do not know why....
#collection-5f749ce77757eb5a41feb591{
.Content-outer {
-webkit-overflow-scrolling: touch!important;
overflow-scrolling: touch!important;
overflow-x:hiddden;
overflow-y:scroll!important;
-webkit-overflow-y:scroll!important;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
top:0!important;
position:absolute;
width:100vh;
height:100vw;
top: 0vw;
bottom:0vw;
right: 0vw;
left: 0vw;
}}
//turns/header/images
#page-five,
#page-four,
#page-three,
#page-two,.IndexFirstSectionHeight{
transform: rotate(90deg) translateY(-100vh)!important;
transform-origin: top left!important;
}
//index first section
#page-two{
width:120vw;
margin-top:4vw;
margin-bottom:40vw;
}
#page-two{
.Index-page-content.sqs-alternate-block-style-container{
margin-bottom:10vw;
margin-left:-5%;
}}
#page-three {.Index-page-content{
position:absolute;
margin-top:20vw!important;
display:flex;
flex-direction:column;
align-items: center;
justify-content:center!important;
display: flex;
flex-wrap: wrap;
}}
#page-five,
#page-four,
#page-three {
width:100vw;
}
#page-four{margin-left:0vw;
width:100vw;
margin-top:45vw; //is left:
margin-bottom:45vw; //is right:
#block-yui_3_17_2_1_1601546029396_3755{
width:40%;
margin-left:30%; }
#block-b1eda712c8f4ae9551f1{
width:100%;
padding:0;
}
}
.Index-nav{
display:none!important;}
.Index-page-scroll-indicator{
transform: rotate(-90deg) translateY(0px)!important;
margin-bottom:4vw;
margin-left:-15vw!important;
}
To all of you much more experienced guys - if you see some mistakes - please let me know.
here is the demo site:
https://my-personal-test.squarespace.com/
the pw is: luck