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
@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
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
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...
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 🙂
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
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
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?
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
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...
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
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:
(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)Thanks for the explanation
Both of yall
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
.