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

Flier in homepage


katet12

Question

14 answers to this question

Recommended Posts

  • 0

How have you added the div?

this bit of code:

<div class="flier"><img src="https://freight.cargo.site/t/original/i/0501e4413c74c3401d9f041140258ef984cbc9a13d8aba70f89ae76b33e80ebf/Asset-13.png" width="200"></div>

I would just add an HTML code block with that in it, at the bottom of the page you wish to see it on.

(I am assuming you have used a global code injection to make it display on all pages - remove that)

Edited by IgnitePerth

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 0

 

594982735_ScreenShot2021-07-27at3_19_37pm.thumb.png.380af98bb7f962ba93976268b64ead50.pngOk so when I did that it just displays the static image... 

 

I have the image coded injected into the footer... 

 

I have a feeling I am making this more difficult than it needs to be! 

Link to comment
  • 0

So I should create a code block in home page and paste: <div class="flier"><img src="https://freight.cargo.site/t/original/i/0501e4413c74c3401d9f041140258ef984cbc9a13d8aba70f89ae76b33e80ebf/Asset-13.png" width="200"></div>

 

and then where do I paste the flier animation code: 

.flier {
pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

98.001%, 0% {
                display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}

15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}

15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}

40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}

40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}

65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}

65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}

95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}

 

VERY sorry i am very new to coding and still figuring it out. Thanks so much

Link to comment
  • 0

 

2 minutes ago, katet12 said:

So I should create a code block in home page and paste: <div class="flier"><img src="https://freight.cargo.site/t/original/i/0501e4413c74c3401d9f041140258ef984cbc9a13d8aba70f89ae76b33e80ebf/Asset-13.png" width="200"></div>

 

Correct!

and the css (animation code) goes in Design > Custom CSS

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 0
On 7/27/2021 at 2:06 PM, katet12 said:

Yay! IT finally worked. Thank you so much for your help 😄

I see this problem

 (All devices – register) When clicking on date, just there is a bar without number

https://dory-dolphin-pwl8.squarespace.com/register

dory-dolphin-pwl8.squarespace.com-01-min

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 8/9/2021 at 11:58 AM, katet12 said:

Yes you're right... what did I do wrong?

Hi. It looks like you solved this? Let me know if you need to help with any problems.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 8/11/2021 at 1:23 PM, katet12 said:

Yep I have...  I do have another question though!  

How do I add in a scrolling bar at the top of the header like the bar in the footer of this website?

https://www.worktones.com

Hi. Try this guide https://ryandejaegher.com/easy-scrolling-text-in-squarespace/

by @RyanDejaegher

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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