I would like to note that not all affiliate programs approve of such methods, for example, if this is done with the GoogleAds block, we will completely get an account ban.
The first thing we will do is add a css style that causes shake.
.shake {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
The second is the most common link with a picture. That is our regular banner
<a href="https://listnerds.com/@heavyhell" target="_blank" rel="nofollow noopener"><img class="shake" src="https://listnerds.com/banner/250x250/listnerds.png"></a>
Actually, that's all you need to do.
The result of our creativity can be seen on the test site.
It is extremely simple to do this, however, the number of clicks on a shaken banner is always several times higher than on a static banner. Actually, because of this, pay per click systems categorically disapprove of such methods. But for the rest - an acceptable method to draw attention to a particular proposal.
Naturally, if your entire page shakes, it will terribly annoy users, so keep a balance.