Skip to content

Instantly share code, notes, and snippets.

@jamesgarrett

jamesgarrett/index.html

Created November 27, 2017 16:52
Show Gist options
  • Save jamesgarrett/95b96f20dc56896a289065ce4940ec18 to your computer and use it in GitHub Desktop.
Save jamesgarrett/95b96f20dc56896a289065ce4940ec18 to your computer and use it in GitHub Desktop.
Download ZIP
Top5 V2
Raw
index.html
<div class="demo wrap">
<div class="app">
<div class="status">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/100%25.png" alt="status bar" />
</div>
<header class="header">
<svg class="top-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
<defs><style>.button-bg{fill:#0f3247;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#fff;}</style></defs>
<title>top5Asset 1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="button-bg" d="M35,17.5A17.5,17.5,0,1,0,17.5,35,17.5,17.5,0,0,0,35,17.5"/>
<path class="cls-2" d="M19.37,11.11a1.45,1.45,0,1,0-1.24,1.63,1.45,1.45,0,0,0,1.24-1.63"/>
<path class="cls-2" d="M24.8,15.32A1.45,1.45,0,1,0,23.56,17a1.45,1.45,0,0,0,1.24-1.63"/>
<path class="cls-2" d="M22.48,21.84a1.45,1.45,0,1,0-1.24,1.63,1.45,1.45,0,0,0,1.24-1.63"/>
<path class="cls-2" d="M15.73,21.7a1.45,1.45,0,1,0-1.24,1.63,1.45,1.45,0,0,0,1.24-1.63"/>
<path class="cls-2" d="M13.65,15.06a1.45,1.45,0,1,0-1.24,1.63,1.45,1.45,0,0,0,1.24-1.63"/>
</g>
</g>
</svg>
<svg class="new-story" xmlns="http://www.w3.org/2000/svg" height="35" width="35" viewBox="0 0 96 96"><defs>
<style>.add-new{fill:#4ac3d1;}.plus{fill:#fff;fill-rule:evenodd;}</style></defs>
<title>Add New Story</title>
<circle class="add-new" cx="48.04" cy="48.04" r="48.04"/>
<path class="plus" d="M68.6,52.68h-16V68.62H43.51V52.68h-16V43.61h16V27.46h9.07V43.61h16Z"/>
</svg>
</header>
<div class="body">
<div class="camera">
<ul class="stories">
<li id="one"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /></li>
<li id="two"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /></li>
<li id="three"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /></li>
<li id="four"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /></li>
<li id="five"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /></li>
</ul>
<svg class="camera-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.35 65.35">
<title>CAMERA</title>
<path class="ring" d="M32.66,65.35A32.67,32.67,0,1,1,65.35,32.68,32.67,32.67,0,0,1,32.66,65.35Zm0-59.42A26.76,26.76,0,1,0,59.43,32.68,26.76,26.76,0,0,0,32.66,5.93Z"/>
<polygon class="plane" points="27.51 36.45 36.76 45.4 44.41 18.54 14.94 33.02 24.19 34.94 39.28 23.47 27.51 36.45"/>
<polygon class="plane" points="25.01 37.29 26.2 46.8 30.26 42.21 25.01 37.29"/>
</svg>
<svg class="flash-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.73 34.73"><defs></style></defs><title>flashAsset 3</title>
<path class="white" d="M17,16.3H15.62l0,0s1.35-1.48,2-2.25l1-1.15c.33-.38.64-.78,1-1.16q1-1.17,1.85-2.4L21.07,9q-1.25.88-2.43,1.82c-.39.32-.8.62-1.18.95l-1.16,1c-.77.65-1.52,1.31-2.27,2s-1.49,1.35-2.22,2l-2.16,2,3,.08c1.43,0,2.85,0,4.28,0l1.45,0-.07.08c-.67.75-1.34,1.5-2,2.26l-1,1.15c-.33.38-.63.78-1,1.17q-.95,1.18-1.83,2.42l.18.18q1.26-.87,2.45-1.81c.39-.31.8-.62,1.19-.94l1.17-1c.78-.64,1.54-1.3,2.29-2s1.5-1.34,2.23-2l2.11-2-3-.1C19.83,16.33,18.4,16.31,17,16.3Z"/>
<path class="white" d="M17.37,0A17.37,17.37,0,1,0,34.73,17.37,17.39,17.39,0,0,0,17.37,0Zm0,31.73A14.37,14.37,0,1,1,31.73,17.37,14.38,14.38,0,0,1,17.37,31.73Z"/>
<path class="yellow" d="M17.37,3A14.37,14.37,0,1,0,31.74,17.37,14.37,14.37,0,0,0,17.37,3Zm4.75,15.44q-1.1,1-2.23,2c-.76.66-1.51,1.32-2.29,2l-1.17,1c-.39.32-.79.63-1.19.94q-1.19.94-2.45,1.81l-.18-.18q.88-1.24,1.83-2.42c.32-.39.63-.79,1-1.17l1-1.15c.65-.77,1.32-1.52,2-2.26l.07-.08-1.45,0c-1.43,0-2.85,0-4.28,0l-3-.08,2.16-2q1.1-1,2.22-2c.75-.67,1.5-1.33,2.27-2l1.16-1c.38-.33.79-.63,1.18-.95Q19.82,9.83,21.07,9l.37.36q-.89,1.23-1.85,2.4c-.32.39-.63.79-1,1.16l-1,1.15c-.65.76-2,2.25-2,2.25l0,0H17c1.43,0,2.85,0,4.28.08l3,.1Z"/>
</svg>
<svg class="selfie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 33.05"><defs><style>.cls-1{fill:#fff;}</style></defs><title>selfieAsset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M15,33.05A15,15,0,0,1,4.39,7.48L6.51,9.6a12,12,0,0,0,0,16.95,12,12,0,0,0,17,0A12,12,0,0,0,20.27,7.31L19.58,10a1.5,1.5,0,0,1-2.72.42l-3.12-5a1.5,1.5,0,0,1,.51-2.09L19.48.21a1.5,1.5,0,0,1,2.21,1.67L21,4.35a15,15,0,0,1-6,28.7Z"/></g></g></svg>
</div>
<ul class="more">
<li id="five">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" />
<p>Story Title</p>
</li>
<li id="six"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="seven"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="eight"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="nine"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="five"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="six"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="seven"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="eight"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
<li id="nine"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/circles.svg" alt="" /><p>Story Title</p></li>
</ul>
</div>
</div>
</div>
Raw
script.js
$(".top-5, .new-story, .flash-button, .selfie").click( function(){
$(this).toggleClass("clicked");
});
$(".camera-button").click( function(){
$(".camera").toggleClass("clicked");
});
$(".top-5").click( function(){
$(".camera, .stories, .more, .app, .flash-button, .selfie").toggleClass("disabled");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
Raw
style.scss
// Structure / Layout
.demo.wrap{
background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #2C3E50 , #222);
background: linear-gradient(to bottom, #2C3E50 , #222);
height:100vh;
width:100%;
}
.demo > .app{
position:fixed;
left:50%;
top:50%;
transform:
translateX(-50%)
translateY(-50%);
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/ocean-green-2.png);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
height:667px;
width:375px;
margin:0 auto;
overflow-y:hidden;
border-radius:7px;
-webkit-box-shadow: 0px 10px 4px 5px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 10px 4px 5px rgba(0,0,0,0.21);
box-shadow: 0px 10px 4px 5px rgba(0,0,0,0.21);
transition:1s ease-in-out;
}
// Utilities
.demo.spacer{
margin-top:240px;
}
.hidden{
visibility:hidden;
}
// Elements
.status{
position:fixed;
top:0;
width:375px;
margin:0 auto;
text-align: center;
height:25px;
background:transparent;
z-index:9999;
}
.new-story{
position:static;
float:right;
width:35px;
margin:35px 15px;
transition:1s ease-in-out;
}
.top-5{
position:static;
float:left;
width:35px;
margin:35px 15px;
transition:1s ease-in-out;
}
.flash-button{
position:absolute;
right:-142.5px;
bottom:5px;
width:45px;
.white{fill:#fff;transition:1s ease-in-out;}
.yellow{fill:transparent;transition:1s ease-in-out;}
}
.flash-button.clicked{
.yellow{fill:#fffc00;transition:1s ease-in-out;}
.white{fill:transparent;transition:1s ease-in-out;}
transition:1s ease-in-out;
}
.flash-button.disabled, .selfie.disabled{
visibility:hidden;
}
.selfie{
position:absolute;
left:-140px;
bottom:5px;
width:35px;
transition:1s ease-in-out;
transform:rotate(0deg);
}
.selfie.clicked{
transform:rotate(-180deg);
transition:1s ease-in-out;
.cls-1{
fill:#fffc00;
}
}
.camera{
position:absolute;
bottom:65px;
height:65px;
left:50%;
transform:translateX(-50%);
transition:1s ease-in-out;
cursor:pointer;
.camera-button{
width:65px;
}
}
.plane{
visibility:hidden;
}
.clicked{
.plane{
visibility:visible;
}
}
.ring, .plane{
fill:#fff;
}
ul.stories{
margin:0;
padding:0;
list-style-type: none;
position:absolute;
bottom:0px;
transition:1s ease-in-out;
li{
position:absolute;
width:45px;
bottom:65px;
transition:1s ease-in-out;
}
li#one{transform:translateX(-60px) translateY(60px);}
li#two{transform:translateX(-40px) translateY(12px);}
li#three{transform: translateX(10px) translateY(-15px);}
li#four{transform:translateX(60px) translateY(12px);}
li#five{transform:translateX(80px) translateY(60px);}
}
ul.more{
margin:0;
padding:0;
list-style-type: none;
position:absolute;
bottom:-165px;
display:-webkit-box;
float:left;
width:375px;
overflow-x:scroll;
padding-left:10px;
transition:1s ease-in-out;
display:-webkit-box;
li{
width:65px;
margin:15px 5px;
text-align: center;
img{
width:45px;
}
p{
font-size:12px;
color:white;
font-weight:bold;
margin-top:5px;
}
}
}
// Animations
.top-5.clicked, .new-story.clicked{
transition:1s ease-in-out;
}
.top-5.clicked {
transform:rotate(288deg);
.button-bg{fill:tomato;}
}
.new-story.clicked {
transform:rotate(315deg);
.add-new{fill:tomato;}
}
.camera.disabled{
transition:1s ease-in-out;
bottom:265px;
}
.stories.disabled{
transition:1s ease-in-out;
}
.more.disabled{
bottom:0px;
transition:1s ease-in-out;
display:-webkit-box;
}
.app.disabled{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/770488/blur-ocean-green-3.png);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
transition:1s ease-in-out;
}
.pop-out.item1 > .story-cover{
transform: translateY(75px)
translateX(-100px);
}
.pop-out.item2 > .story-cover{
transform:
translateX(-135px)
translateY(275px);
}
.pop-out.item3 > .story-cover{
transform:
translateX(150px)
translateY(450px);
}
.pop-out.item4 > .story-cover{
transform:
translateX(135px)
translateY(275px);
}
.pop-out.item5 > .story-cover{
transform:
translateY(75px)
translateX(100px);
}
.camera.clicked .stories{
li{
transition:1s ease-in-out;
}
li#one{transform:translateX(-140px) translateY(-60px);}
li#two{transform:translateX(-140px) translateY(-280px);}
li#three{transform: translateX(-140px) translateY(-460px);}
li#four{transform:translateX(160px) translateY(-280px);}
li#five{transform:translateX(160px) translateY(-60px);}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment