Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 14, 2015 17:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/96d7a03bcedd66663b72 to your computer and use it in GitHub Desktop.
Save anonymous/96d7a03bcedd66663b72 to your computer and use it in GitHub Desktop.
Download ZIP
polymer // source http://jsbin.com/xiyane
Raw
index.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>
<dom-module id="my-styled-namecard">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800)"/>
<style>
/* This would be crazy in non webcomponents. */
#ctr {
font-size: 16px;
line-height: 22px;
color: #555;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
.my-styled-namecard li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
height: 240px;
float: left;
width: 20%;
margin-bottom: 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.my-styled-namecard .sf-wrap {
background-repeat: no-repeat;
position: absolute;
max-width: 280px;
width: 100%;
height: 100%;
left: 50%;
margin-left: -140px;
top: 0;
-moz-perspective: 600px;
-webkit-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
cursor: pointer;
}
.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
overflow: hidden;
}
.sf-icon {
position: absolute;
top: 30px;
text-align: center;
width: 100%;
left: 0;
width: 200%;
color: #e4610e;
}
.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
color: #fff;
}
.sf-mdl-right,
.sf-mdl-right-full {
left: auto;
right: 0;
}
.sf-mdl-left-full,
.sf-mdl-right-full {
background-color: #333;
z-index: 9;
color: #fff;
}
.sf-wrap a {
color: #e4610e;
text-decoration: none;
}
.sf-mdl-left,
.sf-mdl-right {
background-color: #fff;
z-index: 10;
}
.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
background-position: right -30px;
}
.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
-moz-backface-visibility: hidden;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0 0;
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(0deg);
-o-backface-visibility: hidden;
-o-transform-style: preserve-3d;
-o-transform-origin: 0 0;
-o-transform: rotateY(0deg);
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: 0 0;
transform: rotateY(0deg);
}
.sf-wrap.hover > .sf-mdl-right {
-webkit-transform: rotateY(-45deg);
-moz-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
-o-transform: rotateY(-45deg);
transform: rotateY(-45deg);
background-color: #ececec;
}
.sf-wrap > .sf-mdl-left-full {
-moz-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.sf-wrap.active > .sf-mdl-left-full {
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
z-index: 11;
}
.sf-wrap div h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 22px;
}
.sf-wrap div h3,
.sf-wrap div p {
width: 200%;
position: absolute;
text-align: center;
left: 0;
top: 140px;
}
.sf-wrap div p {
padding: 0 10%;
line-height: 18px;
font-size: 13px;
top: 170px;
}
.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon
{
left: auto;
right: 0;
}
.sf-wrap div.sf-mdl-left-full h3,
.sf-wrap div.sf-mdl-right-full h3 {
top: 115px;
}
</style>
<template>
<div id="ctr">
<div class="row">
<ul>
<li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
<div id="sfwrapid" class="sf-wrap">
<div class="sf-mdl-left" style="text-align:right;">
<div class="sf-icon" >
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">[[data.d1]]</a></h3>
</div>
<div class="sf-mdl-right" style="text-align:left;">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">[[data.d2]]</a></h3>
</div>
<div class="sf-mdl-left-full" >
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">[[data.f1]]</a></h3>
<p>[[data.f2]]</p>
</div>
<div class="sf-mdl-right-full" style="text-align:left;">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">[[data.f3]]</a></h3>
<p>[[data.f4]]</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
Polymer({
is: 'my-styled-namecard',
properties: {
data:{
type:Object,
value: {
d1:"ml" ,d2:"mr",
f1: "ls-" ,f2: "ld+",
f3: "lr-",f4: "rd+"
}
},
myName: {
type: String
}
},
attached :function(){
var sfwrapel = $(this.$.sfwrapid);
sfwrapel.hover(function() {
// debugger;
sfwrapel.addClass('hover');
}, function() {
sfwrapel.removeClass('hover');
}).click(function(event) {
sfwrapel.toggleClass('active');
});
}
});
</script>
</dom-module>
<!-- using the element -->
<my-styled-namecard my-name="Jesse"></my-styled-namecard>
<my-styled-namecard my-name="Saurabh"></my-styled-namecard>
<br/>
<!-- <x-test name='Achin'></x-test> -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment