Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Overlapping loading Icon between sections?


Advolton

Question

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
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

16 answers to this question

Recommended Posts

  • 0

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
  • 0
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
  • 0

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.

Link to comment
  • 0
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
  • 0
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.

Link to comment
  • 0
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
  • 0

Okay now, instead of using ".page-section" for you min-height. Apply the min-height to the section itself instead.

section[data-section-id="617705f2693a3a0bfb1abe17"] {
min-height: 100% !important;
}

 

Edited by Wolfsilon
Code
Link to comment
  • 0
section[data-section-id="617705f2693a3a0bfb1abe17"] {
.content-wrapper {
padding-top: 0 !important;
padding-bottom: 8vmax !important;
	}
min-height: 100% !important;
}

I should've specified that it should be outside of the "}" for content-wrapper. Like the code above.

Link to comment
  • 0

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
  • 0
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
  • 0
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
  • 0

This post currently isn't resolved.
If anyone has any ideas on how to move the arrow further up the screen please let me know.

Thanks.

Huge thanks to @Wolfsilonthough for practically doing everything up-to this point, it's really appriciated, I've made huge progress because of this person!

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...