VIEW LIVE DEMO
{{ require_js("https://cdn.jsdelivr.net/npm/enhanced-bind-polyfill@0.0.2/index.min.js", "head") }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js", "head") }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js", "head") }}
{% require_css %}
<style>
.belch-sticky-social-super-container .bsssc-trigger {
background: {{ module.social_trigger_background_color.color }};
fill: {{ module.social_trigger_icon_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon a {
fill: {{ module.icon_1_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon.bsssc-icon-1 {
background: {{ module.icon_1_background_color.color }};
fill: {{ module.icon_1_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon.bsssc-icon-2 a {
fill: {{ module.icon_2_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon.bsssc-icon-2 {
background: {{ module.icon_2_background_color.color }};
fill: {{ module.icon_2_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon.bsssc-icon-3 a {
fill: {{ module.icon_3_color.color }};
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon.bsssc-icon-3 {
background: {{ module.icon_3_background_color.color }};
fill: {{ module.icon_3_color.color }};
}
</style>
{% end_require_css %}
<div class="belch-sticky-social-super-container">
<div class="bsssc-inner">
<div class="bsssc-trigger">
{% icon
name="{{ module.social_trigger_icon.name }}"
style="{{ module.social_trigger_icon.type }}"
unicode="{{ module.social_trigger_icon.unicode }}"
%}
</div>
<div class="bsssc-social">
<div class="bsssc-social-pseudo-trigger"></div>
<div class="bsssc-social-inner">
<div class="bsssc-icon bsssc-icon-1">
<a href="{{ module.icon_1_link }}" target="_blank" class="bsssc-a"> </a>
{% icon
name="{{ module.social_icon_1.name }}"
style="{{ module.social_icon_1.type }}"
unicode="{{ module.social_icon_1.unicode }}"
%}
</div>
<div class="bsssc-icon bsssc-icon-2">
<a href="{{ module.icon_2_link }}" target="_blank" class="bsssc-a"> </a>
{% icon
name="{{ module.social_icon_2.name }}"
style="{{ module.social_icon_2.type }}"
unicode="{{ module.social_icon_2.unicode }}"
%}
</div>
<div class="bsssc-icon bsssc-icon-3">
<a href="{{ module.icon_3_link }}" target="_blank" class="bsssc-a"> </a>
{% icon
name="{{ module.social_icon_3.name }}"
style="{{ module.social_icon_3.type }}"
unicode="{{ module.social_icon_3.unicode }}"
%}
</div>
</div>
</div>
</div>
</div>
.belch-sticky-social-super-container {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 214748363;
}
.belch-sticky-social-super-container .bsssc-inner {
position: relative;
}
.belch-sticky-social-super-container .bsssc-trigger {
position: relative;
z-index: 2;
width: 25px;
height: 25px;
padding: 20px;
background: red;
border-radius: 105px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
fill: white;
cursor: pointer;
border: 1px solid white;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
box-sizing: content-box !important;
}
.belch-sticky-social-super-container .bsssc-trigger:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}
.belch-sticky-social-super-container .bsssc-social {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: 0;
height: 0;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon a {
color: inherit;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon {
width: 20px;
height: 20px;
padding: 13px;
background: red;
border-radius: 105px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.22);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.22);
fill: white;
cursor: pointer;
position: absolute;
overflow: hidden;
border: 1px solid white;
box-sizing: content-box !important;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-a {
background: transparent !important;
color: transparent !important;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon-1 {
top: -133px;
left: -52px;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon-2 {
top: -111px;
left: -118px;
}
.belch-sticky-social-super-container .bsssc-social .bsssc-icon-3 {
top: -46px;
left: -135px;
}
.belch-sticky-social-super-container .bsssc-social-pseudo-trigger {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 0;
}
.belch-sticky-social-super-container .bsssc-social-pseudo-trigger.open {
top: -160px;
left: -160px;
width: 180px;
height: 180px;
}
var belchbsssc_ = (function(){
return {
container: ".belch-sticky-social-super-container",
icons: ".bsssc-icon",
trigger: ".belch-sticky-social-super-container .bsssc-trigger",
pseudoTrigger: ".belch-sticky-social-super-container .bsssc-social-pseudo-trigger",
init: function(){
window.$(this.container).closest('.widget-span').css({'min-height': 0});
this.timeline = new TimelineMax({
paused: true
});
this.initAnimation();
this.createListeners();
},
initAnimation: function(){
this.timeline.staggerFrom(this.icons, .4, {
opacity: 0,
top: "-45px",
left: "-45px",
ease: Back.easeOut.config(1.7)
}, 0.1);
},
createListeners: function(){
window.$(this.trigger).on('mouseenter', function(){
window.$(this.pseudoTrigger).addClass('open');
this.play();
}.bind(this));
window.$(this.pseudoTrigger).on('mouseleave', function(e){
var toEl = e.toElement || e.relatedTarget;
if(typeof toEl != typeof undefined){
if(window.$(toEl).hasClass("bsssc-icon") || window.$(toEl).hasClass("bsssc-a") || window.$(toEl).closest(".bsssc-a").length){
// TODO:
}else{
window.$(this.pseudoTrigger).removeClass('open');
this.reverse();
}
}
}.bind(this));
},
play: function(){
this.timeline.play();
},
reverse: function(){
this.timeline.reverse();
}
}
})();
$(function(){
belchbsssc_.init();
});
Add a Sticky Social Button to any page/template in your HubSpot CMS
How to use?
Just include this module anywhere, in any template/page.
What other features are there?
Screenshot
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield
Copyright © 2019 HubSpot, Inc.
Return to Top