爱的编织：用JavaScript创造梦幻婚礼动态请柬！
引入
在当今数字化时代，爱情已经超越了纸笔之间的誓言，逐渐融入了代码的世界。随着技术的发展，一对新人选择用JavaScript编织他们的婚礼动态请柬，将爱情的温暖与创意的火花融入到每一行代码中。让我们一同走进这个数字化的婚礼世界，探索JavaScript所编织的爱的缤纷画面，见证着这对新人用代码绘就的爱情传奇。
动态效果的实现
在数字化婚礼邀请中，实现动态效果是一种吸引人的方式。通过使用JavaScript中的transform函数，可以实现视觉上的动态效果，比如旋转、缩放或者移动元素，让整个贺卡焕发生机。这种技术使得婚礼邀请不再是静态的图片或文字，而是一种充满活力和趣味的数字化体验。
transform 属性可以用于在网页中修改元素的旋转、缩放、倾斜和平移等变换效果。它可以接受多个值，每个值表示一个变换函数。以下是常用的一些 transform 属性及其功能：
translate(): 沿着X和Y轴移动元素。translateX(): 沿着X轴移动元素。translateY(): 沿着Y轴移动元素。scale(): 缩放元素，可以指定水平和垂直方向的缩放比例。scaleX(): 沿着X轴方向缩放元素。scaleY(): 沿着Y轴方向缩放元素。rotate(): 旋转元素，角度可以为正数（顺时针）或负数（逆时针）。skew(): 倾斜元素，可以指定X轴和Y轴的倾斜角度。skewX(): 沿着X轴倾斜元素。skewY(): 沿着Y轴倾斜元素。
这些属性可以单独应用，也可以组合使用，以实现各种复杂的变换效果。
贺卡的html部分
当创建一个动态贺卡时，HTML部分的代码可以包含贺卡的整体结构以及需要动态效果的元素。以下是这个动态贺卡的HTML代码示例：
<div class="book p3d">
<div class="book-cover p3d">
<div class="page back flip"></div>
<div class="page front p3d">
<div class="shadow"></div>
<div class="pic"></div>
</div>
</div>
<div class="front-cover p3d">
<div class="page front flip p3d">
</div>
<div class="page back"></div>
</div>
</div>
代码解释：
-
<div class="book p3d">: 这个<div>元素代表整本书的容器，并且应用了一个名为p3d的类，这个类用于指定贺卡容器的三维样式。 -
<div class="book-cover p3d">: 这个<div>元素代表贺卡的封面，也是贺卡的外部表面。它同样应用了p3d类，表示这个封面也具有三维效果。-
<div class="page back flip"></div>: 这个<div>元素代表封面的后面一页。它应用了back和flip类，表示这一页被翻转过来，呈现在用户视野中。 -
<div class="page front p3d">: 这个<div>元素代表封面的前面一页，也是用户通常看到的那一面。它应用了front和p3d类，表示这一页具有三维效果。<div class="shadow"></div>: 这个<div>元素代表封面的阴影效果。<div class="pic"></div>: 这个<div>元素代表封面的图片或者图案。
-
-
<div class="front-cover p3d">: 这个<div>元素代表书籍的正面封面，即打开书时用户首先看到的那一页。同样应用了p3d类，表示这个封面也具有三维效果。<div class="page front flip p3d"></div>: 这个<div>元素代表正面封面的一页，同样应用了front、flip和p3d类，表示这一页被翻转过来并且具有三维效果。<div class="page back"></div>: 这个<div>元素代表正面封面的后一页，是贺卡的内容页和图片页面。
CSS部分
代码展示：
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
font: 100%/1.25 Helvetica, arial, helvetica;
color: #fff;
perspective: 1000px;
background: linear-gradient(to bottom, #444, #999);
}
.book {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
cursor: pointer;
user-select: none;
transform: rotateX(60deg);
}
.page {
width: 300px;
height: 300px;
padding: 1em;
position: absolute;
left: 0;
top: 0;
text-indent: 2em;
}
.front {
background-color: #d93e2b;
}
.back {
background-color: #fff;
}
.front-cover {
transform-origin: 0 50%;
transform: rotateY(-120deg);
}
.p3d {
transform-style: preserve-3d;
}
.front-cover .back {
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2023%2F12%2F2809%2F277492071_3_20231228091018727.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716274649&t=e0589c910a5e7285a6b0c2cdaf74a3c8);
background-size: cover;
transform: translateZ(3px);
}
.flip {
transform: rotateY(180deg);
}
.shadow,
.pic {
width: 196px;
height: 132px;
position: absolute;
left: 60px;
top: 60px;
transform-origin: 0 100%;
}
.pic {
background: url(https://q4.itc.cn/q_70/images03/20240405/39ec09deda3a41d79e03897b0fdf68a0.jpeg);
background-size: cover;
}
.shadow {
background-color: rgba(0, 0, 0, 0.5);
}
代码解释：
* {...}: 这个规则集将所有元素的边距、填充、边框设为零，并且使用box-sizing: border-box;让盒模型更加直观。html {...}: 设置 HTML 元素的高度为100%。body {...}: 设置 body 元素的高度为100%，指定了字体为 Helvetica（如果不可用，则使用 Arial 或 Helvetica），行高为字体大小的1.25倍，文字颜色为白色。perspective: 1000px;创建一个三维透视效果，即书籍的视角。background: linear-gradient(to bottom, #444, #999);设置背景为从上到下的线性渐变，颜色从深灰色到浅灰色。.book {...}: 设置书籍的样式，包括宽度、高度、绝对定位，使其居中显示。cursor: pointer;将鼠标指针设为手型，表示可以点击。user-select: none;禁止用户选择文本内容。transform: rotateX(60deg);给书籍应用一个X轴方向的旋转，创建一个倾斜的视角。.page {...}: 设置书籍页的样式，包括宽度、高度、绝对定位以及文本缩进。这个规则集适用于书籍的每一页。.front和.back: 分别设置书籍的正面和背面的背景颜色。.front-cover {...}: 设置书籍的封面样式，使用transform-origin设置旋转的中心点为左侧，transform: rotateY(-120deg);给封面应用一个Y轴方向的旋转，使其呈现出一个翻转的效果。.p3d {...}: 应用于书籍的容器和封面，表示使用保持三维空间的方式呈现内容。.front-cover .back {...}: 设置封面背面的背景图片，并设置transform: translateZ(3px);使其在Z轴方向上稍微突出，产生一种立体感。.flip {...}: 给元素应用一个Y轴方向的180度旋转，表示翻转效果。.shadow和.pic: 设置封面的阴影和图片的样式，包括宽度、高度、绝对定位以及背景图片等。
js部分
代码展示：
// 鼠标摁住事件
// 鼠标移动事件
var hold = false
var page = document.querySelector('.front-cover')
var clamp = function (val, min, max) {
return Math.max(min, Math.min(val, max))
}
var pic = document.querySelector('.pic')
var shadow = document.querySelector('.shadow')
page.onmousedown = function () {
hold = true
}
window.onmouseup = function () {
hold = false
}
window.onmousemove = function (e) { // 摁住才能执行
if (hold == true) {
console.log(e.pageX);
var angle = clamp((window.innerWidth / 2 - e.pageX + 300) / 300 * -90, -180, 0)
page.style.transform = `rotateY(${angle}deg)`
// pic 要立起来 饶x轴旋转 angle / 2
pic.style.transform = `rotateX(${angle / 2}deg)`
// shadow 要倾斜x angle / 8
Shadow.style.transform = `skewX(${angle / 8}deg)`
}
}
</script>
代码解释：
这段 <script> 标签中的 JavaScript 代码实现了以下功能：
- 监听鼠标事件，包括鼠标按下、移动和抬起。
- 当鼠标按下时，将变量
hold设为true，表示鼠标被按住。 - 当鼠标抬起时，将变量
hold设为false，表示鼠标已经释放。 - 当鼠标移动时，如果鼠标被按住（即
hold为true），则执行相应的旋转和倾斜操作。 - 计算鼠标在页面上的位置，并根据位置计算旋转角度。
- 将页面（书籍封面）、图片和阴影按照计算得到的角度进行旋转和倾斜操作，以达到动态效果。
具体的解释如下：
-
page.onmousedown = function () {...}: 当鼠标按下时，将hold设为true，表示鼠标被按住。 -
window.onmouseup = function () {...}: 当鼠标抬起时，将hold设为false，表示鼠标已经释放。 -
window.onmousemove = function (e) {...}: 当鼠标移动时，如果鼠标被按住，则执行以下操作：- 计算鼠标在页面上的位置
e.pageX，并根据页面宽度和鼠标位置计算旋转角度angle。 - 将页面（书籍封面）按照计算得到的角度进行 Y 轴方向的旋转。
- 将图片按照计算得到的角度的一半进行 X 轴方向的旋转，使其立起来。
- 将阴影按照计算得到的角度的八分之一进行 X 轴方向的倾斜，产生立体感。
- 计算鼠标在页面上的位置
通过以上操作，可以实现当鼠标按住书籍封面并移动时，书籍封面、图片和阴影都会根据鼠标移动的方向和速度产生相应的动态效果。
结语
在这个数字时代，爱情的表达方式已经不再局限于传统的方式。通过JavaScript创造的梦幻婚礼动态请柬，不仅仅是一种新颖的方式，更是对爱情的一种独特诠释。在这个特殊的日子里，动态请柬为我们带来了与众不同的体验，让爱意在数字世界中流淌，让每一位嘉宾都能感受到我们的真挚情意。
在这个美好的时刻，我们感激技术的进步，让我们有机会以全新的方式表达我们的爱。无论是那一刻的转动动画，还是那一帧帧的画面，都承载着我们对彼此的深深祝福和美好期许。
让我们共同期待着这场婚礼的到来，让这份爱在数字的世界里继续编织，为我们带来更多的欢笑、感动和美好回忆。愿我们的爱情故事，因为这个动态请柬，而变得更加生动而独特！
转载自:https://juejin.cn/post/7360887387919056959