[英]How can I achieve similar images to Medium.com's Feature Headers? (Cropped Images)
[英]How can I achieve a scrollable circular text effect similar to http://thisiskiosk.com/
如果您在此處查看KIOSK網站,他們會在javascript中使用“ WE ARE OPEN”循環類型(我知道該怎么做),但我不知道是如何在滾動時實現這一點。例如,文本如何移動當上下滾動時,如何在HTML / CSS / JS中獲得它?
在這里查看我處理過的代碼https://codepen.io/noel_emmanuel/pen/WJxRZW
HTML:
<!--just a container used to position in the page-->
<div class="container">
<!--the holders/targets for the text, reuse as desired-->
<div class="circTxt" id="test"></div>
</div>
<!--I told you it was simple! :)-->
CSS:
body {
background: #111;
}
.container {
/*centers in the container*/
text-align: center;
}
div.circTxt {
/*allows for centering*/
display: inline-block;
/*adjust as needed*/
margin-bottom: 128px;
color: whitesmoke;
}
JS:
function circularText(txt, radius, classIndex) {
txt = txt.split(""),
classIndex = document.getElementsByClassName("circTxt")[classIndex];
var deg = 360 / txt.length,
origin = 0;
txt.forEach((ea) => {
ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`;
classIndex.innerHTML += ea;
origin += deg;
});
}
circularText("WE ARE OPEN", 100, 0);
公開征求意見。
您可以在滾動事件上旋轉它。 只是簡單地旋轉div
具體取決於您滾動到頁面頂部的距離。
我在文本上添加了height
和width
,並fixed
了它的位置以查看效果。
function circularText(txt, radius, classIndex) { txt = txt.split(""), classIndex = document.getElementsByClassName("circTxt")[classIndex]; var deg = 360 / txt.length, origin = 0; txt.forEach((ea) => { ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`; classIndex.innerHTML += ea; origin += deg; }); } circularText("WE ARE OPEN", 100, 0); $(document).ready(function(){ $(window).scroll(function(e){ rotateText(); }); function rotateText(){ var scrolled = $(window).scrollTop(); $('div.circTxt').css('transform','rotate('+scrolled+'deg)'); } });
body { background: #111; } .container { /*centers in the container*/ text-align: center; height: 4000px; } div.circTxt { /*allows for centering*/ display: inline-block; /*adjust as needed*/ margin-bottom: 128px; color: whitesmoke; position: fixed; height: 200px; width: 200px; transform-origin: 0% 59%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--just a container used to position in the page--> <div class="container"> <!--the holders/targets for the text, reuse as desired--> <div class="circTxt" id="test"></div> </div> <!--I told you it was simple! :)-->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.