Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/ShopMotion-option-1.markdown

Created May 22, 2014 10:20
Show Gist options
  • Save mr-stezz/06337f0ac94613662358 to your computer and use it in GitHub Desktop.
Save mr-stezz/06337f0ac94613662358 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Mike Stezycki.
Raw
index.html
<a class="scale"></a>
<video id="vid1" class="videoplayer" autoplay autobuffer loop muted style="width:640px;max-width:100%;">
<source src="https://r20---sn-aigllnsl.googlevideo.com/videoplayback?ipbits=0&amp;mt=1400752741&amp;itag=22&amp;mws=yes&amp;requiressl=yes&amp;uinitcwndbps=820000&amp;source=youtube&amp;upn=aj09SdS1FJw&amp;ms=au&amp;mv=m&amp;fexp=919112%2C919330%2C930802%2C931975%2C936119%2C940216%2C913434%2C923341&amp;ratebypass=yes&amp;ip=91.108.160.89&amp;sver=3&amp;expire=1400775522&amp;key=yt5&amp;id=f2630436c3bd133a&amp;signature=4DA16B865D5553AA845695D19E7BFB2D125EBA97.19F52A49FB045258CFA288895FEB8229D9A93C78&amp;sparams=id%2Cip%2Cipbits%2Citag%2Cratebypass%2Crequiressl%2Csource%2Cuinitcwndbps%2Cupn%2Cexpire&amp;cpn=geFqPsFIuz87xM-m&amp;ptk=youtube_none&amp;pltype=contentugc&amp;c=WEB&amp;cver=html5" type="video/mp4">
</video>
Raw
script.js
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 92;
}, false);
Raw
style.scss
$base-font-weight: 400;
$base-font-size: 16px;
$base-line-height: 24px;
$base-font-family: "Freight Text", Georgia, Cambria, "Times New Roman", Times, serif;
$base-spacing-unit: $base-line-height;
$half-spacing-unit: $base-spacing-unit / 2;
$heading-font-family: "Proxima Nova", AvenirNext-Regular, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$small-heading-font-family: $heading-font-family;
$monospace-font-family: "M+ 1m", Consolas, "Lucida Console", Courier, monospace;
$ampersand-font-family: Ampersand, Georgia, serif;
$tera-size: 56px;
$giga-size: 48px;
$mega-size: 40px;
$kilo-size: 32px;
$alpha-size: 28px;
$beta-size: 24px;
$gamma-size: 22px;
$delta-size: 20px;
$epsilon-size: 18px;
$zeta-size: 16px;
$smallprint: 12px;
$microcopy: 10px;
$swatch-one: #000; // background-colour
$swatch-two: #777782; // copy-colour
$swatch-three: #587ae6; // accent-colour
$swatch-four: #51b364; // positive-colour
$swatch-five: #f03513; // destructive-colour
$open-quote: \201C;
$close-quote: \201D;
/**
* _tools.fuctions.scss
*/
@function quarter($base-spacing-unit) {
@return round($base-spacing-unit / 4);
}
@function halve($base-spacing-unit) {
@return round($base-spacing-unit / 2);
}
@function double($base-spacing-unit) {
@return round($base-spacing-unit * 2);
}
/**
* _tools.mixins.scss
*/
@mixin font-size($font-size, $line-height: true) {
font-size: $font-size;
font-size: ($font-size / $base-font-size) * 1rem;
@if $line-height == true {
line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
}
/**
* `@include breakpoint(bp-one) { ... }`
*/
@mixin breakpoint($name) {
@if $name == "bp-one" {
@media (min-width: 355px) {
@content;
}
}
@else if $name == "bp-two" {
@media (min-width: 597px) {
@content;
}
}
@else if $name == "bp-three" {
@media (min-width: 708px) {
@content;
}
}
@else if $name == "bp-four" {
@media (min-width: 1025px) {
@content;
}
}
}
/**
* `@include vendor(border-radius, 4px);`
*/
@mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
/**
* `.foo{ @include vendor(animation, shrink 3s); }`
*/
@mixin keyframe ($animation-name){
@-webkit-keyframes $animation-name{
@content;
}
@-moz-keyframes $animation-name{
@content;
}
@-ms-keyframes $animation-name{
@content;
}
@-o-keyframes $animation-name{
@content;
}
@keyframes $animation-name{
@content;
}
}
/**
* _generic.global-box-sizing.scss
*/
* {
&,
&:before,
&:after {
box-sizing: border-box;
}
}
/**
* _generic.clearfix
*/
.cf {
&:after {
content: "";
display: table;
clear: both;
}
}
/**
* _generic.shared
*/
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
blockquote,p,address,
table,
fieldset,
figure,
pre {
margin-bottom: $base-spacing-unit;
}
ol,ul,
dt {
margin-left: $base-spacing-unit;
}
/**
* _base.page.scss
*/
@-ms-viewport {
width: device-width;
@media screen and (max-width:400px){
@-ms-viewport {
width: 320px;
}
}
}
@viewport {
width: device-width;
}
html {
font-weight: $base-font-weight;
font-size: ($base-font-size / 16px) * 1em;
line-height: $base-line-height / $base-font-size;
font-family: $base-font-family;
-webkit-font-smoothing: antialiased;
@media screen and (min-width:0px) and (max-width:249px){
& {
font-size: 75%;
}
}
@media screen and (min-width:250px) and (max-width:319px){
& {
font-size: 87.5%;
}
}
@media screen and (min-width: 1199px){
& {
font-size: 112.5%;
}
}
@media print,(-o-min-device-pixel-ratio:5/4),(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){
& {
font-weight: 300;
}
}
}
body {
color: $swatch-two;
background-color: $swatch-one;
}
::selection {
color: #222;
background-color: hsla(169,68,60,0.2);
text-shadow: none;
}
.videoplayer {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
.scale {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
position: absolute;
top: 55%;
left: 50%;
z-index: 500;
border-radius: 50%;
background: rgba(81,179,100,0.8);
box-shadow: inset 0 0 0 4px #fff;
-webkit-animation: constrict 2s infinite;
}
@-webkit-keyframes "constrict" {
0% { box-shadow: inset 0 0 0 4px #fff; background: rgba(81,179,100,0.8); }
60% { box-shadow: inset 0 0 0 12px #fff; background: rgba(81,179,100,0); }
100% { box-shadow: inset 0 0 0 4px #fff; background: rgba(81,179,100,0.8); }
}
.scale:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: transparent;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.5);
-webkit-animation: pulse-scale 2s infinite;
-webkit-transform-origin: center center;
}
@-webkit-keyframes "pulse-scale" {
0% { -webkit-transform: scale(1); border-color: #fff; opacity: 0; }
60% { -webkit-transform: scale(1.25); border-color: #51B364; opacity: 1; }
100% { -webkit-transform: scale(1.5); border-color: #51B364; opacity: 0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment