IP.Board Tutorials
How to make a moving IPS logo
Submitted by erevan, 25-04-2018, 01:18 AM, Thread ID: 85957
Thread Closed
make you logo move side to side when mouse over
Personalization -> Styles -> Your Style -> Click on </>, then click Templates and in the search bar, search for the logo.
Change:
replace:
with:
Personalization -> Styles -> Your style -> Click on </>, then click CSS and in the search bar, search for custom.css.
Only added code:
Pretty untypical and easy way but it works.
Personalization -> Styles -> Your Style -> Click on </>, then click Templates and in the search bar, search for the logo.
Change:
replace:
Code:
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>with:
Code:
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}' class="brand buzz-out" ></a>Personalization -> Styles -> Your style -> Click on </>, then click CSS and in the search bar, search for custom.css.
Code:
.buzz{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}
.buzz:hover,.buzz:focus,.buzz:active{
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:0.15s;
animation-duration:0.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}
@-webkit-keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}
100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}
}
@keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}
100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}
}
.buzz-out{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}
.buzz-out:hover,.buzz-out:focus,.buzz-out:active{
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.75s;
animation-duration:0.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}Only added code:
Code:
class="brand buzz-out"Pretty untypical and easy way but it works.
Users browsing this thread: 1 Guest(s)