Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@julia-bocchi
julia-bocchi authored Nov 2, 2024
1 parent 7b19759 commit 9670953
Show file tree
Hide file tree
Showing 8 changed files with 362 additions and 271 deletions.
13 changes: 13 additions & 0 deletions font/字魂白鸽天行体(商用需授权)/字体仅供设计交流试用，如需商用请购买授权.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
【字魂字体非商用授权说明】

1、字魂当前已上线5000+款原创字库，被广泛应用于互联网、电商、包装、平面广告、企业VI等设计领域，服务超30000家企业。

2、字魂网所有字体受《中华人民共和国著作权法》、《计算机软件保护条例》、《中华人民共和国商标法》和其他知识产权法律法规及国际公约、条约的保护。

3、字魂字体的商业使用（除个人非商用以外的任何使用方式）均需事先获得字魂公司出具的授权证书/协议。

4、商用授权是指将字体用于任何媒介上具有商业性的、推广性的、广告性的、推销性的用途，包括但不限于印刷品、商业性的广播、电影或数字化产品、商业广告、市场推广、产品促销、产品包装、产品介绍等場景。

5、若未经字魂授权使用，不仅全额支付5倍标准授权费，并按侵权责任赔偿损失，且承担一切法律后果。

6、中文字体设计不易，为避免侵侵权对企业品牌、口碑造成影响，建议对外商业发布前购买版权。
3 changes: 3 additions & 0 deletions font/字魂白鸽天行体(商用需授权)/字魂-企业字体授权方案.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script>
location.href="https://izihun.com/zip/album/page1.html"
</script>
3 changes: 3 additions & 0 deletions font/字魂白鸽天行体(商用需授权)/字魂-扫码获取优惠价.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script>
location.href="https://izihun.com/zip/album/page4.html"
</script>
3 changes: 3 additions & 0 deletions font/字魂白鸽天行体(商用需授权)/字魂官网.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script>
location.href="https://izihun.com"
</script>
Binary file added font/字魂白鸽天行体(商用需授权)/字魂白鸽天行体(商用需授权).ttf
View file
Binary file not shown.
282 changes: 11 additions & 271 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,176 +4,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
background-image:url("pic/bg1.jpg");
background-size: cover;
background-repeat: no-repeat;
font-family: 'STZhongsong';
}
.left{
font-size: 450%;
writing-mode: vertical-lr;
position: absolute;
left: 0;
}
.right{
font-size: 450%;
writing-mode: vertical-lr;
position: absolute;
right: 0;
}
.shell{
position: relative;
width: 60vw;
height: 60vh;
max-width: 380px;
max-height: 250px;
margin: 0;
color: white;
perspective: 1000px;
transform-origin: center;
}
.content{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
transform-origin: center;
transform-style:preserve-3d;
transform: translateZ(-35vw) rotateY(0);
transition: 1s;
}
.item{
position: absolute;
width: 100%;
height: 100%;
max-width: 380px;
max-height: 250px;
border-radius: 6px;
background-size: cover;
transform-style: preserve-3d;
transition: all .1s;
transform: translateZ(-10vw);
}
.item:nth-child(1){
transform: rotateY(0) translateZ(35vw);
}
.item:nth-child(2){
transform: rotateY(60deg) translateZ(35vw);
}
.item:nth-child(3){
transform: rotateY(120deg) translateZ(35vw);
}
.item:nth-child(4){
transform: rotateY(180deg) translateZ(35vw);
}
.item:nth-child(5){
transform: rotateY(240deg) translateZ(35vw);
}
.item:nth-child(6){
transform: rotateY(300deg) translateZ(35vw);
}
.card{
width: 100%;
height: 100%;
position: relative;
border: 2px solid black;
border-radius: 10px;
z-index: 1;
background-size: cover;
}
.previous{
position: absolute;
top: 10%;
left: -50px;
height: 100%;
font-size: 40px;
color: white;
background-color: rgba(227, 249, 253,0.35);
border: 0;
border-radius: 10px;
padding: 10px;
cursor: pointer;
transition: all .1s;
opacity: 0;
}
.next{
position: absolute;
top: 10%;
right: -50px;
height: 100%;
font-size: 40px;
color: white;
background-color: rgba(227, 249, 253,0.35);
border: 0;
border-radius: 10px;
padding: 10px;
cursor: pointer;
transition: all .1s;
opacity: 0;
}
.next:hover,.previous:hover{
opacity: 1;
}
h2{
margin: 0;
padding: 0;
color: black;
transform: translateY(100%);
opacity: 0;
transition: all .3s;
}
p{
color: black;
margin: 0;
padding: 0;
font-size: 20px;
transform: translateY(-100%);
opacity: 0;
transition: all .3s;
font-size: large;
}
p.active{
opacity: 1;
transform: translateY(0);
}
h2.active{
opacity: 1;
transform: translateY(0);
}
.setting{
position: fixed;
right: 0;
top: 0;
}
.setting button{
width: 100px;
height: 40px;
border: 0;
border-radius: 10px;
background-color: rgba(227, 249, 253,0.35);
color: black;
cursor: pointer;
transition: all .1s;
}
.setting button:hover{
opacity: 0.7;
}
</style>
<!-- css引用 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="left">勤读力耕</h1>
<h1 class="right">立己达人</h1>
<h1 class="top">为了人类心智的荣耀</h1>

<!-- 轮播图内容 -->
<div class="shell">
<div class="content">
<!-- item里存放图片和文字，并给每个item设置自定义元素方便后面操作 -->
<div class="item" data-id = "1">
<h2>金秋十月 柿柿如意</h2>
<button class="previous">&#60</button>
Expand Down Expand Up @@ -223,116 +65,14 @@ <h2>校园风光</h2>
</div>
</div>
</div>

<!-- 其他操作 -->
<div class="setting">
<button id="button1">切换背景</button>
<button id = "button2">投屏</button>
</div>
</body>
<script>

const content = document.querySelector('.content');//获取content用于旋转
const items = document.querySelectorAll('.item');//获取容器
var animationInterval;//定时器
let angle = 0;//选择角度
const theta = 360 / items.length;//每次增加角度
//旋转函数
function rotateCarousel() {
angle += theta//变化
content.style.transform = 'translateZ(' + -35 + 'vw)' + 'rotateY(' + -angle + 'deg)' ;
content.style.transition = 'transform 1s';//是变化更流畅
}
function startAnimation() {
//若间隔器不在则添加
if (!animationInterval) {
animationInterval = setInterval(rotateCarousel, 3000);
}
}
function pauseAnimation() {
//移除间隔器
if (animationInterval) {
clearInterval(animationInterval);
animationInterval = null;
}
}
startAnimation()
//图片监听事件
items.forEach(item => {
const p = document.querySelectorAll("p")[`${item.dataset.id}` - 1];
const h2 = document.querySelectorAll("h2")[`${item.dataset.id}` - 1];
item.addEventListener('mouseover', function(e) {
pauseAnimation();
const multiple = 20;
let mouseOverContainer = this;
const element = document.querySelectorAll(".card")[`${this.dataset.id}` - 1];
p.classList.add('active');
h2.classList.add('active');
function transformElement(x, y) {
let box = element.getBoundingClientRect();
let calcX = -(y - box.y - (box.height / 2)) / multiple;
let calcY = (x - box.x - (box.width / 2)) / multiple;

element.style.transform = "rotateX(" + calcX + "deg) rotateY(" + calcY + "deg)";
}
mouseOverContainer.addEventListener('mousemove', (e) => {
if(e.target.tagName === 'DIV'){
window.requestAnimationFrame(function() {
transformElement(e.clientX, e.clientY);
});
}

});
mouseOverContainer.addEventListener('mouseleave', (e) => {
window.requestAnimationFrame(function() {
element.style.transform = "rotateX(0) rotateY(0)";
});
});

});
item.addEventListener('mouseout', function(e) {
startAnimation();

p.classList.remove('active');
h2.classList.remove('active');
});
});
//按钮
function previous() {
pauseAnimation();
angle = angle - theta;
updateTransform();//更新位置
}
function nextbutton() {
pauseAnimation();
angle = angle + theta;
updateTransform();//更新位置
}
//更新content
function updateTransform() {
content.style.transform = 'translateZ(-35vw) rotateY(' + -angle + 'deg)';
content.style.transition = 'transform 1s';
startAnimation(); // Restart the animation after updating the transform
}
document.querySelectorAll('.previous').forEach(button => {
button.addEventListener('click', previous);
})
document.querySelectorAll('.next').forEach(button => {
button.addEventListener('click', nextbutton);
})


//
const winterChange = document.querySelector('#button1');
winterChange.addEventListener('click',function(){
if(document.querySelector('body').style.backgroundImage === 'url("pic/bg1.jpg")')
document.querySelector('body').style.backgroundImage = "url('pic/bg2.jpg')";
else document.querySelector('body').style.backgroundImage = 'url("pic/bg1.jpg")';
})

const button2 = document.querySelector('#button2');

button2.addEventListener('click',function(){
let id = (angle / 60) - Math.floor((angle / 360)) * 6 + 1;
document.querySelector('body').style.backgroundImage = `url('pic/pic${id}.jpg')`;
})
</script>
</html>
<!-- 引用js -->
<script src="index.js"></script>
</html>
Loading

0 comments on commit 9670953

Please sign in to comment.