[David Renue]

Hi there,

Where is the option to make the annoucer to slide from leftside to the screen to the right side instead of bottom to top slide?

Does someone has a code to do this, because the setting only says slide it does not say which direction to slide?

Its only for the mobile view not desktop view.

Kind regards,
Revue

[David Renue]

<div id=”ancr-5098″ class=”ancr ancr-wrap ancr-lo-ticker ancr-lo-ticker-anim” data-props=”{"status":"active","display":"immediate","show_on":"page_open","show_after_duration":"10","show_after_scroll":"0","open_animation":"slide","schedule_from":"","schedule_to":"","position":"bottom","sticky":"yes","layout":"ticker","container_width":"1000px","ticker_speed":"20","close_btn":"no","close_animation":"slide","close_content_click":"no","auto_close":"99999","keep_closed":"no","closed_duration":"0","devices":"all","id":5098}” style=”display: block; –ancr-width: 732.258px; –ancr-ticker-speed: 20s;”><div class=”ancr-container” style=”min-width: 1122.86px; visibility: visible;”><div class=”ancr-content”><div class=”ancr-inner”><p><

Here is the code, but i dont know were to put that the slide needs to be left to right?

And i dont mean the ticker, i mean the first time the annoucement pops up from below to above slide i want that to be slide right to left and then the ticker comes.

[Aakash Chakravarthy]

Hi David,

Announcer supports slider and has specific logic for top to bottom only. It does not support left to right. It is because screens are usually wider and announcement messages can be in multiple lines. The animation from left to right was weird and not very appealling.

Thanks,
Aakash

[David Renue]

Hi Aakash, its is very important for me to do this.

Can u please reach you so i can show you why its important?

I also mailed you my mail was Tipsyvision.

[David Renue]

This is why its important.

View post on imgur.com

That green bar is the annoucement bar.

The animation is bottom to top, i need to from right to left then it will come from behind the whatsapp circle to the left.

Can u say what i need to add to the css to make this happen please?

[David Renue]

Please help me, I know its possible

View post on imgur.com

And i dissect from right to left from a code pen source code and it kinds works but not perfectly.

https://codepen.io/pmallol/pen/dyGgZvM

–animation-duration: 12s;

animation: var(–animation-duration) slide-right-animation 4s ease-in-out infinite;

@keyframes slide-right-animation {
0% {
transform: translateX(var(–hidden));
opacity: 0;
}
6.66%, 26.64% {
transform: translateX(var(–visible));
opacity: 1;
}
33.30%, 100% {
transform: translateX(var(–hidden));
opacity: 0;
}

The only thing i need to know is to replace it with the original one, and do it correctly.

Can u write the correct css for me so i can add it in wordpress custom css?

[Aakash Chakravarthy]

Hi David,

Please try the following. I have modified the code you have shared as per your requirement.

1) In announcer settings, switch to “text” tab.
2) Paste the code below.

<div class="sliderWrap">
<div class="slider">
    <div class='slide first-slide'>This is slide 1</div>
    <div class='slide second-slide'>This is slide 2 for testing</div>
    <div class='slide third-slide'>This is slide 3 for tests</div>
</div>
</div>

3) Go to your theme settings page and paste below CSS

.sliderWrap {
  --width: 900px;
  width: var(--width);
  overflow: hidden;
}

.slider {
  --animation-duration: 12s;
  width: calc(var(--width)*3);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
}

.slide {
  width: var(--width);
}

.slider .first-slide {
  --visible: 0;
  --hidden: 100%;
  animation: var(--animation-duration) slide-right-animation ease-in-out infinite;
}

.slider .second-slide {
  --visible: -100%;
  --hidden: 100%;
  animation: var(--animation-duration) slide-right-animation 4s ease-in-out infinite;
}

.slider .third-slide {
  --visible: -200%;
  --hidden: 200%;
  animation: var(--animation-duration) slide-right-animation 8s ease-in-out infinite;
}

/* The slide right effect */
@keyframes slide-right-animation {
  0% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
  6.66%, 26.64% {
    transform: translateX(var(--visible));
    opacity: 1;
  }
  33.30%, 100% {
    transform: translateX(var(--hidden));
    opacity: 0;
  }
}

Change the slide text in #2 as per your needs

Change the slider width in #3 from 900px as required.

Note: The code you shared supports only 3 slides. For more slides extra CSS must be added. You can follow the code and duplicate the .slider .third-slide CSS for more.

Hope this helps.

Thanks,
Aakash

[David Renue]

Can u log into my website as admin, I cant find the 1 part of your tutorial.

Can u give me a email so that i can email the credentials?

I also send a mail to you whitin this website with the credentails.

This code needs only to be on the Mobile view!

[David Renue]

Dear Aakash,

I have put the code inside but the animation still comes from below?

View post on imgur.com

View post on imgur.com

It is not working, can u please check?

It is for the mobile version mobile view the green bar needs to come from the whatsapp circle right to left and from left to right again.

Also in the code above there is an opacity active i dont want that i want it to be 100% from right to left – left to right.

Kind regards,
Tipsy

[David Renue]

I just purchased annoucer pro, can you please help me by replying to my mail. I would like to use the support service to make this happen?

[Aakash Chakravarthy]

Hi David,

No worries. I work on a different timezone here. I’ll check the details you have shared and get back to you asap.

Thanks,
Aakash

[Author]

Posts