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

update to laptop

Browse Source
This commit is contained in:
silas
2018-07-06 18:39:42 +02:00
parent f04c9ec9b7
commit eea36bb922
11 changed files with 206 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/scss/wordRotator.scss
View File

@@ -1,4 +1,5 @@
$rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s;
@for $i from 1 through 10 {
$value: percentage($i/10);
@@ -32,29 +33,81 @@ $rotationDegrees: (90 180 270 360);
}
}
.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:not(.segment-row):not(.segment-triangle) {
&.rotating {
overflow: hidden;
.segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: 0.25s;
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
animation-name: rotate-#{nth($rotationDegrees, $i)};
animation-duration: $animationDuration;
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;
> .child-container {
> .segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: $animationDuration;
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)+90;
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
}
}
}
}
}
}
}
&:not(.rotating) {
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
> .child-container {
> .segment {
transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
@if $animationName==0 {
$animationName: 360;
}
&.rotate-#{nth($rotationDegrees, $j)} {
transform: rotate(#{$animationName}deg);
background-color: white;
z-index: 1;
&.rotating {
animation-name: rotate-#{$animationName};
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-timing-function: linear;
> .child-container {
> .segment {
@if $animationName==360 {
$animationName: 0;
}
//animation-name: rotate-#{90+ $animationName};
//animation-duration: 2.5s;
//animation-fill-mode: forwards;
//animation-direction: reverse;
//animation-timing-function: linear;
}
}
}
}
}
}
}
}
@@ -66,6 +119,7 @@ $rotationDegrees: (90 180 270 360);
white-space: nowrap;
transition: none;
max-width: 100%;
//width: 100%;
* {
transition: none;
@@ -83,6 +137,7 @@ $rotationDegrees: (90 180 270 360);
user-select: none;
z-index: 1;
background-color: white;
line-height: 0;
&.segment-row {
display: block;
@@ -93,39 +148,35 @@ $rotationDegrees: (90 180 270 360);
&.segment-leaf {
min-width: 1em;
height: 2em;
line-height: 2em;
padding: 0.8em;
&:before {
content: " ";
display: block;
padding-top: 100%;
}
.leaf-element {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateY(50%);
}
}
&.segment-parent {
border: solid 1px #a9a9a9;
border-radius: 3px;
> .child-container{
> .segment {
width: 50%;
}
}
.segment {
//width: 50%;
//height: 50%;
}
padding: 1px;
}
&.segment-triangle {
//display: inline-block;
//width: 100%;
//animation: none !important;
//&.type-1 {
// > .child-container {
// > .segment-parent:first-child {
// //width: 100%;
// }
// > .segment-parent:not(:first-child) {
// //width: 50%;
// }
// }
//}
> .child-container {
> .segment-parent {
border: solid 3px #000000;
position: relative;
}
}
}
}