自旋文本圍繞點的項目不帶旋轉

Question

我想圍繞中心點旋轉文本（附加到滾動位置）。我不想要的東西是旋轉和不可讀的項目。他們應該走一圈路徑。你有什麼想法，我怎麼能做到這一點？

我爲我的滾動動畫使用Skrollr，但我對任何東西都是開放的。

starting position

rotate in progress

Answer 1

只是一個想法，你可以使用普通的CSS關鍵幀來實現這一目標。您可以在某個事件的父元素上觸發一個類，並僅在應用此類時將動畫設置爲發生。我做了一個簡單的片段來演示。不知道這是否會爲你的情況做好工作。

@keyframes circle { 
 
    from { transform:rotate(0deg); } 
 
    to { transform:rotate(360deg); } 
 
} 
 

 
@keyframes inner-circle { 
 
    from { transform:rotate(0deg); } 
 
    to { transform:rotate(-360deg); } 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: #CCCCCC; 
 
    border-radius: 50%; 
 
    font-size:12px; 
 
    animation: circle 5s linear infinite; 
 
} 
 

 
img { 
 
    width: 75px; 
 
    height: 75px; 
 
} 
 

 
.div1 { 
 
    position: absolute; 
 
    width:100px; 
 
    height:100px; 
 
    margin: 20px auto 0; 
 
    transform-origin:50% 50%; 
 
} 
 

 
.div2 { 
 
    position: absolute; 
 
    width:100px; 
 
    height:100px; 
 
    margin: 275px auto 0; 
 
    color:red; 
 
    transform-origin:50% 50%; 
 
} 
 

 
.div3 { 
 
    width:100px; 
 
    height:100px; 
 
    margin: 20px auto 0; 
 
    color:blue; 
 
    transform-origin:50% 200px; 
 
} 
 

 
.div4 { 
 
    width:100px; 
 
    height:100px; 
 
    margin: 20px auto 0; 
 
    color:green; 
 
    transform-origin:50% 200px; 
 
} 
 

 
div > div { 
 
    animation: inner-circle 5s linear infinite; 
 
}

<div class="wrapper"> 
 
    <div class="div1"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/star-wars/512/darth_vader-128.png" /> 
 
    <p> 
 
     This is some text lorem 
 
    </p> 
 
    </div> 
 
    <div class="div2"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/star-wars/512/darth_vader-128.png" /> 
 
    <p> 
 
     This is some text lorem 
 
    </p> 
 
    </div> 
 
</div>