Tinder

Developer
Renato Ribeiro
Size
7,391 Kb
Views
12,144
  1. Tinder Previews
  2. Tinder HTML Codes
  3. Tinder CSS Codes
  4. Tinder JS Codes

How do I make an tinder?

Trying to simulate tinder animations o/. What is a tinder? How do you make a tinder? This script and codes were developed by Renato Ribeiro on 17 November 2022, Thursday.

Tinder Previews
IQ Test

Tinder - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tinder</title> <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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
*, *:before, *:after { box-sizing: border-box;
}
a { text-decoration: none; color: #333;
}
body { background: #eee;
}
#phone { width: 320px; height: 560px; background: #dfdfdf; margin: 0 auto; border-radius: 25px; position: relative; top: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#phone:before, #phone:after { content: ''; display: block; position: absolute; background: #d3d3d3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(255, 255, 255, 0.25);
}
#phone:after { left: calc(50% - 20px); bottom: 15px; width: 40px; height: 40px; border-radius: 50%;
}
#phone:before { left: calc(50% - 20px); top: 30px; height: 10px; width: 50px; border-radius: 10px;
}
#app { overflow: hidden; background: #FFF; width: 280px; height: 420px; position: absolute; top: calc(50% - 210px); left: calc(50% - 140px);
}
#app .header { height: 50px; margin-bottom: 10px; background: #f6f6f6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-align: center; font: 18px "Open Sans"; line-height: 30px; font-weight: 300; color: #ddd;
}
#app .header .top { height: 16px; position: relative; font-family: "Open Sans"; font-size: 8px; line-height: 16px; color: #666; text-transform: uppercase; font-weight: 600;
}
#app .header .top .left { position: absolute; top: 0; left: 5px;
}
#app .header .top .center { text-align: center; font-size: 10px;
}
#app .header .top .right { position: absolute; top: 0; right: 5px;
}
#app .header #battery { border: 1px solid #999; border-radius: 2px; height: 10px; width: 20px; position: relative; display: inline-block; margin-left: 2px; margin-right: 2px; right: 0; top: 2px;
}
#app .header #battery:before { content: ''; display: block; width: 75%; height: 100%; background: #4d4; border: 1px solid transparent;
}
#people, .person { width: 250px; height: 265px;
}
#people { position: relative; margin: 0 auto;
}
.person { position: absolute; background-color: transparent; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); transition: all .1s linear;
}
.person:nth-child(1) { z-index: 5;
}
.person:nth-child(2) { z-index: 4; top: 7px; transform: scale(0.98);
}
.person:nth-child(3) { z-index: 3; top: 14px; transform: scale(0.96);
}
.person:nth-child(n+4) { z-index: 2; transform: scale(0.7);
}
.person:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: '';
}
.person img { width: 105%; background: white;
}
.person span { position: absolute; bottom: 0; left: 0; background: white; width: 100%; padding: 10px; font: 16px "Open Sans"; line-height: 30px; color: #555;
}
.person span strong { font-weight: 600; color: #000;
}
@keyframes yes { 0% { transform: scale(1) rotateZ(0deg); left: 0; } 30% { transform: scale(1.05) rotateZ(0deg); left: 0; } 100% { transform: rotateZ(45deg); left: 400px; }
}
.animateYes { animation-fill-mode: both; animation: yes 0.6s linear;
}
.animateYes:before { transform: rotateZ(-35deg); background: url(https://i.imgur.com/Zkwj970.png) no-repeat center 10px;
}
@keyframes no { 0% { transform: rotateZ(360deg); right: 0; } 30% { transform: scale(1.05) rotateZ(360deg); right: 0; } 100% { transform: rotateZ(315deg); right: 400px; }
}
.animateNo { animation-fill-mode: both; animation: no 0.6s linear;
}
.animateNo:before { transform: rotateZ(35deg); background: url(https://i.imgur.com/XqQZ4KR.png) no-repeat center 10px;
}
#control { position: relative; margin: 15px auto 0; width: 250px;
}
#control .button { width: 65px; height: 65px; background: #eee; position: absolute; top: 5px; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
#control .button .trigger { background: white; display: block; border-radius: 50%; width: 75%; height: 75%; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); transition: all .1s; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#control .button .trigger:active { transform: translateY(-50%) scale(0.75); transition: all .05s linear;
}
#control .button .trigger:before { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); font-family: 'FontAwesome';
}
#control .no { left: 38px;
}
#control .no .trigger:before { content: "\f00d"; font-size: 28px; color: #c33;
}
#control .yes { right: 38px;
}
#control .yes .trigger:before { content: "\f004"; font-size: 22px; color: #3b7;
}
#control .info { left: calc(50% - 23px); top: 17px; height: 46px; width: 46px;
}
#control .info .trigger { width: 65%; height: 65%;
}
#control .info .trigger:before { content: "\f05a"; font-size: 16px; color: #3498db;
}
#copy { font: 12px "Open Sans"; color: #ccc; position: fixed; top: 5px; left: 5px;
}
#copy a { color: #aaa;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="phone"> <div id="app"> <div class="header"> <div class="top"> <span class="left"> <span class="fontawesome-circle"></span> <span class="fontawesome-circle"></span> <span class="fontawesome-circle-blank"></span> <a href="http://rena.to" target="_blank">rena.to</a> <span class="fontawesome-signal"></span> </span> <span class="center clock"></span> <span class="right"> <span>75%</span> <div id="battery"></div> <span class="fontawesome-bolt"></span> </span> </div> </div> <div id="people"></div> <div id="control"> <div class="button no"> <a href="#" class="trigger"></a> </div> <div class="button info"> <a href="#" class="trigger"></a> </div> <div class="button yes"> <a href="#" class="trigger"></a> </div> </nav> </div> </div>
</div>
<div id="copy"> created by <a href="http://rena.to" target="_blank">rena.to</a>
</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>

Tinder - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
*, *:before, *:after { box-sizing: border-box;
}
a { text-decoration: none; color: #333;
}
body { background: #eee;
}
#phone { width: 320px; height: 560px; background: #dfdfdf; margin: 0 auto; border-radius: 25px; position: relative; top: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#phone:before, #phone:after { content: ''; display: block; position: absolute; background: #d3d3d3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(255, 255, 255, 0.25);
}
#phone:after { left: calc(50% - 20px); bottom: 15px; width: 40px; height: 40px; border-radius: 50%;
}
#phone:before { left: calc(50% - 20px); top: 30px; height: 10px; width: 50px; border-radius: 10px;
}
#app { overflow: hidden; background: #FFF; width: 280px; height: 420px; position: absolute; top: calc(50% - 210px); left: calc(50% - 140px);
}
#app .header { height: 50px; margin-bottom: 10px; background: #f6f6f6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-align: center; font: 18px "Open Sans"; line-height: 30px; font-weight: 300; color: #ddd;
}
#app .header .top { height: 16px; position: relative; font-family: "Open Sans"; font-size: 8px; line-height: 16px; color: #666; text-transform: uppercase; font-weight: 600;
}
#app .header .top .left { position: absolute; top: 0; left: 5px;
}
#app .header .top .center { text-align: center; font-size: 10px;
}
#app .header .top .right { position: absolute; top: 0; right: 5px;
}
#app .header #battery { border: 1px solid #999; border-radius: 2px; height: 10px; width: 20px; position: relative; display: inline-block; margin-left: 2px; margin-right: 2px; right: 0; top: 2px;
}
#app .header #battery:before { content: ''; display: block; width: 75%; height: 100%; background: #4d4; border: 1px solid transparent;
}
#people, .person { width: 250px; height: 265px;
}
#people { position: relative; margin: 0 auto;
}
.person { position: absolute; background-color: transparent; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); transition: all .1s linear;
}
.person:nth-child(1) { z-index: 5;
}
.person:nth-child(2) { z-index: 4; top: 7px; transform: scale(0.98);
}
.person:nth-child(3) { z-index: 3; top: 14px; transform: scale(0.96);
}
.person:nth-child(n+4) { z-index: 2; transform: scale(0.7);
}
.person:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: '';
}
.person img { width: 105%; background: white;
}
.person span { position: absolute; bottom: 0; left: 0; background: white; width: 100%; padding: 10px; font: 16px "Open Sans"; line-height: 30px; color: #555;
}
.person span strong { font-weight: 600; color: #000;
}
@keyframes yes { 0% { transform: scale(1) rotateZ(0deg); left: 0; } 30% { transform: scale(1.05) rotateZ(0deg); left: 0; } 100% { transform: rotateZ(45deg); left: 400px; }
}
.animateYes { animation-fill-mode: both; animation: yes 0.6s linear;
}
.animateYes:before { transform: rotateZ(-35deg); background: url(https://i.imgur.com/Zkwj970.png) no-repeat center 10px;
}
@keyframes no { 0% { transform: rotateZ(360deg); right: 0; } 30% { transform: scale(1.05) rotateZ(360deg); right: 0; } 100% { transform: rotateZ(315deg); right: 400px; }
}
.animateNo { animation-fill-mode: both; animation: no 0.6s linear;
}
.animateNo:before { transform: rotateZ(35deg); background: url(https://i.imgur.com/XqQZ4KR.png) no-repeat center 10px;
}
#control { position: relative; margin: 15px auto 0; width: 250px;
}
#control .button { width: 65px; height: 65px; background: #eee; position: absolute; top: 5px; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
#control .button .trigger { background: white; display: block; border-radius: 50%; width: 75%; height: 75%; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); transition: all .1s; text-align: center; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#control .button .trigger:active { transform: translateY(-50%) scale(0.75); transition: all .05s linear;
}
#control .button .trigger:before { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); font-family: 'FontAwesome';
}
#control .no { left: 38px;
}
#control .no .trigger:before { content: "\f00d"; font-size: 28px; color: #c33;
}
#control .yes { right: 38px;
}
#control .yes .trigger:before { content: "\f004"; font-size: 22px; color: #3b7;
}
#control .info { left: calc(50% - 23px); top: 17px; height: 46px; width: 46px;
}
#control .info .trigger { width: 65%; height: 65%;
}
#control .info .trigger:before { content: "\f05a"; font-size: 16px; color: #3498db;
}
#copy { font: 12px "Open Sans"; color: #ccc; position: fixed; top: 5px; left: 5px;
}
#copy a { color: #aaa;
}

Tinder - Script Codes JS Codes

$('a[href*=#]').click(function(){ return false;
});
var animationEndEvent = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var Person = { wrap: $('#people'), people: [ { name: 'Linda', age: 25, img: "https://i.imgur.com/QZuGC10.jpg" }, { name: 'Lisa', age: 20, img: "https://i.imgur.com/1EWwp59.jpg" }, { name: 'Sandra', age: 18, img: "https://i.imgur.com/Lu3laIj.jpg" }, { name: 'Chloe', age: 18, img: "https://i.imgur.com/WgYIxhw.png" }, { name: 'Alexa', age: 23, img: "https://i.imgur.com/D0PQegY.png" }, { name: 'Maria', age: 21, img: "https://i.imgur.com/eqd5IhH.jpg" }, { name: 'Emma', age: 24, img: "https://i.imgur.com/4F9NXPo.png" }, { name: 'Sara', age: 18, img: "http://i40.tinypic.com/ofxe21.jpg" }, { name: 'Lara', age: 22, img: "https://i.imgur.com/HMkdN6A.jpg" } ], add: function(){ var random = this.people[Math.floor(Math.random() * this.people.length)]; this.wrap.append("<div class='person'><img alt='" + random.name + "' src='" + random.img + "' /><span><strong>" + random.name + "</strong>, " + random.age + "</span></div>"); }
}
var App = { yesButton: $('.button.yes .trigger'), noButton: $('.button.no .trigger'), blocked: false, like: function(liked){ var animate = liked ? 'animateYes' : 'animateNo'; var self = this; Person.add(); if (!this.blocked) { this.blocked = true; $('.person').eq(0).addClass(animate).one(animationEndEvent, function() { $(this).remove(); self.blocked = false; }); } }
};
var Phone = { wrap: $('#phone'), clock: $('.clock'), updateClock: function() { var date = new Date(); var hours = date.getHours(); var min = date.getMinutes(); hours = (hours < 10 ? "0" : "") + hours; min = (min < 10 ? "0" : "") + min; var str = hours + ":" + min; this.clock.text(str); }
}
App.yesButton.on('mousedown', function() { App.like(true);
});
App.noButton.on('mousedown', function() { App.like(false);
});
$(document).ready(function() { Person.people.forEach(function(person){ new Image().src = person.img; }); Phone.updateClock(); setInterval('Phone.updateClock()', 1000); Person.add(); Person.add(); Person.add(); Person.add();
});
Tinder - Script Codes
Tinder - Script Codes
Home Page Home
Developer Renato Ribeiro
Username renatorib
Uploaded November 17, 2022
Rating 4
Size 7,391 Kb
Views 12,144
Do you need developer help for Tinder?

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!

Renato Ribeiro (renatorib) Script Codes
Name
Responsive Grid Proportion
Three Bullets Spinning
HTML5 Input Types
Pulsing balls
Orbit
Mouse balls animation
Animate.css Exemplo 2
Slide Actions List
The most useless balloons game
Animate.css Exemplo 1
Create amazing web content 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!