bespokejs / bespoke

DIY Presentation Micro-Framework
http://markdalgleish.com/projects/bespoke.js/
MIT License
4.69k stars 442 forks source link

Coverflow Scss #16

Closed DrMabuse23 closed 11 years ago

DrMabuse23 commented 11 years ago

/* Coverflow Theme */ @mixin transformItem($translateX, $rotateY, $scale,$zIndex,$opacitiy) { -webkit-transform: translateX($translateX) rotateY($rotateY) scale($scale); -moz-transform: translateX($translateX) rotateY($rotateY) scale($scale); -ms-transform: translateX($translateX) rotateY($rotateY) scale($scale); -o-transform: translateX($translateX) rotateY($rotateY) scale($scale); transform: translateX($translateX) rotateY($rotateY) scale($scale); -sand-transform: translateX($translateX) rotateY($rotateY) scale($scale); z-index: $zIndex; opacity: $opacitiy; } .coverflow { height: 320px; position: relative; article{ -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; position: absolute; top: 0px; right: 0; left: 43%; bottom: 0; } section{ background: transparent; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; background: transparent; width: 72px; height: 280px; position: absolute; padding-top: 0; opacity: 0; a{ color: rgb(42, 206, 185); } &.bespoke-active { opacity: 1; z-index: 1; } &.bespoke-slide { -webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease; -moz-transition: -moz-transform .7s ease, opacity .7s ease, background-color .7s ease; -ms-transition: -ms-transform .7s ease, opacity .7s ease, background-color .7s ease; -o-transition: -o-transform .7s ease, opacity .7s ease, background-color .7s ease; transition: transform .7s ease, opacity .7s ease, background-color .7s ease; } &.bespoke-before { @include transformItem(-140px,-5deg,0.5,6,0.0); } &.bespoke-before-3 { @include transformItem(-128px,5deg,0.6,7,0.4); } &.bespoke-before-2 { @include transformItem(-92px,5deg,0.7,9,0.5); } &.bespoke-before-1 { @include transformItem(-56px,5deg,0.8,9,0.6); } &.bespoke-after { @include transformItem(36px,-5deg,0.8,6,0.0); } &.bespoke-after-1 { @include transformItem(56px,-5deg,0.8,9,0.6); } &.bespoke-after-2 { @include transformItem(92px,-5deg,0.7,8,0.5); } &.bespoke-after-3 { @include transformItem(128px,-5deg,0.6,7,0.4); } } }

DrMabuse23 commented 11 years ago

For Your Community maybe everyone need it example http://pascal-brewing.de

markdalgleish commented 11 years ago

If you'd like to share a theme, I'd recommend making a theme repo. You could name it something like bespoke-coverflow.scss :)

DrMabuse23 commented 11 years ago

ok sorry

markdalgleish commented 11 years ago

No worries, no need to apologise :)