Simple expanding card transition... Might work quite nicely with a 'Contact Me' form
Forked from anonymous/Expanding Card | Material Design.markdown
Created
December 8, 2015 05:44
-
-
Save CodeMyUI/37b213c3873ad924bf39 to your computer and use it in GitHub Desktop.
Expanding Card | Material Design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container | |
span.button | |
| + | |
.content | |
.head | |
h1 Expand. | |
p.sub by | |
a(href="http://codepen.io/woodwork/" target="_blank") Woodwork | |
.body | |
p | |
| There once was a wolf named <em>Knox</em>. He lived in a bright blue box. Until one day, his box blew away and he was left with only his <em>socks</em>. | |
<br><br> Integer augue augue, fermentum at purus nec, euismod rutrum ex. Nulla pulvinar tortor ipsum, vel accumsan nunc rutrum sed. Praesent faucibus sollicitudin tempus. Phasellus congue ex tempor malesuada congue. Etiam vitae dui commodo, ultrices eros malesuada mi. Fusce suscipit eleifend lacus, at gravida urna gravida in. Nullam sodales a consequat leo nisl sit amet ipsum. Pellentesque aliquam dolor quam, et ultricies leo fringilla in. Nulla eu neque eu mauris malesuada efficitur ultrices sed mi. Vestibulum nec quam vitae purus ut sed velit. Vestibulum ultricies iaculis magna ut consequat. | |
.action-bar | |
a SHARE | |
a LEARN MORE |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('.button').click(function (e) { | |
e.preventDefault(); | |
$(this).parent().toggleClass('expand'); | |
$(this).parent().children().toggleClass('expand'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$body-bg: #FAFAFA; | |
//Other pretty primary colors: E91E63 FF5722 | |
$primary-col: #03A9F4; | |
$accent-col: #FFC400; | |
$accent-fallback: #FFD740; | |
$font-stack: 'Roboto', sans-serif; | |
$easer: cubic-bezier(0.4, 0, 0.2, 1); | |
body { | |
font-family: $font-stack; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
color: #FFF; | |
background: $body-bg; | |
} | |
h1{ | |
font-weight: 700; | |
font-size: 64px; | |
margin: 20px 0 0 0; | |
padding: 0 20px; | |
} | |
p{ | |
font-size: 16px; | |
padding: 0 20px; | |
} | |
em{ | |
font-style: normal; | |
color: $accent-col; | |
} | |
a{ | |
font-style: normal; | |
color: $accent-fallback; | |
text-decoration: none; | |
padding-right: 10px; | |
cursor: pointer; | |
} | |
.sub{ | |
margin: 0; | |
} | |
.button{ | |
cursor: pointer; | |
width: 60px; | |
height: 60px; | |
display: inline-block; | |
font-size: 30px; | |
line-height: 60px; | |
transition: all 0.7s $easer; | |
} | |
.button.expand { | |
-webkit-transform: rotate(585deg); | |
-ms-transform: rotate(585deg); | |
transform: rotate(585deg); | |
transition: all 0.5s $easer; | |
} | |
.container { | |
position: absolute; | |
margin: auto; | |
left: 0; | |
right: 0; | |
top: 5vh; | |
background-color: $primary-col; | |
border-radius: 50%; | |
width: 60px; | |
max-width: 60px; | |
height: 60px; | |
text-align: center; | |
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
overflow: hidden; | |
transition: all 0.2s 0.45s, | |
height 0.2s $easer 0.25s, | |
max-width 0.2s $easer 0.35s, | |
width 0.2s $easer 0.35s; | |
} | |
.container.expand { | |
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.17); | |
border-radius: 0; | |
width: 80%; | |
height: 500px; | |
max-width: 700px; | |
padding: 0; | |
transition: all 0.2s, max-width 0.2s $easer 0.1s, height 0.3s ease 0.25s; | |
} | |
.content { | |
transform: translateY(100%); | |
width: 100%; | |
height: 100%; | |
opacity: 0; | |
text-align: left; | |
transition: transform 0.2s $easer, opacity 0.2s 0.2s; | |
} | |
.content.expand { | |
transform: translateY(0px); | |
opacity: 1; | |
transition: transform 0.7s $easer 0.05s, opacity 0s; | |
} | |
.content .head { | |
padding: 0 0 20px 0; | |
} | |
.content .body { | |
color: #000; | |
color: rgba(0, 0, 0, 0.87); | |
background-color: #FFF; | |
width: 100%; | |
height: 100%; | |
padding: 10px 0; | |
box-sizing: border-box; | |
} | |
.action-bar { | |
padding-left: 15px; | |
border-top: 1px solid #E0E0E0; | |
width: 100%; | |
} | |
.action-bar a { | |
text-transform: uppercase; | |
line-height: 52px; | |
color: $accent-col; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I tried all the way to operate the button without success. It's too bad!