Created
January 24, 2014 23:03
-
-
Save scottkellum/8608635 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> | |
<div class="squares"> | |
<div class="square1"></div> | |
<div class="square2"></div> | |
<div class="square3"></div> | |
<div class="square4"></div> | |
</div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
@import "compass"; | |
@mixin parallax-init { | |
html, body { | |
display: block; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
body { | |
-webkit-overflow-scrolling: touch; | |
overflow: auto; | |
@include perspective(1px); | |
@include transform-style(preserve-3d); | |
} | |
} | |
@mixin parallax($distance: 0) { | |
@include transform( | |
translateZ($distance * 1px) | |
scale(1 / pow(2.718281828, $distance)) | |
); | |
} | |
/////////////////////////////// | |
@include parallax-init; | |
.squares { | |
text-align: center; | |
font-size: 0; | |
} | |
.square1, .square2, .square3, .square4 { | |
width: 200px; | |
height: 200px; | |
background: blue; | |
margin: auto; | |
display: inline-block; | |
} | |
.square1 { | |
@include parallax(-0.7); | |
background: red; | |
} | |
.square2 { | |
@include parallax(-.2); | |
background: yellow; | |
} | |
.square4 { | |
@include parallax(0.5); | |
background: green; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
display: block; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
body { | |
-webkit-overflow-scrolling: touch; | |
overflow: auto; | |
-moz-perspective: 1px; | |
-webkit-perspective: 1px; | |
perspective: 1px; | |
-moz-transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.squares { | |
text-align: center; | |
font-size: 0; | |
} | |
.square1, .square2, .square3, .square4 { | |
width: 200px; | |
height: 200px; | |
background: blue; | |
margin: auto; | |
display: inline-block; | |
} | |
.square1 { | |
-moz-transform: translateZ(-0.7px) scale(2.01375); | |
-ms-transform: translateZ(-0.7px) scale(2.01375); | |
-o-transform: translateZ(-0.7px) scale(2.01375); | |
-webkit-transform: translateZ(-0.7px) scale(2.01375); | |
transform: translateZ(-0.7px) scale(2.01375); | |
background: red; | |
} | |
.square2 { | |
-moz-transform: translateZ(-0.2px) scale(1.2214); | |
-ms-transform: translateZ(-0.2px) scale(1.2214); | |
-o-transform: translateZ(-0.2px) scale(1.2214); | |
-webkit-transform: translateZ(-0.2px) scale(1.2214); | |
transform: translateZ(-0.2px) scale(1.2214); | |
background: yellow; | |
} | |
.square4 { | |
-moz-transform: translateZ(0.5px) scale(0.60653); | |
-ms-transform: translateZ(0.5px) scale(0.60653); | |
-o-transform: translateZ(0.5px) scale(0.60653); | |
-webkit-transform: translateZ(0.5px) scale(0.60653); | |
transform: translateZ(0.5px) scale(0.60653); | |
background: green; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> | |
<div class="squares"> | |
<div class="square1"></div> | |
<div class="square2"></div> | |
<div class="square3"></div> | |
<div class="square4"></div> | |
</div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment