CSS
.phone {
width: 350px;
height: 600px;
font-family: 'Noto Sans', sans-serif;
background: url(http://web.arjentienkamp.com/codepen/tinder/iphone.png);
background-size: 382px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 4em;
padding-top: 7em;
padding-left: 3.2em;
padding-right: 3.7em;
}
.app {
width: 285px;
height: 490px;
background-color: #FFF;
padding-top: 12px;
}
.content {
padding: 10px;
padding-top: 0px;
}
.header {
background-color: #FFF;
width:100%;
height:40px;
border-bottom: 1px solid #e2e2e2;
text-align: center;
margin-bottom: 10px;
}
.header img {
width:70px;
}
div.photo {
position:absolute;
display: block;
margin-left: auto;
margin-right: auto;
width:265px;
height:315px;
border:1px solid #a6a9aa;
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0px 1px 7px 0px #cfcfcf;
}
span.meta {
display: block;
height:48px;
background-color: #FFF;
margin-top: 267px;
border-radius: 0px 0px 8px 8px;
font-size: 18px;
box-sizing:border-box;
padding: 12px;
}
span.meta span {
float: right;
color:#cfcfcf;
}
.users {
display: block;
width: 20px;
background: url(http://web.arjentienkamp.com/codepen/tinder/users.png);
background-size: 20px;
background-repeat: no-repeat;
padding-left: 30px;
background-position: 5px;
}
.moments {
display: block;
width: 14px;
background: url(http://web.arjentienkamp.com/codepen/tinder/moments.png);
background-size: 26px;
background-repeat: no-repeat;
padding-left: 35px;
background-position: 5px;
}
.chat {
display: block;
width: 34px;
height: 30px;
background: url(http://web.arjentienkamp.com/codepen/tinder/chat.png);
background-size: 30px;
background-repeat: no-repeat;
padding-left: 4px;
background-position: 5px;
float: right;
margin-top: 0px;
}
.settings {
display: block;
width: 34px;
height: 30px;
background: url(http://web.arjentienkamp.com/codepen/tinder/settings.png);
background-size: 30px;
background-repeat: no-repeat;
padding-left: 4px;
background-position: 5px;
float: left;
margin-top: 0px;
}
.footer {
margin-left: auto;
margin-right: auto;
margin-top: 318px;
width: 100%;
padding-left: 40px;
padding-top: 6px;
}
.rate {
width: 70px;
height:70px;
border-radius: 70px;
background: #FFF;
border: 5px solid #f0f0f0;
float: left;
box-shadow: 1px 1px 1px 0px #e9e9e9;
}
.rate:nth-child(1) {
margin-left: 4px;
background: url(http://web.arjentienkamp.com/codepen/tinder/delete.png);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
.rate:nth-child(3) {
margin-left: -4px;
background: url(http://web.arjentienkamp.com/codepen/tinder/heart.png);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
.info {
width: 40px;
height: 40px;
border-radius: 40px;
background: #FFF;
border: 5px solid #f0f0f0;
float: left;
box-shadow: 1px 1px 1px 0px #e9e9e9;
margin-top: 14px;
margin-left: -4px;
background: url(http://web.arjentienkamp.com/codepen/tinder/info.png);
background-size: 15px;
background-position: center;
background-repeat: no-repeat;
}
p {
padding:0;
margin:0;
float: left;
}
JAVASCRIPT
$(document).ready(function(event) {
$("div#swipe_like").on( "click", function() {
swipeLike();
});
$("div#swipe_dislike").on( "click", function() {
swipeDislike();
});
addNewProfile();
function swipe() {
Draggable.create("#photo", {
throwProps:true,
onDragEnd:function(endX) {
if(Math.round(this.endX) > 0 ) {
swipeLike();
}
else {
swipeDislike();
}
console.log(Math.round(this.endX));
}
});
}
function swipeLike() {
var $photo = $("div.content").find('#photo');
var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]});
swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=400", top:"+=300", rotation:"60"}], ease:Power1.easeInOut});
addNewProfile();
}
function swipeDislike() {
var $photo = $("div.content").find('#photo');
var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]});
swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=-350", top:"+=300", rotation:"-60"}], ease:Power1.easeInOut});
addNewProfile();
}
function remove(photo) {
$(photo).remove();
}
function addNewProfile() {
var names = ['Lieke', 'Christina', 'Sanne', 'Soraya', 'Chanella', 'Larissa', 'Michelle'][Math.floor(Math.random() * 7)];
var ages = ['19','22','18','27','21', '18', '24'][Math.floor(Math.random() * 7)]
var photos = ['1', '2', '3', '4', '5', '6', '7'][Math.floor(Math.random() * 7)]
$("div.content").prepend('<div class="photo" id="photo" style="background-image:url(http://web.arjentienkamp.com/codepen/tinder/photo'+photos+'.jpg)">'
+ '<span class="meta">'
+ '<p>'+names+', '+ages+'</p>'
+ '<span class="moments">0</span>'
+ '<span class="users">0</span>'
+ '</span>'
+ '</div>');
swipe();
}
});
1 Response
#tinder #datingApp #love
#cesarnog