Hey there! I'm currently working on adding scrolling text along the side of a webpage for a specific section. My goal is to have three different sections, each with text that stops scrolling when you reach it and then transitions to the next section on the opposite side. This is part of my personal website project, but I'm struggling with where to start in terms of coding.
Would anyone be able to assist me with this? Here's a link to a helpful example?
I've included only one section so far, as I thought it might make things easier. However, I can't seem to get the rotation effect to work. Is there something simple or basic that I may have missed?
CSS:
#vertical-text1 {
transform: rotate(-90deg);
transform-origin: left top;
margin-top: 20px;
position: relative;
font-size: 5em;
color: #000;
}
.photoset {
width: 1050px;
margin: 0 auto;
}
HTML:
<div id="vertical-text1"> Print Media </div>
<div class="photoset" data-layout="131">
<img src="img/nature1.jpg" width="1000" height="1000" data-highres="img/nature1.jpg">
<img src="img/nature2.jpg" width="333.3" height="333.3" data-highres="img/nature2.jpg">
<img src="img/nature3.jpg" width="333.3" height="333.3" data-highres="img/nature3.jpg">
<img src="img/nature4.jpg" width="333.3" height="333.3" data-highres="img/nature4.jpg">
<img src="img/nature5.jpg" width="1000" height="1000" data-highres="img/nature5.jpg">
</div>
</div>
Please note that the images are empty placeholders, but they are sized according to what I envision them to be in the final design.