元旦節快到了，在跨年夜前夕.是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實作3D立體動態相冊，趕緊學會了，來制作屬于我們程式員的浪漫吧！
?元旦節表白3D相冊,在元旦節前夜, 我們的留言區開放給你！快來秀出你的別樣表白方式，和你心儀的那個ta表白吧！?
HTML+css+js 抖音很火的3d旋轉相冊-包含音樂,(送女友,表白,生日)動態生成效果,這樣制作的~,現在,越來越多的人喜歡用視頻記錄生活,照片多的友友也會選擇制作動態相冊視頻,不僅創意十足,同時還能展現自我風采, 撩妹神器哦!
更多表白素材原始碼地址
制作不易, 需要原始碼的請添加 qq 365392777
? 元旦節/跨年夜?(照片墻)3D相冊/含背景音樂/可自定義文字 具有多種相冊變化
在線演示地址
PC電腦端
靜態效果展示
H5移動端
3D螺旋
3D格子
檔案目錄
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<style>
html,
body {
height: 100%;
}
body {
background-color: #000000;
margin: 0;
font-family: Helvetica, sans-serif;
overflow: hidden;
}
a {
color: #ffffff;
}
.element:hover {
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
border: 1px solid rgba(127, 255, 255, 0.75);
}
.element img {
width: 140px;
height: 155px;
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
.show_info .info_my .info_mem > div {
text-align: left;
}
.show_info .info_my .info_mem > div.nickname {
max-width: 120px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<!-- 熒光css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<!-- 熒光S -->
<audio controls autoplay><source src="mp3/app.mp3" /></audio>
<!-- 背景圖 -->
<!-- <div id="background" class="wall"></div> -->
<!-- 熒光點 -->
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
<!-- 熒光E -->
<div id="container"></div>
<!-- 文字彈窗 -->
<div class="show_info animated" style="display: none">
<div class="info_my">
<img src="img/c1.png" />
<div class="info_mem">
<div class="nickname">2021牛轉錢坤!</div>
<div class="id"></div>
<div class="vote">新年快樂!</div>
</div>
</div>
<div class="intro">
摘一千顆星照亮你的前程，種一千朵玫瑰陶醉你的心情，折一千只紙鶴逗你時刻開心，找一千種理由希望你無憂無愁，提前祝您新年快樂!
</div>
</div>
...制作不易, 需要完整代碼請聯系qq 365392777
</body>
</html>
js 代碼
<script>
var personArray = new Array();
var CurPersonNum = 0;
// 模擬推送資料
var s = setInterval(function () {
// get animate
var rand_in = parseInt(Math.random() * _in.length, 10);
var rand_out = parseInt(Math.random() * _out.length, 10);
if (CurPersonNum >= personArray.length) {
CurPersonNum = 0;
}
/* 顯示文字彈窗 */
$(".show_info").show();
$(".show_info").addClass(_in[rand_in]);
setTimeout(function () {
$(".show_info").removeClass(_in[rand_in]);
// 更改展示的圖片
var img = document
.getElementsByClassName("element")
[CurPersonNum].getElementsByTagName("img")[0];
/* 頭三張 */
img.setAttribute("src", "img/s1.png");
++CurPersonNum;
setTimeout(function () {
$(".show_info").addClass(_out[rand_out]);
setTimeout(function () {
$(".show_info").removeClass(_out[rand_out]);
$(".show_info").hide();
}, 1000);
}, 1500);
}, 1000);
}, 4500);
// 生成虛擬圖片資料,
for (var i = 0; i < 199; i++) {
personArray.push(
{
image: "img/s2.png",
}
// {
// image: "img/c6.png",
// }
);
}
var table = new Array();
for (var i = 0; i < personArray.length; i++) {
table[i] = new Object();
if (i < personArray.length) {
table[i] = personArray[i];
table[i].src = personArray[i].thumb_image;
}
table[i].p_x = (i % 20) + 1;
table[i].p_y = Math.floor(i / 20) + 1;
}
var camera, scene, renderer;
var controls;
var objects = [];
var targets = {
table: [],
sphere: [],
helix: [],
grid: [],
};
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.z = 3000;
scene = new THREE.Scene();
// grid
for (var i = 0; i < objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = (i % 5) * 400 - 800; // 400 圖片的左右間距 800 x軸中心店
object.position.y = -(Math.floor(i / 5) % 5) * 300 + 500; // 500 y軸中心店
object.position.z = Math.floor(i / 25) * 200 - 800; // 300調整 片間距 800z軸中心店
targets.grid.push(object);
}
var button = document.getElementById("grid");
button.addEventListener(
"click",
function (event) {
transform(targets.grid, 2000);
},
false
);
transform(targets.table, 2000);
//
window.addEventListener("resize", onWindowResize, false);
}
function transform(targets, duration) {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to(
{
x: target.position.x,
y: target.position.y,
z: target.position.z,
},
Math.random() * duration + duration
)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function render() {
renderer.render(scene, camera);
}
...制作不易, 需要完整代碼請聯系qq 365392777
</script>
找到index.html中的 js 代碼 可自定義添加多張圖片
注意:保證圖片在100-199張以下,不然會影響美觀哦
for (var i = 0; i < 199; i++) {
personArray.push(
{
image: "img/s1.png",
},
//在這可以自定義添加相片
{
image: "img/c2.png",
},
{
image: "img/c3.png",
}
...更多
);
}
對于程式員來說，“單身”依然是人生最大的 bug，關鍵是還無法除錯，雖然俗話說“自古英雄多寂寞”，但是缺少另一半的人生總是不完整的，況且，距離一年一度的情（虐）人（狗）節不遠了，
更多原始碼地址
1.?女朋友生日? HTML+css3+js 實作抖音炫酷櫻花3D相冊 (含背景音樂)程式員表白必備
2.100套炫酷echart在線演示地址
3.基于 Echarts 實作可視化資料大屏回應式展示效果的原始碼，共計100套，可以在此基礎上重新開發(vue/react)都可以使用
4.[?前端開發神器]->不需要服務器就能將專案部署上線
5.?前端 html+css+js[1000個超炫酷特效] 當我學會這招,所有炫酷的特效頁面(含原始碼)都能下載下來啦!
6.抖音超火?羅盤時鐘(免費附原始碼)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242406.html
標籤：其他