Kevin Powell - Community•2mo ago

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•2mo 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•2mo ago

https://github.com/althepal78/fishingwithdummies/

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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•4w 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•4w 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•4w ago

Thanks for the explanation Both of yall

capt_uhu•4w 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.

Gaming

Programming

pirate scroll theme