Jump to content

Overlapping loading Icon between sections?

Recommended Posts

Site URL: http://mikeyscriven.com

Hello,

I was looking to hopefully get some help with my Squarespace website, recently, I added a bouncing code icon using "Codeblock" and Custom CSS, however, as seen here: https://mikeyscriven.com/about the loading icon bounces between the 2 sections of my website where the background changes from black to gray. I would ideally like a way of adding that loading icon in the middle of the 2 sections (between the black and gray sections).

I've tried multiple times to make this happen, sadly, I'm not great at coding and can't figure out how to make this possible.

So please post some code below for me to try if you know anything.
Thanks.

Link to comment
  • Replies 16
  • Views 415
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hello,

You can do this is you take the code you currently have and remove it from it's own section. Then add the code block to the hero section above (black section) and position the element at the bottom of the section. The animation will now play at the bottom of the black section, just before the gray section begins.

It will be easier for you to position the element between the two sections if it isn't in its own section, because each section by default has a preset amount of padding, heights, margins,..etc.

 

 

Link to comment
6 minutes ago, Wolfsilon said:

Hello,

You can do this is you take the code you currently have and remove it from it's own section. Then add the code block to the hero section above (black section) and position the element at the bottom of the section. The animation will now play at the bottom of the black section, just before the gray section begins.

It will be easier for you to position the element between the two sections if it isn't in its own section, because each section by default has a preset amount of padding, heights, margins,..etc.

 

 

Hi,

Thanks for the fast response to my thread, however, the text on the about page is in a list, and therefore I can't add a section to add code, only edit the list items.

Any ideas what I can do to resolve this?

Link to comment
5 minutes ago, Wolfsilon said:

In that case:

section[data-section-id="617705f2693a3a0bfb1abe17"] {
min-height: 100%;
.page-section > .content-wrapper {
padding-top: 0 !important;
padding-bottom: 10vmax !important;
	}
}

You should then try and change the positioning by adjusting the padding-top or padding-bottom values.

I added the code you sent, please see here: https://gyazo.com/9856603e10030602462252fbf5422dce
It didn't seem to do anything though? It's still bouncing in the same place.

Might I add, I do really, really appriciate you trying to help me with my code, I'm very grateful, thank you Wolfsilon.

Mike.

Link to comment
20 minutes ago, Wolfsilon said:
section[data-section-id="617705f2693a3a0bfb1abe17"] {
.content-wrapper {
padding-top: 0 !important;
padding-bottom: 8vmax !important;
	}
.page-section {
min-height: 100% !important;
	}
}

Let's try breaking down the code then. Try this.

So, it seems to have worked by changing the "padding-bottom" to 300-500 instead of 8.
It's positioned correctly as shown here: https://gyazo.com/3bafd0399b9aa850795a09c72b6f953e
That's kind of where I'd like it to be, sort of, maybe a little higher, but now it's caused a really big space between my next element.. such as this: https://gyazo.com/71df7dfed7ddc98ffe51629ce60c0efd and it goes down for quite a while..

I'm not really sure on how to keep it in that position, but then also have the section after it right below the loading bouncer.

Any ideas?

Link to comment

Sorry I did that last code wrong, I've fixed it now, it seems to have worked thankfully!
https://gyazo.com/7ddfc025a21b2a1187cf449b2e3c9496

The only problem I have now is that I would like the arrow moving up a slight little bit so that it ends on the black bit, going onto the gray section.

Do you have any idea how to nudge the arrow a little more up, I've tried editing the margins and everything and it doesn't seem to move it anymore, soon as it's a little more up, it should be perfect.

Thanks for all the help you've given me, I'm honestly really thankful!

Link to comment
10 minutes ago, Wolfsilon said:

You could adjust your arrow positioning by editing the position of the arrow to a negative value. like - "-200%" or something. That's something within your animation code that you'll need to change.

I can't figure out what to edit, here's the code:
 

}
 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
display: block;
width: 30px;
height: 30px;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
margin: 10px;
animation: animate 1.8s ease infinite;
}
@keyframes animate {
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
    }
}
section[data-section-id="617705f2693a3a0bfb1abe17"] {
min-height: 100% !important;
 .content-wrapper {
padding-top: 0 !important;
padding-bottom: 0vmax !important;
	}
}

What would I change to position it a little further up?

Link to comment
12 minutes ago, Wolfsilon said:

I'd add a negative value the top property for the  "arrow" CSS

 

I just tried adding negative value (-) to all of the propertys that had a number, it didn't seem to move it at-all, isn't there any code or anything to just move it up a tiny bit? I literally just need the arrow to end on the black line before the gray of the second part?

I'm sorry that I'm taking up so much of your time.
I'll vouch you after this for your on-going problem solving, I know it's not easy and it's annoying, but I really am glad to have the support of an amazing community.

Cheers.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.