Hi Nick
it is not as easy as u think.
It is this junk of code to do this small animation:
JS:
<script>
$(function(){
setTimeout(function () {
$("#benefits-typed").css('background-color', 'rgb(59, 109, 223)');
$("#benefits-typed").css('border-right', 'none');
$("#benefits-typed").css('border-left', '2px solid white');
setTimeout(function () {
$("#benefits-typed").css('border-left', 'none');
$("#benefits-typed").css('border-right', '2px solid white');
$("#benefits-typed").hide()
$("#blink-fix").show()
},500)
},3500)
$("#benefits-typed").typed({
strings: [
"profitable",
"painless",
"optimized",
"quick & easy",
"stress-free",
],
typeSpeed: 60,
backSpeed: 1,
backDelay: 3000,
loop : true,
loopCount: false,
startDelay: 4000,
// starting callback function before each string
preStringTyped: function() {
$("#benefits-typed").css('background-color', 'transparent')
$("#blink-fix").hide()
$("#benefits-typed").show()
},
//callback for every typed string
onStringTyped: function() {
setTimeout(function () {
$("#benefits-typed").css('background-color', 'rgb(59, 109, 223)');
$("#benefits-typed").css('border-right', 'none');
$("#benefits-typed").css('border-left', '2px solid white');
setTimeout(function () {
$("#benefits-typed").css('border-left', 'none');
$("#benefits-typed").css('border-right', '2px solid white');
$("#benefits-typed").hide()
$("#blink-fix").show()
}, 400+(Math.random()*400))
}, 1400+(Math.random()*400))
}
});
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$($(this).attr('href')).offset().top}, 500);
});
$('.tooltip-target.target-1').qtip({
content: {
text: $('.tooltip-1-content')
},
show: {
event: 'show-tooltip',
delay: 250,
effect: function(offset) {
//$(this).show()
$(this).fadeIn(0); // "this" refers to the tooltip
$(this).addClass('animated bounceIn');
},
},
hide: {
fixed: true,
leave: false,
delay: 1000000000
},
position: {
my: 'top center', // Position my top left...
at: 'bottom center', // at the bottom right of...
},
style: {
tip: {
corner: true,
width: 20,
height: 8,
}
}
});
$('.tooltip-target.target-2').qtip({
content: {
text: $('.tooltip-2-content')
},
show: {
//ready : trye
event: 'show-tooltip',
delay: 500,
effect: function(offset) {
$(this).fadeIn(0); // "this" refers to the tooltip
$(this).addClass('animated bounceIn');
}
},
hide: {
fixed: true,
leave: false,
delay: 1000000000
},
position: {
my: 'top center', // Position my top left...
at: 'bottom center', // at the bottom right of...
},
style: {
tip: {
corner: true,
width: 20,
height: 8,
}
}
});
$('.tooltip-target.target-3').qtip({
content: {
text: $('.tooltip-3-content')
},
show: {
event: 'show-tooltip',
delay: 0,
effect: function(offset) {
$(this).fadeIn(0); // "this" refers to the tooltip
$(this).addClass('animated bounceIn');
}
},
hide: {
fixed: true,
leave: false,
delay: 1000000000
},
position: {
my: 'top center', // Position my top left...
at: 'bottom center', // at the bottom right of...
},
style: {
tip: {
corner: true,
width: 20,
height: 8,
}
}
});
$( window ).resize(function() {
placeTooltips()
});
placeTooltips()
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function() {
$('.tooltip-target').trigger('show-tooltip')
},
offset: 500
})
});
function placeTooltips(){
var img = $('.interface-image');
var img_width = img.width();
var img_height = img.height();
var image_position = img.position();
var new_css_1 = {
top : img_height * 0.145,
left : img_width * 0.92 + image_position.left
}
var new_css_2 = {
top : img_height * 0.89,
left : img_width * 0.44 + image_position.left
}
var new_css_3 = {
top : img_height * 0.13,
left : img_width * 0.185 + image_position.left
}
$('.target-1').css(new_css_1)
$('.target-2').css(new_css_2)
$('.target-3').css(new_css_3)
}
setTimeout(function () {
$(window).trigger('resize');
}, 1000)
</script>
…..and CSS:
<style>
.typed-cursor{
display:none;
}
.home-cta {
cursor:pointer;
}
.home-cta:hover {
color:white;
}
.scroll-arrow {
-webkit-animation: scrollstrobe 1.5s infinite;
-moz-animation: scrollstrobe 1.5s infinite;
animation: scrollstrobe 1.5s infinite;
}
#blink-fix{
border-left : 2px solid white;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#benefits-typed{
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { border-color:white; }
50% { border-color:transparent; }
100% { border-color:white; }
}
.interface {
position: relative;
}
.qtip {
background-color : #21B171;
color: white;
text-align :center;
border : none;
border-color : #21B171;
}
.tooltip-content {
display: none;
}
.tooltip-target.target-1, .tooltip-target.target-2, .tooltip-target.target-3{
position: absolute;
/*background-color: pink;*/
top : 50px;
left:100px;
height:10px;
width:10px;
border-radius: 999px;
}
.animated {
animation-duration: 0.3s !important;
}
.tooltip-icon {
display: none;
/*width:120px;*/
/*height:120px;*/
/*border-right:1px solid #F5F5F8;*/
float : left;
padding:20px;
}
.tooltip-description {
/*height:120px;*/
/*border:1px solid #F5F5F8;*/
border-left:none;
/*float:left;*/
}
.tooltip-header {
font-family: "Exo 2", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0px;
font-size:12px;
padding-top:25px;
text-align: center;
}
.tooltip-subheader {
text-align: center;
/*padding-left:30px;*/
padding-top:14px;
padding-bottom:25px;
padding-right:25px;
padding-left:25px;
font-size :11px;
line-height : 17px;
}
</style>
You would have to fit it to your classes and IDs
Cheers
TR
