LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Anne Hathaway

Click "Run" to see the animation input.

CSS
/*Today no sass*/

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #1f253d;
  font-family: 'Ubuntu', sans-serif;
}

.user-badge {
  background-color: #394165;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 300px;
  height: 406px;
  opacity: 0.01;
  -webkit-transform: translate(-50%, -50%) translateZ(0px) scaleY(0.2) scaleX(0.4) skew(20deg, 10deg);
          transform: translate(-50%, -50%) translateZ(0px) scaleY(0.2) scaleX(0.4) skew(20deg, 10deg);
  overflow: hidden;
  -webkit-animation: start 500ms 500ms ease-out forwards;
          animation: start 500ms 500ms ease-out forwards;
}

@-webkit-keyframes start {
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) translateZ(0px) scaleY(1) scaleX(1) skew(0deg, 0deg);
            transform: translate(-50%, -50%) translateZ(0px) scaleY(1) scaleX(1) skew(0deg, 0deg);
  }
}

@keyframes start {
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) translateZ(0px) scaleY(1) scaleX(1) skew(0deg, 0deg);
            transform: translate(-50%, -50%) translateZ(0px) scaleY(1) scaleX(1) skew(0deg, 0deg);
  }
}

.user-badge > .icon-mas {
  color: #9099b7;
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 1.5em;
}

.user-badge-avatar {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  border: 6px solid #50597b;
  border-radius: 100%;
  position: relative;
  margin: 43px auto 28px auto;
  width: 160px;
  height: 160px;
  opacity: 0.01;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: scale(0.2) translateZ(0px);
          transform: scale(0.2) translateZ(0px);
  overflow: hidden;
  -webkit-animation: avatar 450ms 700ms ease-out forwards;
          animation: avatar 450ms 700ms ease-out forwards;
}

@-webkit-keyframes avatar {
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0px);
            transform: scale(1) translateZ(0px);
  }
}

@keyframes avatar {
  100% {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0px);
            transform: scale(1) translateZ(0px);
  }
}

.user-badge-avatar img {
  border-radius: 100%;
  opacity: 0.01;
  width: 160px;
  -webkit-transition: opacity 1s 1s ease;
  transition: opacity 1s 1s ease;
}

.done {
  opacity: 1 !important;
}

.user-badge h1 {
  color: #fff;
  font-size: 1.5em;
  font-weight: 500;
  opacity: 0.01;
  -webkit-transition: opacity 1s 1.4s ease;
  transition: opacity 1s 1.4s ease;
}

.user-badge p {
  color: #9099b7;
  letter-spacing: 0.01em;
  font-size: 0.95em;
  padding: 0 2em;
  font-weight: 400;
  opacity: 0.01;
  -webkit-transition: opacity 1s 1.8s ease;
  transition: opacity 1s 1.8s ease;
}

.user-badge-nav {
  position: absolute;
  bottom: 0;
  line-height: 55px;
  width: 100%;
  height: 60px;
  -webkit-transform: translate3d(0px,80px,0px);
          transform: translate3d(0px,80px,0px);
  -webkit-transition: -webkit-transform 800ms 2.2s ease-out;
  transition: -webkit-transform 800ms 2.2s ease-out;
  transition: transform 800ms 2.2s ease-out;
  transition: transform 800ms 2.2s ease-out, -webkit-transform 800ms 2.2s ease-out;
}

.up {
  -webkit-transform: translate3d(0px,0px,0px);
          transform: translate3d(0px,0px,0px);
}

.user-badge-nav a {
  background-color: #50587c;
  color: #fff;
  display: inline-block;
  outline: none;
  text-decoration: none;
  text-align: center;
  float: left;
  font-size: 98%;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 99.3px;
  height: 100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-transition: background-color 350ms ease-in-out;
  transition: background-color 350ms ease-in-out; 
}

.user-badge-nav a span {
  color: #9099b7;
  vertical-align: middle;
  margin-right: 10px;
}

.no-touch .user-badge-nav a:hover, .user-badge-nav a:focus {
  background-color: #394165;
}

.no-touch .user-badge-nav a:active {
  background-color: #50597b;
}

.user-badge-nav a:nth-child(1) {
  border-top: 4px solid #e64c65;
  border-radius: 0px 0px 0px 5px;
}

.user-badge-nav a:nth-child(1) span {
  font-size: 1.4em;
}

.user-badge-nav a:nth-child(2) {
  border-top: 4px solid #11a8ab;
  margin-left: 1px;
}

.user-badge-nav a:nth-child(2) span {
  font-size: 1.1em;
}

.user-badge-nav a:nth-child(3) {
  border-top: 4px solid #fcb150;
  border-radius: 0px 0px 5px 0px;
  margin-left: 1px;
}

.user-badge-nav a:nth-child(3) span {
  font-size: 1.3em;
}

/************************************************* Icon
*/

@font-face {
	font-family: 'icomoon';
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/icomoon.eot?-h9pxf3');
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/icomoon.eot?#iefix-h9pxf3') format('embedded-opentype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/icomoon.woff?-h9pxf3') format('woff'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/icomoon.ttf?-h9pxf3') format('truetype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/icomoon.svg?-h9pxf3#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}

.icon-corazon:before {
	content: "\e600";
}
.icon-ojo:before {
	content: "\e601";
}
.icon-bocadillo:before {
	content: "\e602";
}
.icon-mas:before {
	content: "\e603";
}
JS
$(document).ready(function() {
  getNewUser();
});

/*

Create a class to avoid :hover on touch devices.
Crear una clase para evitar el :hover en dispositivos touch.

*/

if (!("ontouchstart" in document.documentElement)) {
  document.documentElement.className += " no-touch";
}

/*

Cargar datos aleatorios usando ajax y el servicio randomuser.
Load random data using ajax and service RandomUser.

*/


function getNewUser() {
  $.ajax({
    url: 'http://api.randomuser.me/0.4/?randomapi',
    dataType: 'json',
    success: function(data) {
      if (!data['error']) {
        var user = data.results[0].user;
        $('.user-badge-avatar img').attr('src', user.picture.replace("portraits/", "portraits/"));
        $('.user-badge-avatar img').addClass('done');
        $('.user-badge h1, .user-badge p').addClass('done');
        $('.user-badge-nav').addClass('up');
        $('.user-badge h1').html(user.name.first + ' ' + user.name.last);

      } else {
        console.log('Error');
      }
    }
  });
}

Description

Esto forma parte de un curso, la idea es trabajar a pixel perfecto, crear unas creativas animaciones y transiciones.
Term
Mon, 11/27/2017 - 21:19

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv