Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 18, 2016 at 11:51 am #674139
    Guenni007

    if you like to get rid of that spinning wheel and have an image rotation instead:

    On Enfold Options “Page Preloading” mark that element and upload your Image!
    The following code makes a continous rotation possible for that image.
    And the first rule removes the spinning wheel:

    .av-siteloader {
    display: none !important;
    visibility: hidden !important;
}

.av-preloading-logo {
animation-name: loaderimage;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: loaderimage;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: loaderimage;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-backface-visibility: visible
}
@keyframes loaderimage {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

 /* Firefox */
@-moz-keyframes loaderimage {
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

 /* Safari and Chrome */
@-webkit-keyframes loaderimage {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

    the animation-duration gives you the time for one cycle
    see it in action: webers-testseite.de/ikom/blog
    because the frontpage loads a bit faster goto blog to see it in action

    • This topic was modified 8 years, 4 months ago by Guenni007.
    August 18, 2016 at 4:19 pm #674221
    Guenni007

    as you see you only need a class or an id for that rotating trick!

    if you want f.e. that the icons in an icon-box (big icon at top) rotate once on hovering give the iconbox a class ( in my case: rotating_icon)

    (if you want that every iconbox react like this forget about custom css and make it for .iconbox_icon:hover )

    
.rotating_icon .iconbox_icon:hover{
animation-name: iconrotate;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: iconrotate;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: iconrotate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-play-state: running;
-webkit-backface-visibility: visible
}
@keyframes iconrotate
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
 
@-moz-keyframes iconrotate /* Firefox */
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
 
@-webkit-keyframes iconrotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
    • This reply was modified 8 years, 4 months ago by Guenni007.
    August 20, 2016 at 6:02 am #674918
    Rikard

    Thanks for sharing @Guenni007 :-)

    Cheers!
    Rikard

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.