Beautiful animation for profile card design. Hover the ball to see the magic! Inspiration from Material Design by Google.
A Pen by HARUN PEHLİVAN on CodePen.
Beautiful animation for profile card design. Hover the ball to see the magic! Inspiration from Material Design by Google.
A Pen by HARUN PEHLİVAN on CodePen.
<aside class="profile-card"> | |
<header> | |
<!-- here’s the avatar --> | |
<a href="https://hpitgroup.glitch.me/"> | |
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1619114987/IMG_20210422_174832_rrs2qw.jpg"> | |
</a> | |
<!-- the username --> | |
<h1>HARUN PEHLİVAN </h1> | |
<!-- and role or location --> | |
<h2>CODER,DESIGNER</h2> | |
</header> | |
<!-- bit of a bio; who are you? --> | |
<div class="profile-bio"> | |
<p>22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi <br> | |
The language I Started Programming is PASCAL<br> 2008 TERCUMAN INFORMATICS CENTER<br> 2012 TERCUMAN EDUCATION, SCIENCE,TECHNICAL RESEARCH AND DEVELOPMENT CENTER<br> 2013 TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU<br> 2018 HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP | |
</p> | |
</div> | |
<!-- some social links to show off --> | |
<ul class="profile-social-links"> | |
<!-- twitter - el clásico --> | |
<li> | |
<a href="https://twitter.com/HTERCUMANP"> | |
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1603032621/twitter_goropn.png"> | |
</a> | |
</li> | |
<!-- envato – use this one to link to your marketplace profile --> | |
<li> | |
<a href="https://www.linkedin.com/in/harunpehlivanitgrouptebimtebitagem/"> | |
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1602522120/kisspng-computer-icons-logo-social-media-tiff-5ad453aeb469a0.348274141523864494739_v2d0zz.jpg"> | |
</a> | |
</li> | |
<!-- codepen - your codepen profile--> | |
<li> | |
<a href="https://codepen.io/harunpehlivan"> | |
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604507562/icons8-codepen-24_phxzrj.png"> | |
</a> | |
</li> | |
<!-- add or remove social profiles as you see fit --> | |
</ul> | |
</aside> | |
<!-- that’s all folks! --> | |
<div class="copyright"><span>Bouncing Profile Card by</span><a href="http://dribbble.com/harunpehlivan" class="HARUN PEHLİVAN "></a></div> |
// copy | |
balapaCop("Bouncing Profile Card", "rgba(255,255,255,.5)"); |
<script src="https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js"></script> |
/* go on then, styles go here.. knock yourself out! */ | |
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700); | |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); | |
$old: 'Old Standard TT', serif; | |
$roboto: 'Roboto', sans-serif; | |
html { | |
height: 100%; | |
background: #3498db; | |
} | |
body { | |
height: 100%; | |
font-size: 16px; | |
position: relative; | |
&:after { | |
content: "Hover the bouncing ball."; | |
position: absolute; | |
top:100px; | |
left: 0; | |
right: 0; | |
text-align: center; | |
font-size: 1.2rem; | |
letter-spacing: 2px; | |
font-family: Roboto; | |
color: white; | |
} | |
} | |
aside { | |
width: 350px; | |
background: transparent; | |
margin: 0 auto; | |
position: relative; | |
top: 50%; | |
transform: translate3d(0, -50%, 0); | |
overflow: hidden; | |
box-shadow: 0px 1px 4px rgba(0,0,0,0); | |
&:hover { | |
box-shadow: 0px 5px 4px rgba(0,0,0,0.3); | |
transition: .5s all ease .25s; | |
} | |
&:hover:before { | |
top: 50%; | |
transform: translate3d(-50%, -50%, 0) scale(1); | |
transition: .3s top ease, .5s transform ease .25s; | |
} | |
&:hover:after { | |
opacity: 0; | |
} | |
&:hover header a { | |
transform: rotateX(0deg) scale(1); | |
transition: .3s all ease .5s; | |
} | |
&:hover header:before, | |
&:hover header:after { | |
transform: translate3d(0, 0%, 0); | |
transition: .3s all ease .8s; | |
} | |
&:hover header h1 { | |
opacity: 1; | |
transition: .3s all ease .95s; | |
} | |
&:hover header h2 { | |
opacity: 1; | |
transition: .3s all ease 1.1s; | |
} | |
&:hover .profile-bio:before { | |
width: 50px; | |
transition: .3s all ease 1.25s; | |
} | |
&:hover .profile-bio p { | |
opacity: 1; | |
transition: .3s all ease 1.4s; | |
} | |
&:hover .profile-social-links li { | |
transform: scale(1); | |
} | |
&:hover .profile-social-links li:first-child { | |
transition: .3s all ease 1.55s; | |
} | |
&:hover .profile-social-links li:nth-child(2) { | |
transition: .3s all ease 1.7s; | |
} | |
&:hover .profile-social-links li:last-child { | |
transition: .3s all ease 1.85s; | |
} | |
&:before { | |
content: ""; | |
position: absolute; | |
width: 1100px; | |
height: 1100px; | |
background: white; | |
border-radius: 50%; | |
top: 90%; | |
left: 50%; | |
transform: translate3d(-50%, -50%, 0) scale(.025); | |
animation: .5s bounce infinite alternate-reverse; | |
transition: .5s transform ease; | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
left: 160px; | |
right: 160px; | |
bottom: 0; | |
height: 15px; | |
background: rgba(0,0,0,.5); | |
border-radius: 50%; | |
transition: .3s opacity ease; | |
animation: .5s shadow infinite alternate-reverse; | |
} | |
header { | |
position: relative; | |
display: block; | |
&:before { | |
content: ""; | |
position: absolute; | |
left: 0; | |
right: 0; | |
height: 200px; | |
background: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png") no-repeat; | |
background-size: cover; | |
transform: translate3d(0, -100%, 0); | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
height: 200px; | |
background: rgba(0,0,0,.5); | |
transform: translate3d(0, -100%, 0); | |
} | |
a { | |
display: block; | |
width: 100px; | |
height: 100px; | |
position: relative; | |
z-index: 400; | |
margin: 0 auto 100px; | |
top: 50px; | |
transform: rotateX(55deg) scale(0); | |
img { | |
width: 100%; | |
border-radius: 50%; | |
box-shadow: 0px 2px 4px rgba(0,0,0,0.3); | |
} | |
} | |
h1 { | |
text-align: center; | |
font-family: $roboto; | |
padding: 15px 0 5px; | |
margin: 0; | |
font-weight: 400; | |
color: black; | |
font-size: 1.75rem; | |
opacity: 0; | |
} | |
h2 { | |
text-align: center; | |
font-family: $roboto; | |
line-height: 1.5; | |
font-weight: 300; | |
margin: 0 0 20px; | |
padding: 0 10px; | |
font-size: 1rem; | |
color: #555; | |
opacity: 0; | |
} | |
} | |
.profile-bio { | |
padding: 5px 20px; | |
box-sizing: border-box; | |
display: block; | |
position: relative; | |
opacity: 1; | |
text-align: center; | |
&:before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 150px; | |
rigth: 150px; | |
width: 0px; | |
height: 1px; | |
background: black; | |
} | |
p { | |
line-height: 1.5; | |
font-size: .95rem; | |
font-weight: 300; | |
color: #666; | |
opacity: 0; | |
} | |
} | |
.profile-social-links { | |
padding: 0 0 10px; | |
list-style: none; | |
text-align: center; | |
li { | |
display: inline-block; | |
transform: scale(0); | |
a { | |
display: block; | |
width: 30px; | |
margin: 0 5px; | |
img { | |
width: 100%; | |
} | |
} | |
} | |
} | |
} | |
@keyframes bounce { | |
from { | |
top: 96%; | |
} | |
to { | |
top: 85%; | |
} | |
} | |
@keyframes shadow { | |
from { | |
height: 5px; | |
} | |
to { | |
height: 15px; | |
transform: scale(.5); | |
} | |
} | |
.copyright { | |
position: fixed; | |
right: 15px; | |
bottom: 15px; | |
font-family: "Roboto"; | |
} | |
.copyright span { | |
line-height: 36px; | |
color: rgba(255, 255, 255, 0.75); | |
margin-right: 10px; | |
font-weight: 300; | |
} | |
.copyright span a { | |
font-weight: 400; | |
text-decoration: none; | |
color: #ea4c89; | |
} | |
.copyright .balapa { | |
width: 30px; | |
height: 30px; | |
display: block; | |
background: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png"); | |
background-size: cover; | |
border-radius: 50%; | |
border: 5px solid rgba(255, 255, 255, 0.75); | |
float: right; | |
} |