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

Rotationsrichtung in beide Richtungen möglich

Browse Source
This commit is contained in:
silas
2018-09-25 14:48:12 +02:00
parent 35b2f61d00
commit 895cb36fea
10 changed files with 122 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/scss/wordRotator.scss
View File

@@ -86,7 +86,7 @@ $coinTowerDimension: 28px;
//Segments
$rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s;
$animationDuration: .25s;
@for $i from 1 through 10 {
$value: percentage($i/10);
@@ -109,6 +109,15 @@ $animationDuration: 0.25s;
transform: rotate(#{nth($rotationDegrees, $i)}deg);
}
}
@keyframes rotate-reverse-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{(nth($rotationDegrees, $i))+90}deg);
}
100% {
transform: rotate(#{$startDegree+90}deg);
}
}
}
.segment:not(.segment-row):not(.segment-triangle) {
@@ -139,6 +148,23 @@ $animationDuration: 0.25s;
}
}
}
&.reverse{
//animation-name: rotate-reverse-#{(nth($rotationDegrees, $i))%360+90};
animation-name: rotate-reverse-#{nth($rotationDegrees, $i)};
> .child-container {
> .segment {
//animation-name: rotate-reverse-#{360- (nth($rotationDegrees, $i)%360)};
animation-name: rotate-reverse-#{(540- nth($rotationDegrees, $i))%360+90};
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-reverse-#{($animationName+90)%360+90};
}
}
}
}
}
}
}
}
@@ -171,6 +197,10 @@ $animationDuration: 0.25s;
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-timing-function: linear;
&.reverse{
animation-name: rotate-reverse-#{$animationName};
}
}
}
}