How to add moving text/content in Prestashop

Today we want to show you how to create own text / content moving animation for absolutely free. With this tutorial you will create own moving texts, pictures or another content you want. How we can do that? Well, for the first we must say something about what exactly we will use.

In HTML language, the marquee is a something like bloc section of the browser window that displays text or content that rolls across the screen. You can check below what exactly wikipedia says about marquee effect:

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard

How this effect exactly works? You can check below:

We use this code:

<marquee>
    This is an basic example of marquee effect
</marquee>

and the effect is:

This is an basic example of marquee effect

Which software you need?

Of course you can add many other effects to the animation, we will describe all important animation technique in this article. You must also know that to add animations to store we will use our  free solution html block for prestashop . With this module you can add to your shop "client side code" like html, javascript, css, etc. With this module you can create your own boxes with facebook, twitter, pinterest etc. plugins by adding code of them to any place in your shop based on PrestaShop engine.

How to create moving animation effect in own prestashop?

For the first you must download free html block module that we mentioned above. This module is absolutely free and you can use it in as many shops you want. So, download it and then you must install module in prestashop . We pasted link to the tutorial where you can read how to do it. Tutorial was written for prestashop 1.4.x but installation process looks the same for the newest prestashop versions. All example codes of animation effect you should insert into the hook that you selected in module configuration. It's very easy! don't you think? Ok, so let's make a animation  examples.

Creating own animation

We attached a simple animation above, now we want to extend animation for additional parameteres like speed control, direction etc. We pasted all animation parameters below with short info about each param:

now we want to show you how to use each param. Remembet that you are able to combine many params in one marquee block. With this feature you will be able to create any move animation type you want. So, for the first we want to say something about basic  params: width and height.

Width and height

We want to create animation with defined width & height param, so in this case we must insert this params into the <marquee> html tag. What does it mean? it mean that all parameters we should insert <marquee here>. For example:

<marquee width="200" height="100">
    example with height and width params!
</marquee>

example with height and width para

Remember that you are able to add to animation any content you want. For example, you can add image:

<marquee width="200" height="100">
    <img src="http://mypresta.eu/themes/prestamods/img/global/logo.png"/>
</marquee>

Direction 

Now we want to show example with direction paramter. Direction paramter indicates which direction the marque scrolls.you can use two values: left | right. Default value is left - and it indicates that the marquee starts at the right side of block and moves leftwards across the block. Another param value is right and it indicates that the marquee starts at the left side of block and mowes rightwards acros the block.

<marquee width="200" height="100" Direction="left">
    Direction Left Example
</marquee>
 
<marquee width="200" height="100" Direction="Right">
    Direction Right Example
</marquee>

Direction Left Example Direction Right Example

Behavior

Next parameter of animation is behavior param. Behavior parameter indicates how the contents scroll. You can use three values: scroll | slide | alternate. First one - Scroll  which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side:

<marquee width="200" height="100" behavior="scroll">
    scroll example
</marquee>

scroll example

Another behavior param value is slide  and this  is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. Notice in this example that the contents stop scrolling as soon as the "S" reaches the left side:

<marquee width="200" height="100" behavior="slide">
    slide example
</marquee>

slide example

 And the last behavior param value is alternate . This param  makes the content bounce back and forth, all of it remaining visible all the time (assuming of course that it all fits).

<marquee width="200" height="100" behavior="alternate">
    alternate example
</marquee>

alternate example

Scrolldelay

Next  parameter of animation technique for marquee html tag is scrolldelay. It is an integer value which sets the speed of scrolling. Marquee moves content by displaying the content, then delaying for some short period of time, then displaying content again in new position. This parameter sets the amout of delay in milliseconds. The default delay is 85.

<marquee width="200" height="100" scrolldelay="500">500</marquee>
<marquee width="200" height="100" scrolldelay="1000">1000</marquee>
<marquee width="200" height="100" scrolldelay="1500">1500</marquee>

500 1000 1500

Scrollamount

Another parameter of animation related to scrolldelay is scrollamount apram, which indicates the speed of the scrolling. Scrollamount sets the size in pixels of each jump. Higher value of scrollamount makes the animation faster, lower value makes the animation slower. The default value of this param is 6.

<marquee width="200" height="100" scrollamount="1">1</marquee> 
<marquee width="200" height="100" scrolldelay="15">15</marquee>
<marquee width="200" height="100" scrolldelay="40">40</marquee>

1 15 40

Loop

Loop marquee animation block parameter sets how many times the marquee should loop. Default value of this parameter is infinite, which mean that the marquee loops endlessly. If you want to set up value of this param you should use integer value which indicates the number of loops.

<marquee width="200" height="100" loop="2">
 text which loops twice
</marquee>

text which loops twice

 As you can see, after second loop animation and content disappears. Do you remember behavior param which indicates the style of animation? You can use behavior="slide" - this will allow animation to stay visible after last loop. 

Bgcolor

Last parameter for set up animation is bgcolor. This param indicates the background color of your animation. You can use hex values of colors and also colors names like yellow, black, blue etc. 

<marquee width="200" height="100" bgcolor="red" style="color:#FFF">
    text which loops twice
</marquee>

As you can see, we use also "style" param, where you can set up more css styles of your block like background image, font-size, colors etc. With this param you can personalize own animation as you want!

text which loops twice

Thats ok, but how i can use this animation in prestashop?

The answer for this question is easy. You can create animation with important informations, like links to the cms pages, like box with information about sales, voucher codes etc. You can also create product advertise. How? Check code below, you can paste it into html block module into home hook. Then your customers wills how nice animation with any product you want. Remember that you can paste there as many products as you want! :)

<marquee style="text-align:center;" width="400" height="300">
    <a href="http://mypresta.eu/en/art/tag/marquee/">
        <img src="http://demo.mypresta.eu/img/p/6/6-home_default.jpg" />
        <span style="font-size:16px;">1381,27 €</span>
    </a>
</marquee>

1381,27 €  

So, thats all in this tutorial, now you can create own moving animations with any content you want. It's really easy in use. Remember that - if you have got any questions related to this topic and animations - feel free to use comments tool, we will reply ASAP :-)