Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added simpleLevel

Browse Source
This commit is contained in:
silas
2018-05-22 10:28:17 +02:00
parent cae3ef29ea
commit f7cbd1da71
9 changed files with 173 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/scss/wordRotator.scss
View File

@@ -1,36 +1,120 @@
.segment
{
$rotationDegrees: (90 180 270 360);
@for $i from 1 through length($rotationDegrees) {
$startDegree: ((nth($rotationDegrees, $i)+270)%360);
@keyframes rotate-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{$startDegree}deg)
}
100% {
transform: rotate(#{nth($rotationDegrees, $i)}deg)
}
}
//@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
// 0% {
// transform: rotate(#{nth($rotationDegrees, $i)}deg)
// }
// 100% {
// transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
// }
//}
}
.segment:not(.segment-row) {
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
animation-name: rotate-#{nth($rotationDegrees, $i)};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: linear;
.segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
}
}
}
}
}
}
.segment {
cursor: pointer;
display: inline-block;
text-align: center;
&.segment-parent{
position: relative;
transition: .0s;
&.segment-row {
display: block;
width: 100%;
animation: none !important;
}
&.segment-leaf {
min-width: 15px;
height: 30px;
}
&.segment-parent {
border: solid 1px #a9a9a9;
border-radius: 3px;
.segment{
.segment {
width: 50%;
}
}
&.rotate-90
{
transform: rotate(90deg);
.segment{
transform: rotate(-90deg);
}
}
&.rotate-180
{
transform: rotate(180deg);
.segment{
transform: rotate(-180deg);
}
}
&.rotate-270
{
transform: rotate(270deg);
.segment{
transform: rotate(-270deg);
}
}
//&.rotate-0 {
// animation-name: rotate-360;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(360deg);
// .segment {
// transform: rotate(-360deg);
// }
//}
//
//&.rotate-90 {
// animation-name: rotate-90;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(90deg);
// .segment {
// transform: rotate(-90deg);
// }
//}
//
//&.rotate-180 {
// animation-name: rotate-180;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(180deg);
// .segment {
// transform: rotate(-180deg);
// }
//}
//
//&.rotate-270 {
// animation-name: rotate-270;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(270deg);
// .segment {
// transform: rotate(-270deg);
// }
//}
}