Skip to content

Instantly share code, notes, and snippets.

@gesteves

gesteves/SassMeister-input.scss

Created January 27, 2014 21:23
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gesteves/8657579 to your computer and use it in GitHub Desktop.
Save gesteves/8657579 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@import 'compass';
// Magic parallax mixins
$parallax-perspective : 1 !default;
$parallax-element : "body" !default;
$parallax-ios : true !default;
@mixin parallax-init(
$perspective : $parallax-perspective,
$element : $parallax-element,
$parallax-ios : $parallax-ios
) {
@if $element == "body" {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
}
#{$element} {
overflow: auto;
@include perspective($perspective * 1px);
@include transform-style(preserve-3d);
// Allows for smooth scrolling but disables parallax effects.
@if $parallax-ios == false {
-webkit-overflow-scrolling: touch;
}
// Preserve 3D
&, * {
@include transform-style(preserve-3d);
}
}
}
@mixin parallax(
$distance : 0,
$perspective : $parallax-perspective
) {
@include transform(
translateZ($distance * $perspective * 1px)
scale(abs($distance - 1))
);
z-index: $distance * 1000;
}
// End of magic parallax mixins
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
$primary: #1586D1;
@include parallax-init;
.container {
:nth-child(1) {
@include parallax(-.4);
top: 200px;
left: 200px;
}
:nth-child(1) {
@include parallax(-.4);
top: 200px;
left: 200px;
}
:nth-child(1) {
@include parallax(-.4);
top: 200px;
left: 200px;
}
:nth-child(2) {
@include parallax(.2);
top: 200px;
left: 500px;
}
:nth-child(3) {
@include parallax(.3);
top: 400px;
left: 600px;
}
:nth-child(4) {
@include parallax(.1);
top: 500px;
left: 500px;
}
:nth-child(5) {
@include parallax(-2);
top: 2000px;
left: 2000px;
}
:nth-child(6) {
@include parallax(.4);
top: 600px;
left: 300px;
}
:nth-child(7) {
@include parallax(-1);
top: 400px;
left: 1000px;
}
:nth-child(8) {
@include parallax(-.4);
top: 100px;
left: 1400px;
}
:nth-child(9) {
@include parallax(.4);
top: 900px;
left: 500px;
}
:nth-child(10) {
@include parallax(-1);
top: 1600px;
left: 100px;
}
padding: 10%;
max-width: 40em;
margin: auto;
> * {
position: absolute;
}
}
body {
font-family: Roboto, sans-serif;
font-weight: 100;
background: #EEF1F3;
line-height: 1;
}
h1, h2 {
font-weight: 100;
margin: 0;
}
h1 {
font-size: 5em;
color: $primary;
}
h2 {
font-size: 3em;
@include parallax(.2);
}
Raw
SassMeister-output.css
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: auto;
-moz-perspective: 1px;
-webkit-perspective: 1px;
perspective: 1px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body, body * {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container {
padding: 10%;
max-width: 40em;
margin: auto;
}
.container :nth-child(1) {
-moz-transform: translateZ(-0.4px) scale(1.4);
-ms-transform: translateZ(-0.4px) scale(1.4);
-o-transform: translateZ(-0.4px) scale(1.4);
-webkit-transform: translateZ(-0.4px) scale(1.4);
transform: translateZ(-0.4px) scale(1.4);
z-index: -400;
top: 200px;
left: 200px;
}
.container :nth-child(1) {
-moz-transform: translateZ(-0.4px) scale(1.4);
-ms-transform: translateZ(-0.4px) scale(1.4);
-o-transform: translateZ(-0.4px) scale(1.4);
-webkit-transform: translateZ(-0.4px) scale(1.4);
transform: translateZ(-0.4px) scale(1.4);
z-index: -400;
top: 200px;
left: 200px;
}
.container :nth-child(1) {
-moz-transform: translateZ(-0.4px) scale(1.4);
-ms-transform: translateZ(-0.4px) scale(1.4);
-o-transform: translateZ(-0.4px) scale(1.4);
-webkit-transform: translateZ(-0.4px) scale(1.4);
transform: translateZ(-0.4px) scale(1.4);
z-index: -400;
top: 200px;
left: 200px;
}
.container :nth-child(2) {
-moz-transform: translateZ(0.2px) scale(0.8);
-ms-transform: translateZ(0.2px) scale(0.8);
-o-transform: translateZ(0.2px) scale(0.8);
-webkit-transform: translateZ(0.2px) scale(0.8);
transform: translateZ(0.2px) scale(0.8);
z-index: 200;
top: 200px;
left: 500px;
}
.container :nth-child(3) {
-moz-transform: translateZ(0.3px) scale(0.7);
-ms-transform: translateZ(0.3px) scale(0.7);
-o-transform: translateZ(0.3px) scale(0.7);
-webkit-transform: translateZ(0.3px) scale(0.7);
transform: translateZ(0.3px) scale(0.7);
z-index: 300;
top: 400px;
left: 600px;
}
.container :nth-child(4) {
-moz-transform: translateZ(0.1px) scale(0.9);
-ms-transform: translateZ(0.1px) scale(0.9);
-o-transform: translateZ(0.1px) scale(0.9);
-webkit-transform: translateZ(0.1px) scale(0.9);
transform: translateZ(0.1px) scale(0.9);
z-index: 100;
top: 500px;
left: 500px;
}
.container :nth-child(5) {
-moz-transform: translateZ(-2px) scale(3);
-ms-transform: translateZ(-2px) scale(3);
-o-transform: translateZ(-2px) scale(3);
-webkit-transform: translateZ(-2px) scale(3);
transform: translateZ(-2px) scale(3);
z-index: -2000;
top: 2000px;
left: 2000px;
}
.container :nth-child(6) {
-moz-transform: translateZ(0.4px) scale(0.6);
-ms-transform: translateZ(0.4px) scale(0.6);
-o-transform: translateZ(0.4px) scale(0.6);
-webkit-transform: translateZ(0.4px) scale(0.6);
transform: translateZ(0.4px) scale(0.6);
z-index: 400;
top: 600px;
left: 300px;
}
.container :nth-child(7) {
-moz-transform: translateZ(-1px) scale(2);
-ms-transform: translateZ(-1px) scale(2);
-o-transform: translateZ(-1px) scale(2);
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index: -1000;
top: 400px;
left: 1000px;
}
.container :nth-child(8) {
-moz-transform: translateZ(-0.4px) scale(1.4);
-ms-transform: translateZ(-0.4px) scale(1.4);
-o-transform: translateZ(-0.4px) scale(1.4);
-webkit-transform: translateZ(-0.4px) scale(1.4);
transform: translateZ(-0.4px) scale(1.4);
z-index: -400;
top: 100px;
left: 1400px;
}
.container :nth-child(9) {
-moz-transform: translateZ(0.4px) scale(0.6);
-ms-transform: translateZ(0.4px) scale(0.6);
-o-transform: translateZ(0.4px) scale(0.6);
-webkit-transform: translateZ(0.4px) scale(0.6);
transform: translateZ(0.4px) scale(0.6);
z-index: 400;
top: 900px;
left: 500px;
}
.container :nth-child(10) {
-moz-transform: translateZ(-1px) scale(2);
-ms-transform: translateZ(-1px) scale(2);
-o-transform: translateZ(-1px) scale(2);
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index: -1000;
top: 1600px;
left: 100px;
}
.container > * {
position: absolute;
}
body {
font-family: Roboto, sans-serif;
font-weight: 100;
background: #EEF1F3;
line-height: 1;
}
h1, h2 {
font-weight: 100;
margin: 0;
}
h1 {
font-size: 5em;
color: #1586d1;
}
h2 {
font-size: 3em;
-moz-transform: translateZ(0.2px) scale(0.8);
-ms-transform: translateZ(0.2px) scale(0.8);
-o-transform: translateZ(0.2px) scale(0.8);
-webkit-transform: translateZ(0.2px) scale(0.8);
transform: translateZ(0.2px) scale(0.8);
z-index: 200;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment