[Pro] Background Gradient Animator

Hello!
I got this from a recent blog and would really like to try it on a page’s background. I have tried all actions (modified BKgrnd SSize) and add/insert HTML, crowbar, and most any other similar tricks I could find under Background (Walter) and /or CSS. As Thomas commented in one post, there is some great gain to learning code, alas…

This is the code generated that I would like to add to one pages as a background (it doesn’t look complete- tacked on some tags as suggested in other posts), is it feasable?:

background: linear-gradient(33deg, #0c1c1c, #339999, #7d7d7d, #d2f900);
background-size: 800% 800%;

-webkit-animation: AnimationName 26s ease infinite;
-moz-animation: AnimationName 26s ease infinite;
-o-animation: AnimationName 26s ease infinite;
animation: AnimationName 26s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}

Thank you!
Frank


freewaytalk mailing list
email@hidden
Update your subscriptions at:

You can add this to the page by creating a tag in the Page / HTML Markup dialog. You just need to decide what object to apply these rules to. If you want this to apply to the entire page background, I would use either body or html as the selector. In the Page / HTML Markup dialog, move into the Before section of the dialog (using the picker at the bottom), and then type this:

<style type="text/css">
body {
(paste your style code here, replacing this line)
}
</style>

You can also use html in place of body above. Try both, and see which one you prefer.

Walter

On Sep 1, 2018, at 3:21 PM, Frank H email@hidden wrote:

Hello!
I got this from a recent blog and would really like to try it on a page’s background. I have tried all actions (modified BKgrnd SSize) and add/insert HTML, crowbar, and most any other similar tricks I could find under Background (Walter) and /or CSS. As Thomas commented in one post, there is some great gain to learning code, alas…

This is the code generated that I would like to add to one pages as a background (it doesn’t look complete- tacked on some tags as suggested in other posts), is it feasable?:

background: linear-gradient(33deg, #0c1c1c, #339999, #7d7d7d, #d2f900);
background-size: 800% 800%;

-webkit-animation: AnimationName 26s ease infinite;
-moz-animation: AnimationName 26s ease infinite;
-o-animation: AnimationName 26s ease infinite;
animation: AnimationName 26s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}

Thank you!
Frank

https://www.gradient-animator.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Actually, I made a tiny mistake previously. You don’t want to put all of this inside the body { } selector, just the first line down through the line that begins with the word animation. The rest of the code creates the shifting color effect, and needs to be outside of that selector. I tried this in a text editor, and it looks really good.

  <style type="text/css" media="screen">
    body {
      background: linear-gradient(33deg, #0c1c1c, #339999, #7d7d7d, #d2f900);
      background-size: 800% 800%;

      -webkit-animation: AnimationName 26s ease infinite;
      -moz-animation: AnimationName 26s ease infinite;
      -o-animation: AnimationName 26s ease infinite;
      animation: AnimationName 26s ease infinite;
    }

    @-webkit-keyframes AnimationName {
       0%{background-position:59% 0%}
       50%{background-position:42% 100%}
       100%{background-position:59% 0%}
    }
    @-moz-keyframes AnimationName {
       0%{background-position:59% 0%}
       50%{background-position:42% 100%}
       100%{background-position:59% 0%}
    }
    @-o-keyframes AnimationName {
       0%{background-position:59% 0%}
       50%{background-position:42% 100%}
       100%{background-position:59% 0%}
    }
    @keyframes AnimationName { 
       0%{background-position:59% 0%}
       50%{background-position:42% 100%}
       100%{background-position:59% 0%}
    }
  </style>

Walter

On Sep 1, 2018, at 3:30 PM, Walter Lee Davis email@hidden wrote:

You can add this to the page by creating a tag in the Page / HTML Markup dialog. You just need to decide what object to apply these rules to. If you want this to apply to the entire page background, I would use either body or html as the selector. In the Page / HTML Markup dialog, move into the Before section of the dialog (using the picker at the bottom), and then type this:

<style type="text/css">
body {
(paste your style code here, replacing this line)
}
</style>

You can also use html in place of body above. Try both, and see which one you prefer.

Walter

On Sep 1, 2018, at 3:21 PM, Frank H email@hidden wrote:

Hello!
I got this from a recent blog and would really like to try it on a page’s background. I have tried all actions (modified BKgrnd SSize) and add/insert HTML, crowbar, and most any other similar tricks I could find under Background (Walter) and /or CSS. As Thomas commented in one post, there is some great gain to learning code, alas…

This is the code generated that I would like to add to one pages as a background (it doesn’t look complete- tacked on some tags as suggested in other posts), is it feasable?:

background: linear-gradient(33deg, #0c1c1c, #339999, #7d7d7d, #d2f900);
background-size: 800% 800%;

-webkit-animation: AnimationName 26s ease infinite;
-moz-animation: AnimationName 26s ease infinite;
-o-animation: AnimationName 26s ease infinite;
animation: AnimationName 26s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}
@keyframes AnimationName {
0%{background-position:59% 0%}
50%{background-position:42% 100%}
100%{background-position:59% 0%}
}

Thank you!
Frank

https://www.gradient-animator.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thank you so much Walter!
After playing with the markup some more, I hit on after and the whole code to make it work. I was a bit embarrassed when your first response was perhaps verbatim one you had given in response to another CSS issue - I just wasn’t getting results. One of the problems was to place the background before (rather than after) some JS code already existing in the box.

I really appreciate your help and am pleased with the results.
If your interested, see it here:

https://goo.gl/ccJR4y

Thanks again.
Frank Harshbarger
email@hidden

On Sep 1, 2018, at 12:58 PM, Walter Lee Davis email@hidden wrote:

Actually, I made a tiny mistake previously. You don’t want to put all of this inside the body { } selector, just the first line down through the line that begins with the word animation. The rest of the code creates the shifting color effect, and needs to be outside of that selector. I tried this in a text editor, and it looks really good.

 <style type="text/css" media="screen">
   body {
     background: linear-gradient(33deg, #0c1c1c, #339999, #7d7d7d, #d2f900);
     background-size: 800% 800%;

     -webkit-animation: AnimationName 26s ease infinite;
     -moz-animation: AnimationName 26s ease infinite;
     -o-animation: AnimationName 26s ease infinite;
     animation: AnimationName 26s ease infinite;
   }

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options