Add Random Sticker to Page on Click
A fun unique way of adding a random sticker to your Webflow site on click.
A fun unique way of adding a random sticker to your Webflow site on click.
How to add it
- Add the CSS code snippet to the head section of your custom code settings
- Add the Javascript code to your closing body tag
- Update the class names to your relevant classes
The code
Javascript
<!-- Add to closing body section -->
<script>
// © Code by T.RICKS, https://www.tricksdesign.com/
// Copyright 2020, T.RICKS, All rights reserved.
// You have the license to use this code in your projects but not to redistribute it to others
var lastEq = $( ".tricks-stickers .tricks-sticker" ).length - 1;
var stickerEq = -1;
$( "body" ).click(function(e) {
if (stickerEq == lastEq) {
stickerEq = 0;
} else {
stickerEq++;
};
var tricksSticker = $( ".tricks-stickers .tricks-sticker" ).eq(stickerEq).clone().appendTo( ".overflow" );
var marginLeft = e.pageX - (tricksSticker.width() / 2);
var marginTop = e.pageY - (tricksSticker.height() / 2);
tricksSticker.css({'margin-left': marginLeft, 'margin-top': marginTop, 'transform': 'scale(1, 1)'});
// Wait before playing animation
setTimeout(() => {
tricksSticker.addClass('sticker-hide');
}, 2000);
});
</script>
CSS
<!-- Add to header settings -->
<style>
.tricks-stickers {
display: none !important;
}
.tricks-sticker {
position: absolute !important;
left: 0% !important;
top: 0% !important;
z-index: 9999999 !important;
pointer-events: none; !important;
transform: scale(0.8, 0.8);
transition-property: transform;
transition-duration: 200ms;
transition-timing-function: ease;
}
.sticker-hide {
transform: scale(0, 0) !important;
}
.overflow {
overflow: hidden !important;
position: relative !important;
}
</style>
