Skip to content

Instantly share code, notes, and snippets.

@mmarj

mmarj/Animation.markdown

Created September 16, 2015 11:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mmarj/1bbe9a94139247ca13a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mmarj/1bbe9a94139247ca13a6 to your computer and use it in GitHub Desktop.
Download ZIP
Animation
Raw
Animation.markdown

Animation

I just wanted to rebuild the phone animation from "Brian Phillips". Thanks for this nice animation! :)

A Pen by Norman Dubois on CodePen.

License.

Raw
index.html
<div class="phone">
<div class="phone-shade"></div>
<div class="phone-speaker"></div>
<div class="phone-screen">
<div class="phone-header">
<div class="phone-menu"></div>
</div>
<!--Post -->
<div class="phone-post" id="first-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
<!--Post -->
<div class="phone-post">
<div class="post-thumb"></div>
<div class="line post-title-1"></div>
<div class="line post-title-2"></div>
<div class="line post-line-1"></div>
<div class="line post-line-2"></div>
</div>
</div> <!-- Phone Screen-->
<div class="phone-button"></div>
</div><!--Phone -->
Raw
script.js
$(document).ready(function(){
$('.phone-post').addClass('active');
setTimeout(function(){
$('.phone-post').removeClass('active');
}, 1000);
setInterval(function(){
$('.phone-post').addClass('active');
setTimeout(function(){
$('.phone-post').removeClass('active');
}, 1000);
}, 1500);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
$darkbluegray: rgb(65, 82, 96);
$bluegray: rgb(85, 95, 107);
$btnColor: rgb(73, 82, 91);
$speakerColor: rgb(62, 71, 82);
$black: rgb(30, 30, 30);
$cream: rgb(242, 235, 226);
$lightGray: rgb(176, 176, 176);
$lighterGray: rgb(218, 218, 218);
$borderColor: rgb(98, 96, 93);
$bodyColor: rgb(102,115,133);
body {
background: $bodyColor;
}
*, *:before, *:after {
box-sizing: border-box;
}
.clear {
clear: both;
}
.phone {
margin: 10px auto 50px auto;
box-shadow: 10px 10px 10px $darkbluegray;
}
.phone {
height: 428px;
width: 226px;
background: $darkbluegray;
border-radius: 5px;
position: relative;
overflow: hidden;
.phone-shade {
position: absolute;
height: 500px;
width: 200px;
left: 50%;
background: $bluegray;
transform: rotate(18deg);
}
.phone-speaker {
height: 8px;
width: 42px;
border-radius: 4px;
background: $speakerColor;
position: relative;
top: 23px;
left: 50%;
margin-left: -21px;
}
.phone-button {
height: 40px;
width: 40px;
background: $btnColor;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -20px;
bottom: 10px;
}
.phone-screen {
height: 302px;
width: 208px;
background: $cream;
position: absolute;
left: 9px;
top: 58px;
overflow: hidden;
.phone-header {
width: 100%;
height: 30px;
background: $black;
position: relative;
z-index: 3;
color: white;
.phone-menu {
position: absolute;
right: 10px;
top: 9px;
background: white;
width: 15px;
height: 2px;
&:before {
content: "";
width: 15px;
height: 2px;
top: 5px;
background: $cream;
position: absolute;
}
&:after {
content: "";
width: 15px;
height: 2px;
top: 10px;
background: $cream;
position: absolute;
}
}
}
}
.phone-post {
padding: 15px 10px;
border-bottom: 2px solid $borderColor;
overflow: hidden;
height: 60px;
position: relative;
transform: translateY(-60px);
z-index: 2;
&.active {
animation: new-post 1s ease infinite;
}
}
}
.post-thumb {
height: 29px;
width: 27px;
background: $lightGray;
position: absolute;
margin-right: 5px;
}
.post-title-1 {
height: 4px;
width: 15px;
margin-top: 3px;
background: $lighterGray;
position: absolute;
left: 44px;
}
.post-title-2 {
height: 4px;
width: 30px;
margin-top: 3px;
background: $lighterGray;
position: absolute;
left: 65px;
}
.post-line-1 {
height: 4px;
width: 150px;
background: $lightGray;
position: absolute;
top: 27px;
left: 44px;
}
.post-line-2 {
height: 4px;
width: 100px;
background: $lightGray;
position: absolute;
top: 36px;
left: 44px;
}
#first-post {
.line {
width: 0;
}
}
#first-post.active {
.post-thumb {
transform: scale(0);
animation: box-grow 500ms ease 500ms forwards;
}
.line {
transition: width 500ms ease;
transition-delay: 600ms;
}
.post-title-1 {
width: 15px;
}
.post-title-2 {
width: 30px;
}
.post-line-1 {
width: 150px;
}
.post-line-2 {
width: 100px;
}
}
@keyframes new-post {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0px);
}
}
@keyframes box-grow {
0% {
transform: scale(0) rotate(25deg);
}
60% {
transform: scale(1.2) rotate(-10deg);
}
100% {
transform: scale(1) rotate(0);
}
}
@mmarj
Copy link
Author

mmarj commented Sep 19, 2015

This is Animation example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment