How to define height of screen for a marquee animation (html overlay video)

Help/How To
1

Hello,
I want to create an overlay HTML on shotcut, with an image continuously going up and down of my screen.
I am quite new in HTML coding and I have tried to use a marquee tag (with alternate and corresponding direction). However, the image is moving only by the height of the image (-ish).
Even if I try to set up a different height, the image is not going down to the bottom of my screen. Can someone help me how to define the height of the animation to full screen?

Or is there another way to do this kind of animation?

Many thanks in advance!
Jessy

2

Jesse,

CSS3 Animations (and the <marquee> tag, which is now obsolete) do not “play” well with Shotcut, due to the lack of synchronisation between CSS and Shotcut’s processing of frames. There are ways to do it and I have created several utilities to make it a bit simpler for users. You can also use Shotcut’s Size-and-Position filter to move text around the screen.

If you want to use the Text:HTML filter (which used to be called Overlay-HTML) for animation (and other things) then have a look at my website: http://elusien.co.uk/shotcut/index.html

If you post a copy of your HTML file I could have a look at it and maybe sort out what you want to do.

3

Many thanks for your reply Elusien !
And thank you for your links :grinning:

I am not sure I can use Size-and-Position as I want the image to keep moving during the whole video, but again, I may be wrong :slightly_smiling_face:

Above my background video, I want to insert an image which would slowly move on a vertical line (up and down, and so on). Like a bouncing ball in a way…
The purpose of my video, if that can help you understand what I’m looking for, is for a relaxation tool in which the image would help the person for respiration (inhale during the rise of the image and exhale when going down)…

I’ve tried to write the following (again I tried different options and I’m not at all sure of the accuracy of my coding…) :
"
marquee behavior=“alternate” direction=“down” scrollamount=“2” height=“500”
marquee behavior=“alternate” direction=“up” scrollamount=“2” height=“500”
img src=“Image1.png” hspace=“100”
"

4

It is as I suspected. Your HTML animation is not synchronised with Shotcut’s framerate and also the parameters on <marquee> do not allow you easily to set the positions on the screen. If you give me an hour I may be able to come up with something for you to experiment with.

1 Like
5

OK I have put something together. It is in the following file : marquee.zip (49.1 KB)

Download it and then un-zip it.

The file contains 2 javascript library files (ending in .js) you need not worry about these, just leave them as they are as they are used by the HTML file (New_Marquee.html). You will have o edit this file. You see one line that says:

img {margin: 0 100px; height: 50px;}  /******* 50px is the height of the image */

Change the “50px” to be the height of your image.

You will later on see two lines thus:

{offset:1,  "transform": " translateY( 310px)",}	//********  SEE ABOVE FOR WHY IT IS 360 pixels
{offset:1,  "transform": " translateY(-310px)",}	//********  SEE ABOVE FOR WHY IT IS 360 pixels

change the value"310" to half the video’s vertical resolution minus the height of the image.

You can now use this as your Text:HTML (Overlay-HTML) filter. It looks complicated, but it isn’t really, it’s the only way though that I know to do what are wanting to do. Let me know if you have any problems with it.

6

Wow thank you !! :heart_eyes:
I’ll try now and let you know!

7

Oops can’t find the file “New_marquee.html” in your zip. Looks there is only my older version “Marquee.html” in it :neutral_face:

8

Sorry my mistake - new ZIP file attached.

marquee.zip (50.0 KB)

9

I forgot to mention, the speed (duration) of the animation is set to 10 seconds (10000 milliseconds) just change this on the two lines:

{elements: "#down", animations: [{keyname:"up-down", timings: {duration:10000, easing:"linear", delay:0, iterations:Infinity, direction:"alternate"}}]},
{elements: "#up", animations: [{keyname:"down-up", timings: {duration:10000, easing:"linear", delay:0, iterations:Infinity, direction:"alternate"}}]}

to whatever you want to get the speed you desire.

Also, I vave an A and a B in the HTML. I did this for debugging - just delete those two characters:

  <div id="down">
    A <img src="Image.gif">
  </div>
  <div id="up">
    B <img src="Image.gif">
  </div>
1 Like
10

Wow this is perfect, thank you very much ! :star_struck:
After the changes for the height as suggested, and deleting ‘A/B’ it works well on my screen!!
Thanks also for the additionnal comments about the speed :ok_hand:

Last question, if I may… If I want to use this code but with only one image going up and down of the screen (instead of two moving here), should I just change the height (not dividing the total height in two and so on), and probably comment all the parts related to “down-up” for instance… Would it be ok or am I missing something?

11

More or less - yes. You only need to delete the HTML that says:

  <div id="up">
    <img src="Image.gif">
  </div>

and change the line that says

{offset:1,  "transform": " translateY( 310px)",}	//********  SEE ABOVE FOR WHY IT IS 360 pixels

To replace the “310” to the video’s vertical resolution minus the image height. You can leave everything else as it is, rather than inadvertantly deleting something you shouldn’t have.

12

Ok!!
Thank you sooo much Elusien :slight_smile:

13

One more point. Instead of a linear speed for the animation you could play around by replacing the easing:“linear” by easing:“ease-in” or easing: “ease-out” or easing : “ease-in-out”.

1 Like
14

This topic was automatically closed after 90 days. New replies are no longer allowed.