时间戳

首页 > 解决方案 > 如何实现类似于 http://thisiskiosk.com/ 的可滚动圆形文本效果

javascript - 如何实现类似于 http://thisiskiosk.com/ 的可滚动圆形文本效果

问题描述

如果您在此处查看KIOSK WEBSITE他们在 javascript 中有“我们已打开”循环类型（我知道如何做到这一点）但我不知道如何在滚动时实现这一点。就像文本如何移动向上或向下滚动时。如何在 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);

开放的建议。

标签： javascripthtmlcss

解决方案

您可以在滚动事件上旋转它。这只是div根据您滚动页面顶部的距离来旋转 。

我在文本中添加了一个height和，并将其定位以查看效果。widthfixed

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! :)-->

推荐阅读