pirate scroll theme

I am trying to make a site where the sections roll down like a pirate scroll and when changed out or in transition roll back up until the section is in view. I have no idea where to start but I am trying to do it for my site @ https://www.fishingwithdummies.site
Fishing With Dummies
I, ALTHEPAL78, am relearning how to fish after many years. I used to fish with my father but haven't done so since childhood. Starting from scratch, I've been learning from various online channels, though none are local to Spring Hill, Florida. I'll be fishing around Clearwater, possibly Saint Petersburg, and Tampa. My boat is an old cruiser, no...
14 Replies
althepal78
althepal78OP•7mo ago
@Kevin trying to see if this would be something you might want to take on as a challenge or if you know a good site that could help me with this 🙂 does not seem to be easy
althepal78
althepal78OP•7mo ago
GitHub
GitHub - althepal78/fishingwithdummies: my new site fishsingwithdum...
my new site fishsingwithdummies an addition to my new youtube channel I will be making - althepal78/fishingwithdummies
Chris Bolson
Chris Bolson•7mo ago
I have had a go at creating somthing that might be of use. I don't think that it is exactly what you are after but at least it is something. https://codepen.io/cbolson/pen/OJYmNdY Disclaimer - I will admit that the code is really rather messy, it was more of an experiment than something that could be be actually used. This is not responsive. There are lots of magic numbers (ie fixed values) in there which doesn't make it very flexible. Also the images I used for the scroll are not of very good quality nor are they best suited to this, especially the central part. If I were to take this further I would try to find a simpler image, especially regarding the "content" area that could be as short or long as required using background-repeat rather than a fixed height.
Chris Bolson
CodePen
[test] - Dead Sea Scrolls
Lots of magic numbers in here and it is not responsive. This was really just a demo. https://discord.com/channels/436251713830125568/12471543540967014...
althepal78
althepal78OP•7mo ago
Thanks I will look into it sorry I was at an dr appointment yo this is awesome I would have to get rid of the that top All I have to do now is figure out how to make this close the scroll and then open another scroll but it does look sweet 🙂
Chris Bolson
Chris Bolson•7mo ago
It should already open and close them as you scroll. Isn't that what you wanted? If you want to make them open or close "manually" you need to toggle the class "in-viewport" but of course the JS code for the scroll will toggle that off so you will either need to remove or edit the JS
althepal78
althepal78OP•7mo ago
Yes I am trying to click on on "about" and "home" closes then "about" opens. Wow I did not eve see you already responded lol
Chris Bolson
Chris Bolson•7mo ago
So do you want all the scrolls visible in the viewport and then clicking on one of the nav items (about, home, videos) closes the currently open scroll and opens the selected one? Or would it infact be a single scroll with different content according to the link clicked?
althepal78
althepal78OP•7mo ago
yes the first part like I would like it to open different sections, when one is open close like roll up then the next one come sliding in then unrolls
Chris Bolson
Chris Bolson•7mo ago
How about this version: https://codepen.io/cbolson/pen/pomwEEp I have removed the scroll observer and swapped the links for buttons which close the current scroll, then scroll to the selected one, and then finally open the selected scroll.
Chris Bolson
CodePen
[cpc] - Smooth Scrolling Scrolls v2
Lots of magic numbers in here and it is not responsive. This was really just a demo. https://discord.com/channels/436251713830125568/12471543540967014...
althepal78
althepal78OP•7mo ago
oh snap that is awesome maybe I can put a snap and hide overflow x and make it come in side ways I like it 🙂 I can't understand JS like this with animations and everything that is what I am trying to work on but everytime i do something happens in my life it sucks what does p + p do? I saw that in your css @Chris
Chris Bolson
Chris Bolson•6mo ago
sorry, I missed that question... `p + p selects all <p> elements which have a sibling <p> before them. This is to be able to add a top margin to all <p> elements except for the first one (as it won't have a previous <p> sibling). This is basically the same as doing this:
p{
margin-top: 1rem;
}
p:first-child(){
margin-top: 0;
}
p{
margin-top: 1rem;
}
p:first-child(){
margin-top: 0;
}
Jochem
Jochem•6mo ago
(for completion's sake: This is true in the case where there's only p children. p + p will select only consecutive P's, where p on its own with the first-child will also select a p that has a div or any other element before it)
althepal78
althepal78OP•6mo ago
Thanks for the explanation Both of yall
capt_uhu
capt_uhu•6mo ago
the slicing of the "background-image" into 3 pieces makes me think that border-image with the fill keyword might be useful here to avoid that extra div.
Want results from more Discord servers?
Add your server