Real-Time Love Meter

Developer
Yogev Ahuvia
Size
5,493 Kb
Views
26,312
  1. Real-Time Love Meter Previews
  2. Real-Time Love Meter HTML Codes
  3. Real-Time Love Meter CSS Codes
  4. Real-Time Love Meter JS Codes

How do I make an real-time love meter?

Experimenting with CodePen love by showing a love meter that updates using Ajax calls in real-time according to the love count of this pen on CodePen. Join the beat.. What is a real-time love meter? How do you make a real-time love meter? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Real-Time Love Meter Previews
IQ Test

Real-Time Love Meter - Script Codes HTML Codes

<!DOCTYPE html>
<html class="preload">
<head> <meta charset="UTF-8"> <title>Real-Time Love Meter</title> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .icon-heart, .lovers-count { color: #FF3D7F; text-shadow: 2px 2px 2px #FF9E9D; display: block; position: absolute; font-size: 150px; left: 50%;
}
.lovers-count { margin-left: 80px; opacity: 0;
}
.wrapper { position: relative; width: 150px; margin: 0 auto;
}
.wrapper > .icon-heart { margin-left: -75px;
}
.icon-heart.beat { animation-name: beat;
}
.heart { transition: transform 300ms;
}
.heart.beat { transition: transform 1s;
}
.lover { position: absolute; top: 50px; left: -175px; width: 500px; font-size: 0.5em; text-align: center; transition: top 1s;
}
.lover > .name, .lover > .avatar { display: block; opacity: 0;
}
.lover > .name { transition: font-size 1s, opacity 500ms;
}
.lover > .avatar { transition: opacity 500ms;
}
.lover > .avatar > img { width: 48px; border-radius: 5px; box-shadow: 0px 0px 2px 2px #FF9E9D;
}
.lover.beat { top: 20px; font-size: 2.5em;
}
.lover.beat .avatar, .lover.beat .name { opacity: 1;
}
body:not(.preload) { transition: font-size 300ms, top 300ms;
}
body:not(.preload) .lovers-count { transition: opacity 300ms; opacity: 1;
}
body.inlove .lovers-count { opacity: 0;
}
.top-left { width: 75px; height: 75px; position: absolute; overflow: hidden; top: 0; left: 0;
}
.top-left > .icon-heart { margin-left: -38px;
}
.top-left.beat { transform: translateX(-3000px) translateY(-500px) rotate(-135deg) scale(30);
}
.top-right { width: 80px; height: 75px; position: absolute; overflow: hidden; top: 0; left: 75px;
}
.top-right > .icon-heart { margin-left: -115px;
}
.top-right.beat { transform: translateX(3000px) translateY(-500px) rotate(135deg) scale(30);
}
.bottom { width: 150px; height: 75px; position: absolute; overflow: hidden; top: 75px; left: 0;
}
.bottom > .icon-heart { margin-top: -75px; margin-left: -75px;
}
.bottom.beat { transform: translateY(3000px) scale(10);
}
@keyframes beat { 0% { text-shadow: 0px 0px 0px rgba(255, 0, 0, 0.5); } 50% { text-shadow: 0px 0px 2000px rgba(255, 0, 0, 0.5); } 100% { text-shadow: 0px 0px 0px rgba(255, 0, 0, 0); }
}
body { text-align: center; padding-top: 50px; font-family: 'Open Sans', sans-serif; font-weight: 300; background: #e3e1bf; overflow: hidden;
}
h1, .lover { color: #FF9E9D; text-shadow: 2px 2px 2px #FF3D7F;
}
h1 { font-size: 2.5em; margin-bottom: 0.25em;
}
h3 { font-size: 1.5em; margin-bottom: 1.25em; color: #FF3D7F; text-shadow: 2px 2px 2px #FF9E9D;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Real-Time Love Meter</h1>
<h3>Join the beat. Love this pen :)</h3>
<h3 class="lovers-count"></h3>
<div class="main wrapper"> <div class="lover"> <span class="avatar"></span> <span class="name"></span> </div> <div class="heart top-left"> <i class="icon-heart"></i> </div> <div class="heart top-right"> <i class="icon-heart"></i> </div> <div class="heart bottom"> <i class="icon-heart"></i> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Real-Time Love Meter - Script Codes CSS Codes

.icon-heart, .lovers-count { color: #FF3D7F; text-shadow: 2px 2px 2px #FF9E9D; display: block; position: absolute; font-size: 150px; left: 50%;
}
.lovers-count { margin-left: 80px; opacity: 0;
}
.wrapper { position: relative; width: 150px; margin: 0 auto;
}
.wrapper > .icon-heart { margin-left: -75px;
}
.icon-heart.beat { animation-name: beat;
}
.heart { transition: transform 300ms;
}
.heart.beat { transition: transform 1s;
}
.lover { position: absolute; top: 50px; left: -175px; width: 500px; font-size: 0.5em; text-align: center; transition: top 1s;
}
.lover > .name, .lover > .avatar { display: block; opacity: 0;
}
.lover > .name { transition: font-size 1s, opacity 500ms;
}
.lover > .avatar { transition: opacity 500ms;
}
.lover > .avatar > img { width: 48px; border-radius: 5px; box-shadow: 0px 0px 2px 2px #FF9E9D;
}
.lover.beat { top: 20px; font-size: 2.5em;
}
.lover.beat .avatar, .lover.beat .name { opacity: 1;
}
body:not(.preload) { transition: font-size 300ms, top 300ms;
}
body:not(.preload) .lovers-count { transition: opacity 300ms; opacity: 1;
}
body.inlove .lovers-count { opacity: 0;
}
.top-left { width: 75px; height: 75px; position: absolute; overflow: hidden; top: 0; left: 0;
}
.top-left > .icon-heart { margin-left: -38px;
}
.top-left.beat { transform: translateX(-3000px) translateY(-500px) rotate(-135deg) scale(30);
}
.top-right { width: 80px; height: 75px; position: absolute; overflow: hidden; top: 0; left: 75px;
}
.top-right > .icon-heart { margin-left: -115px;
}
.top-right.beat { transform: translateX(3000px) translateY(-500px) rotate(135deg) scale(30);
}
.bottom { width: 150px; height: 75px; position: absolute; overflow: hidden; top: 75px; left: 0;
}
.bottom > .icon-heart { margin-top: -75px; margin-left: -75px;
}
.bottom.beat { transform: translateY(3000px) scale(10);
}
@keyframes beat { 0% { text-shadow: 0px 0px 0px rgba(255, 0, 0, 0.5); } 50% { text-shadow: 0px 0px 2000px rgba(255, 0, 0, 0.5); } 100% { text-shadow: 0px 0px 0px rgba(255, 0, 0, 0); }
}
body { text-align: center; padding-top: 50px; font-family: 'Open Sans', sans-serif; font-weight: 300; background: #e3e1bf; overflow: hidden;
}
h1, .lover { color: #FF9E9D; text-shadow: 2px 2px 2px #FF3D7F;
}
h1 { font-size: 2.5em; margin-bottom: 0.25em;
}
h3 { font-size: 1.5em; margin-bottom: 1.25em; color: #FF3D7F; text-shadow: 2px 2px 2px #FF9E9D;
}

Real-Time Love Meter - Script Codes JS Codes

/* Real-Time Love Meter Experiment © Yogev Ahuvia */
$(document).ready(function() { $body = $('body'); $heart = $('.heart'); $counter = $('.lovers-count'); $lover = $('.lover'); updateLoversCount(); setTimeout(function() { $body.removeClass('preload'); }, 300);
});
// fetche lovers data from server
// update counter and bpm
function updateLoversCount() { $.getJSON(url, function(response) { var $html = $(response.html); var count = $html.find('.user-name').length; // handle +1, -1 or same lovers count // load balance polling accordingly if (count > lovers) { polling /= 1.2; lovers = count; handleLatestLovers($html, count); beat(); } else if (count < lovers) { polling /= 1.2; lovers = count; // clean previousLoverName when unloved if (response.html.indexOf(previousLoverName) == -1) { previousLoverName = '-1'; } setBeatTimer(); } else { polling *= 1.2; } // update lovers count $counter.text(lovers); // setTimeout for next poll on the server setTimeout(function() { updateLoversCount(); }, polling); });
}
// resets timer with current bpm
function setBeatTimer() { beatTimer = setTimeout(function() { beat(); }, bpm);
}
// parse latest lover data
function handleLatestLovers($html, count) { var lover = $html.find('.user-name')[count-1]; var loverAvatar = $(lover).find('img')[0]; var loverName = $.trim($(lover).text()); if (loverName != previousLoverName) { // if it's not the first fetch // show Loved effect if (previousLoverName != '') { loved(loverName, loverAvatar); } previousLoverName = loverName; }
}
// Heart Loved effect
function loved(loverName, loverAvatar) { $body.addClass('inlove'); // update lover data in DOM $lover.find('.avatar').html(loverAvatar); $lover.find('.name').html(loverName); // clear stage for effect and do magic $('.effect.wrapper').remove(); $heart.addClass('beat'); $lover.addClass('beat'); // clear stage after transitions end setTimeout(function() { $heart.removeClass('beat'); $lover.removeClass('beat'); setTimeout(function() { $body.removeClass('inlove'); }, 2000); }, 3000);
}
// Heart Beat effect
function beat() { bpm = (60/(lovers/2)) * 1000; if (!$body.hasClass('inlove')) { var animDuration = (bpm > 3000 ? 3000 : bpm); var $newWrapper = $('<div class="effect wrapper"></div'); var $newHeart = $('<i class="icon-heart beat"></i>'); $newHeart.css('animation-duration', animDuration + 'ms'); // create shadow heart $newWrapper.append($newHeart) $('.main.wrapper').after($newWrapper); // setTimeout to remove the shadow heart later setTimeout(function() { $newWrapper.remove(); }, animDuration); } setBeatTimer();
}
// a few helpers
var $body, $heart, $counter, $lover;
var lovers = 0;
var polling = 1000;
var bpm = 0;
var beatTimer = null;
var previousLoverName = '';
var url = "http://kindofone.me/services/codepen-lovers.php";
Real-Time Love Meter - Script Codes
Real-Time Love Meter - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 4
Size 5,493 Kb
Views 26,312
Do you need developer help for Real-Time Love Meter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes
Name
Tears Of Happiness
Live Bricks
Subtle Buttons
CSS Filter Glass
CSS-Only Countdown Clock
Spinning Top
Reactive CSS Transitions
A Pen by Yogev Ahuvia
A Circular Form
Living Interfaces - Talk
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!