Skip to content

Instantly share code, notes, and snippets.

/Skrollr-Sticker-Peel.markdown

Created June 9, 2014 03:36
Show Gist options
  • Save anonymous/e5d7804a8127c198668d to your computer and use it in GitHub Desktop.
Save anonymous/e5d7804a8127c198668d to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by John Slipper.
Raw
index.html
<body
data0="background-color: rgb(26, 148, 198);"
data500="background-color: rgb(237, 23, 79);">
<div class="wrapper">
<div class="sticker">
<div class="reveal circle_wrapper">
<div class="circle"
data0="opacity: 0;"
data20="opacity: 1;">
<a href="http://www.capiche.co.nz/" title="Say hello!"><img src="http://demo.capiche.co.nz/sticker/img/capiche-logo-red.svg" alt="Capiche"></a>
</div>
</div>
<div class="sticky" data0="transform: rotate(35deg);" data500="transform: rotate(5deg);">
<div class="front circle_wrapper" data0="height: 280px;" data500="height: 0px;">
<div class="circle"
data0="margin-top: 0px;
background-color: rgb(26, 148, 198);
background-image: linear-gradient(bottom, rgb(26, 148, 198) 240px, rgb(26, 148, 198) 280px);
background-position: 0px 0px;"
data500="margin-top: -280px;
background-color: rgb(237, 23, 79);
background-image: linear-gradient(bottom, rgb(237, 23, 79) 240px, rgb(170, 13, 54) 280px);
background-position: 0 240px;"></div>
</div>
</div>
<h4 data130="opacity:1;" data140="opacity:0;">Behind every great brand <br />is a great brand agency</h4>
<div class="sticky" data0="transform: rotate(35deg);" data500="transform: rotate(5deg);">
<div class="back circle_wrapper"
data0="height: 0px; top: 0px;"
data500="height: 280px; top: 280px;
transform: translateY(0px); opacity: 1;"
data520="transform: translateY(200px); opacity: 0;">
<div class="circle" data0="margin-top: -280px; box-shadow: 0 1px 4px rgba(0,0,0,.3);" data500="margin-top: 0px; box-shadow: 0 1px 8px rgba(0,0,0,.0);"></div>
</div>
</div>
</div>
<div class="call-to-action" data0="opacity: 0;" data500="opacity: 0;" data501="opacity: 1;">
<a href="http://www.capiche.co.nz/" title="Say hello!" target="_blank">See what we can do for you</a>
</div>
<div class="info"><span>Scroll</span></div>
</div>
<script src="http://demo.capiche.co.nz/sticker/lib/bower_components/skrollr/dist/skrollr.min.js"></script>
</body>
</html>
Raw
script.js
skrollr.init();
Raw
Skrollr-Sticker-Peel.markdown
Raw
style.scss
$stickerFront: rgb(26, 148, 198);
$stickerBack: darken(white, 10%);
$stickerReveal: white;
$stickerTextColor: $stickerReveal;
$stickerRevealTextColor: $stickerFront;
$pageBackgroundColor: $stickerFront;
body {
background-color: $pageBackgroundColor;
color: white;
font-size: 24px;
font-weight: 200;
user-select: none;
}
a {
color: white;
text-decoration: none;
}
.anim750 {
transition: all 1s ease-in-out;
}
.wrapper {
position: fixed;
width: 280px;
height: 280px;
top: 40%;
left: 50%;
margin: -140px 0 0 -140px;
}
.sticker {
position: relative;
width: 280px;
height: 280px;
backface-visibility: hidden;
.sticky {
transform: rotate(35deg);
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 280px;
}
.reveal {
.circle {
width: 278px;
height: 278px;
top: 1px;
left: 1px;
line-height: 280px;
text-align: center;
color: $stickerRevealTextColor;
cursor: pointer;
background-color: $stickerReveal;
img {
vertical-align: middle;
}
}
}
.circle_wrapper {
position: absolute;
width: 280px;
height: 280px;
left: 0px;
top: 0px;
overflow: hidden;
}
.circle {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
}
.back {
height: 0px;
top: 0;
.circle {
margin-top: -280px;
background-color: $stickerBack;
box-shadow: rgba(0, 0, 0, .25) 0px 0px 3px, inset -1px -1px 3px rgba(0,0,0,.1);
background-image: -webkit-linear-gradient(bottom, $stickerBack 120px, darken($stickerBack, 15%) 280px);
}
}
.front {
height: 280px;
bottom: 0;
top: auto;
.circle {
margin-top: 0;
background-color: $stickerFront;
background-position: 0 0;
}
}
h4 {
text-align: center;
position: absolute;
width: 280px;
height: 280px;
margin: 120px 0 0 0;
font-size: 20px;
line-height: 1.2;
color: $stickerTextColor;
opacity: 1;
}
&.peeled {
.sticky {
transform: rotate(5deg);
}
.front {
height: 0px;
box-shadow: 0 -60px 10px -60px rgba(0,0,0,.1);
.circle {
margin-top: -280px;
background-position: 0 240px;
background-image: -webkit-linear-gradient(bottom, $stickerFront 240px, darken($stickerFront, 15%) 280px);
}
}
.back {
height: 280px;
top: 280px;
.circle {
margin-top: 0px;
background-position: 0 -320px;
background-size: 100%, 120%;
}
}
h4 {
opacity: 0;
}
}
}
.call-to-action {
margin-top: 30px;
text-align: center;
a {
position: relative;
display: inline-block;
padding: 0 30px;
transition: all 250ms ease;
&:after {
display: inline;
position: relative;
margin-left: 3px;
content: "...";
animation-fill-mode: both;
animation: flash 5s;
animation-iteration-count: infinite;
}
&:hover {
transform: scale(1.2);
}
}
}
.info {
position: fixed;
top: 60px;
right: -5px;
font-size: 20px;
transform: rotate(90deg);
span {
&:after {
display: inline;
position: relative;
margin-left: 15px;
content: "\2192";
animation-fill-mode: both;
animation: shake 5s;
animation-iteration-count: infinite;
}
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment