旋转图像并使文本稍后出现在图像上
Rotation of a image and making the text to come later over the image
我如何使图像旋转,而网站正在滚动,并使文本出现在图像的顶部稍后?如何对样式进行更改以自动执行,例如图像的旋转,或滚动时落在图像上的文本?
$(window).scroll(function () {
$('#fixedImage').css({
'transform': 'rotate(' + ($(document.body).scrollTop() / $(document.body).height() * 360) + 'deg)'
});
});
body {
height: 2000px;
margin: 0;
}
#fixedImage {
width: 100px;
height: 100px;
position: fixed;
top: 20px;
left: 20px;
z-index:-1;
background:red;
}
#fixedImage img{
width:100%;
height:100%;
}
.text{
margin-top:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div id="fixedImage">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg">
</div>
<div class="text">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
</p>
</div>
</body>
你可以像这样用jquery制作它。或者你可以找到很多插件
$(window).scroll(function () {
$('#fixedImage').css({
'transform': 'rotate(' + ($(document.body).scrollTop() / $(document.body).height() * 360) + 'deg)'
});
});
窗口。编写你想要执行的动画查看更多信息https://stackoverflow.com/a/18540697/7011496
相关文章:
- 将HTML表格导出到带有文本和图像的excel中
- 可单击滚动图像以显示文本框
- 正确输入的文本会更改图像
- 无法将包含文本和图像的SVG保存到画布
- 如何知道锚在文本或图像上
- 自动缩放图像以匹配文本高度
- 一个javascript实现base64图像编码并将结果写入文本文件
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- jQuery对请求图像的外部文本进行查询
- 如何检测移动浏览器(PHP/Javascript),然后进行图像/文本更改
- ASP.NET网页-使用脚本显示由预定义日期和时间指定的图像/文本
- 合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应
- 使用javascript在html中制作一个随机的图像/文本/url元素
- 将彩色带置于图像/标签+图像/文本对齐方式之上->JavaScript Titanium移动应用程序
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页
- 脚本标记中的Paperclip图像集显示的是图像文本url,而不是图像-expandablebanners.js
- 图像文本上的代码后面
- 电子邮件中包含图像/文本/插图的HTML滑块
- 如何从不同的媒体子集创建视频,如图像/文本等