Flier in homepage

Site URL: https://dory-dolphin-pwl8.squarespace.com/config/help

I followed this forum post to get the vase image to fly across the screen: 

Just wondering if anybody knows how to code it so that it only shows on the homepage?? 

Thanks a lot

This relies on the div to display it.  How are you adding it to your site (we cannot see your site unless you share it with a password).

As a guess I'd say it is as simple as only adding that code block (div) to the pages you wish to see it on.

Oh yes woops! Pword is Hello12

So what would that code look like?

Thanks a lit in advance

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)

Ok 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! 

The footer is on every page.  To make it appear only on one page, make code block inside the home page itself (and any other page you would like it on).

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

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

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

NP!  Glad to help 🙂

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

On 8/2/2021 at 6:04 PM, tuanphan said:

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

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

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.

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

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