Skip to content

Instantly share code, notes, and snippets.

@elrumordelaluz

elrumordelaluz/SassMeister-input-HTML.html

Last active August 29, 2015 14:07
Show Gist options
  • Save elrumordelaluz/d60795e11c2688c211e9 to your computer and use it in GitHub Desktop.
Save elrumordelaluz/d60795e11c2688c211e9 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="btn btn-light-grey btn-share" id="hola">
Share
<div class="xtra-content">
<button class="btn btn-small btn-blue">A</button>
<button class="btn btn-small btn-skyblue">B</button>
<button class="btn btn-small btn-red">C</button>
<buttton class="btn btn-small btn-nblue">D</i>
</buttton></div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----
@mixin photo-slider($slides, $slide_time, $name: 'photo-slider', $slide_height:340px, $bg-anim: false) {
$total_time: $slide_time * $slides;
@at-root {
@keyframes #{$name}-opacity {
#{100%/($slides)+100%/($slides*$slides*2)}, 100% { opacity: 0; visibility: hidden; }
#{100%/($slides*$slides)}, #{100%/$slides} { opacity: 1; visibility: visible; }
}
@keyframes #{$name}-background {
to { background-position: bottom center;}
}
@keyframes #{$name}-text-left {
#{100%/($slides)+100%/($slides*8)}, 100% {
transform: translateX(-1000px);
opacity:0; visibility: hidden;
}
#{100%/($slides*4)}, #{100%/$slides} {
transform: translateX(0);
opacity:1; visibility: visible;
}
}
@keyframes #{$name}-text-right {
#{100%/($slides)+100%/($slides*8)}, 100% {
transform: translateX(1000px);
opacity:0; visibility: hidden;
}
#{100%/($slides*4)}, #{100%/$slides} {
transform: translateX(0);
opacity:1; visibility: visible;
}
}
}
.#{$name} {
width: 100%;
height: $slide_height;
position: relative;
overflow: hidden;
&:hover .photo-slide, &:hover .stext { animation-play-state: paused; }
.photo-slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
visibility: hidden;
animation: #{$name}-opacity $total_time linear infinite;
animation-play-state: running;
}
.slide-image {
width: 100%;
height: 100%;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
@if ($bg-anim) {
animation: #{$name}-background $total_time linear infinite alternate;
}
}
.slide-text {
position: absolute;
bottom: 10%;
z-index: 999;
@media (max-width: 768px) {
width: 100%;
.btn { margin: auto; float: none; }
}
}
.stext {
display: inline-block;
padding: 5px 10px;
color:#f7f7f7;
opacity: 0;
animation-duration: $total_time;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: running;
// @include colorize(...);
@media (max-width: 768px) {
text-align: center;
display: block;
}
}
.slide-text-left {
left: 5%;
text-align: left;
.stext {
transform: translateX(-1000px);
animation-name: #{$name}-text-left;
}
@media (max-width: 768px) { left: auto; }
}
.slide-text-right {
right: 5%;
text-align: right;
.stext {
transform: translateX(1000px);
animation-name: #{$name}-text-right;
}
@media (max-width: 768px) {
right: auto;
}
}
@for $i from 1 through $slides{
.photo-slide:nth-child(#{$i}) {
animation-delay: $slide_time*$i - $slide_time;
.slide-text .stext {
animation-delay: $slide_time*$i - $slide_time;
}
}
}
}
}
#slide-demo-1 { background-image: url(http://lorempixel.com/1200/800/business); }
#slide-demo-2 { background-image: url(http://lorempixel.com/1200/800/fashion); }
#slide-demo-3 { background-image: url(http://lorempixel.com/1200/800/nature); }
#slide-demo-4 { background-image: url(http://lorempixel.com/1200/800/nightlife); }
@include photo-slider(4, 6s, 'photo-slider-demo');
Raw
SassMeister-output.css
#slide-demo-1 {
background-image: url(http://lorempixel.com/1200/800/business);
}
#slide-demo-2 {
background-image: url(http://lorempixel.com/1200/800/fashion);
}
#slide-demo-3 {
background-image: url(http://lorempixel.com/1200/800/nature);
}
#slide-demo-4 {
background-image: url(http://lorempixel.com/1200/800/nightlife);
}
@keyframes photo-slider-demo-opacity {
28.125%, 100% {
opacity: 0;
visibility: hidden;
}
6.25%, 25% {
opacity: 1;
visibility: visible;
}
}
@keyframes photo-slider-demo-background {
to {
background-position: bottom center;
}
}
@keyframes photo-slider-demo-text-left {
28.125%, 100% {
transform: translateX(-1000px);
opacity: 0;
visibility: hidden;
}
6.25%, 25% {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
@keyframes photo-slider-demo-text-right {
28.125%, 100% {
transform: translateX(1000px);
opacity: 0;
visibility: hidden;
}
6.25%, 25% {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
.photo-slider-demo {
width: 100%;
height: 340px;
position: relative;
overflow: hidden;
}
.photo-slider-demo:hover .photo-slide, .photo-slider-demo:hover .stext {
animation-play-state: paused;
}
.photo-slider-demo .photo-slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
visibility: hidden;
animation: photo-slider-demo-opacity 24s linear infinite;
animation-play-state: running;
}
.photo-slider-demo .slide-image {
width: 100%;
height: 100%;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.photo-slider-demo .slide-text {
position: absolute;
bottom: 10%;
z-index: 999;
}
@media (max-width: 768px) {
.photo-slider-demo .slide-text {
width: 100%;
}
.photo-slider-demo .slide-text .btn {
margin: auto;
float: none;
}
}
.photo-slider-demo .stext {
display: inline-block;
padding: 5px 10px;
color: #f7f7f7;
opacity: 0;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: running;
}
@media (max-width: 768px) {
.photo-slider-demo .stext {
text-align: center;
display: block;
}
}
.photo-slider-demo .slide-text-left {
left: 5%;
text-align: left;
}
.photo-slider-demo .slide-text-left .stext {
transform: translateX(-1000px);
animation-name: photo-slider-demo-text-left;
}
@media (max-width: 768px) {
.photo-slider-demo .slide-text-left {
left: auto;
}
}
.photo-slider-demo .slide-text-right {
right: 5%;
text-align: right;
}
.photo-slider-demo .slide-text-right .stext {
transform: translateX(1000px);
animation-name: photo-slider-demo-text-right;
}
@media (max-width: 768px) {
.photo-slider-demo .slide-text-right {
right: auto;
}
}
.photo-slider-demo .photo-slide:nth-child(1) {
animation-delay: 0s;
}
.photo-slider-demo .photo-slide:nth-child(1) .slide-text .stext {
animation-delay: 0s;
}
.photo-slider-demo .photo-slide:nth-child(2) {
animation-delay: 6s;
}
.photo-slider-demo .photo-slide:nth-child(2) .slide-text .stext {
animation-delay: 6s;
}
.photo-slider-demo .photo-slide:nth-child(3) {
animation-delay: 12s;
}
.photo-slider-demo .photo-slide:nth-child(3) .slide-text .stext {
animation-delay: 12s;
}
.photo-slider-demo .photo-slide:nth-child(4) {
animation-delay: 18s;
}
.photo-slider-demo .photo-slide:nth-child(4) .slide-text .stext {
animation-delay: 18s;
}
Raw
SassMeister-rendered.html
<div class="btn btn-light-grey btn-share" id="hola">
Share
<div class="xtra-content">
<button class="btn btn-small btn-blue">A</button>
<button class="btn btn-small btn-skyblue">B</button>
<button class="btn btn-small btn-red">C</button>
<buttton class="btn btn-small btn-nblue">D</i>
</buttton></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment