Multiple Banners?

  • Resolved ttoaster

    (@ttoaster)


    5 years, 2 months ago

    Hi,

    Very nice plugin, but are there any plans to add support for multiple banners (banner rotation every x seconds/minutes)? That would be great.

    You mention a pro version but I can’t find it on your site, or indeed, anywhere…

    • This topic was modified 5 years, 2 months ago by ttoaster.
Viewing 1 replies (of 1 total)
  • Plugin Author rpetersen29

    (@rpetersen29)

    5 years, 2 months ago

    Hi @ttoaster
    Pro version is in the plugin, you can see the pro features at the bottom of the settings page.

    As for multiple banners, there is no explicit support for multiple banners but this type of behavior is achievable through keyframes, more info here https://css-tricks.com/snippets/css/keyframe-animation-syntax/. For example, you could put the following in Simple Banner Text:

    <span id="rotating-banner-container">
	<span id="banner-1">banner 1</span>
	<span id="banner-2">banner 2</span>
	<span id="banner-3">banner 3</span>
</span>

    And then the keyframe css in Website Custom CSS:

    @-webkit-keyframes FIRST-BANNER {
  0%   { opacity: 1;height: auto; }
  33% { opacity: 0;height: 0; }
}
@-moz-keyframes FIRST-BANNER {
  0%   { opacity: 1;height: auto; }
  33% { opacity: 0;height: 0; }
}
@-o-keyframes FIRST-BANNER {
  0%   { opacity: 1;height: auto; }
  33% { opacity: 0;height: 0; }
}
@keyframes FIRST-BANNER {
  0%   { opacity: 1;height: auto; }
  33% { opacity: 0;height: 0; }
}

@-webkit-keyframes SECOND-BANNER {
  0%   { opacity: 0;height: 0; }
  33% { opacity: 1;height: auto; }
  66% { opacity: 0;height: 0; }
}
@-moz-keyframes SECOND-BANNER {
  0%   { opacity: 0;height: 0; }
  33% { opacity: 1;height: auto; }
  66% { opacity: 0;height: 0; }
}
@-o-keyframes SECOND-BANNER {
  0%  { opacity: 0;height: 0; }
  33% { opacity: 1;height: auto; }
  66% { opacity: 0;height: 0; }
}
@keyframes SECOND-BANNER {
  0%   { opacity: 0;height: 0; }
  33% { opacity: 1;height: auto; }
  66% { opacity: 0;height: 0; }
}

@-webkit-keyframes THIRD-BANNER {
  0%   { opacity: 0;height: 0; }
  66% { opacity: 1;height: auto; }
}
@-moz-keyframes THIRD-BANNER {
  0%   { opacity: 0;height: 0; }
  66% { opacity: 1;height: auto; }
}
@-o-keyframes THIRD-BANNER {
  0%   { opacity: 0;height: 0; }
  66% { opacity: 1;height: auto; }
}
@keyframes THIRD-BANNER {
  0%   { opacity: 0;height: 0; }
  66% { opacity: 1;height: auto; }
}

#rotating-banner-container {
	display: flex;
  flex-direction: column;
}

#banner-1 {
  -webkit-animation: FIRST-BANNER 5s infinite; /* Safari 4+ */
  -moz-animation:    FIRST-BANNER 5s infinite; /* Fx 5+ */
  -o-animation:      FIRST-BANNER 5s infinite; /* Opera 12+ */
  animation:         FIRST-BANNER 5s infinite; /* IE 10+, Fx 29+ */
  animation-timing-function: step-end;
}
#banner-2 {
  -webkit-animation: SECOND-BANNER 5s infinite; /* Safari 4+ */
  -moz-animation:    SECOND-BANNER 5s infinite; /* Fx 5+ */
  -o-animation:      SECOND-BANNER 5s infinite; /* Opera 12+ */
  animation:         SECOND-BANNER 5s infinite; /* IE 10+, Fx 29+ */
  animation-timing-function: step-end;
}
#banner-3 {
  -webkit-animation: THIRD-BANNER 5s infinite; /* Safari 4+ */
  -moz-animation:    THIRD-BANNER 5s infinite; /* Fx 5+ */
  -o-animation:      THIRD-BANNER 5s infinite; /* Opera 12+ */
  animation:         THIRD-BANNER 5s infinite; /* IE 10+, Fx 29+ */
  animation-timing-function: step-end;
}
Viewing 1 replies (of 1 total)

The topic ‘Multiple Banners?’ is closed to new replies.