add main.js
This commit is contained in:
parent
d4a14d6bb3
commit
342814c153
|
|
@ -0,0 +1,129 @@
|
||||||
|
vh = window.innerHeight / 100;
|
||||||
|
vw = window.innerWidth / 100;;
|
||||||
|
function search() {
|
||||||
|
value = document.getElementsByClassName("sin")[0].value;
|
||||||
|
if (value == "") return;
|
||||||
|
window.location.href = "https://cn.bing.com/search?q=" + value;
|
||||||
|
}
|
||||||
|
function changeBack() {
|
||||||
|
simg = document.getElementsByClassName("simg")[0];
|
||||||
|
simg.style.filter = "blur(2px)";
|
||||||
|
sin = document.getElementsByClassName("sin")[0];
|
||||||
|
sin.value = "";
|
||||||
|
}
|
||||||
|
function backBack() {
|
||||||
|
simg = document.getElementsByClassName("simg")[0];
|
||||||
|
simg.style.filter = "none";
|
||||||
|
sin = document.getElementsByClassName("sin")[0];
|
||||||
|
sin.value = "Search what I want";
|
||||||
|
}
|
||||||
|
function drawCanvas(img) {
|
||||||
|
c = document.getElementsByClassName("ret")[0];
|
||||||
|
ctx = c.getContext("2d");
|
||||||
|
ctx.drawImage(img, 35 * vw, 30 * vh, 30 * vw, 36 * vh, 0, 0, 25 * vw, 30 * vh);
|
||||||
|
// ctx.drawImage(img, 25 * vw, 12 * vh, 30 * vw, 36 * vh, 1*vw, 1*vh, 16 * vw, 16 * vh);
|
||||||
|
ctx.clearRect(1 * vw, 1 * vw, 15.4 * vw, 14 * vh);
|
||||||
|
}
|
||||||
|
tick = 0; cs = -1;
|
||||||
|
pid = -1; p = [], d = [];
|
||||||
|
function runHorse() {
|
||||||
|
if (tick == 99999) tick = 0;
|
||||||
|
p[0] = document.getElementsByClassName("p1")[0];
|
||||||
|
p[1] = document.getElementsByClassName("p2")[0];
|
||||||
|
p[2] = document.getElementsByClassName("p3")[0];
|
||||||
|
d[0] = document.getElementsByClassName("d1")[0];
|
||||||
|
d[1] = document.getElementsByClassName("d2")[0];
|
||||||
|
d[2] = document.getElementsByClassName("d3")[0];
|
||||||
|
tb = document.getElementsByClassName("timebar")[0];
|
||||||
|
cb = document.getElementsByClassName("cbar")[0];
|
||||||
|
ret = document.getElementsByClassName("ret")[0];
|
||||||
|
tick += 1;
|
||||||
|
if (tick == 1) drawCanvas(p[0]);
|
||||||
|
if (cs != -1) {
|
||||||
|
tick += 9;
|
||||||
|
if (tick % 10 < 10 && tick / 10 > 1) tick -= tick % 10;
|
||||||
|
}
|
||||||
|
m = tick / 100;
|
||||||
|
pid = parseInt((m / 5) % 3);
|
||||||
|
pid = (pid + 2) % 3;
|
||||||
|
cb.style.width = m % 5 / 5 * 6 * vw + "px";
|
||||||
|
if (m % 5 > 0 && m % 5 <= 1 && m / 5 >= 1) {
|
||||||
|
p[pid].style.width = (1 - m % 5) * 70 + "vw";
|
||||||
|
ret.style.opacity = 1 - m % 5;
|
||||||
|
ret.style.transform = "rotate(" + 20 * (m % 5) + "deg)";
|
||||||
|
}
|
||||||
|
if (m % 5 == 1 && m > 5) {
|
||||||
|
drawCanvas(p[parseInt(m / 5) % 3]);
|
||||||
|
p[0].style["z-index"] = (getComputedStyle(p[0])["z-index"] + 1) % 3;
|
||||||
|
p[1].style["z-index"] = (getComputedStyle(p[1])["z-index"] + 1) % 3;
|
||||||
|
p[2].style["z-index"] = (getComputedStyle(p[2])["z-index"] + 1) % 3;
|
||||||
|
}
|
||||||
|
if (m % 5 > 1 && m % 5 <= 2 && m / 5 >= 1) {
|
||||||
|
ret.style.opacity = m % 5 - 1;
|
||||||
|
ret.style.transform = "rotate(-" + 20 * (2 - m % 5) + "deg)";
|
||||||
|
}
|
||||||
|
if (m % 5 == 0) {
|
||||||
|
if (pid != -1) p[(pid + 1) % 3].style.width = "70vw";
|
||||||
|
if (pid == cs) cs = -1;
|
||||||
|
tb.style.left = (m / 5) % 3 * 6 + "vw";
|
||||||
|
// d[pid].style["background-color"] = "#dbdac9";
|
||||||
|
// d[(m / 5) % 3].style["background-color"] = "#fce26b";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInterval(runHorse, 10);
|
||||||
|
function chorse(id) {
|
||||||
|
if (pid == id) return;
|
||||||
|
cs = id;
|
||||||
|
}
|
||||||
|
window.onload = function () {
|
||||||
|
sin = document.getElementsByClassName("sin")[0];
|
||||||
|
sin.onkeydown = function (event) {
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
search();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
window.onscroll = function () {
|
||||||
|
sbar = document.getElementsByClassName("sbar")[0];
|
||||||
|
simg = document.getElementsByClassName("simg")[0];
|
||||||
|
horse = document.getElementsByClassName("horse")[0];
|
||||||
|
sbarTop = sbar.getBoundingClientRect().top;
|
||||||
|
simgTop = simg.getBoundingClientRect().top;
|
||||||
|
horseTop = horse.getBoundingClientRect().top;
|
||||||
|
if (simgTop > - 30 * vh) {
|
||||||
|
sbar.style.top = "unset";
|
||||||
|
sbar.style.position = "absolute";
|
||||||
|
sbar.style["z-index"] = "unset";
|
||||||
|
}
|
||||||
|
else if (sbarTop < 10 * vh) {
|
||||||
|
sbar.style.top = "10vh";
|
||||||
|
sbar.style.position = "fixed";
|
||||||
|
sbar.style["z-index"] = 99;
|
||||||
|
}
|
||||||
|
if (horseTop > 23 * vh) {
|
||||||
|
simg.style.top = "unset";
|
||||||
|
simg.style.position = "relative";
|
||||||
|
simg.style["z-index"] = "unset";
|
||||||
|
horse.style["margin-top"] = "unset";
|
||||||
|
}
|
||||||
|
else if (simgTop < -70 * vh) {
|
||||||
|
simg.style.top = "-70vh";
|
||||||
|
simg.style.position = "fixed";
|
||||||
|
simg.style["z-index"] = 99;
|
||||||
|
horse.style["margin-top"] = "93vh";
|
||||||
|
}
|
||||||
|
test = document.getElementsByClassName("test")[0];
|
||||||
|
cart = 20;
|
||||||
|
//console.log(parseInt(test.getBoundingClientRect().top)/vh);
|
||||||
|
if (test.getBoundingClientRect().top < cart * vh) {
|
||||||
|
delta_top = 1 - (cart - parseInt(test.getBoundingClientRect().top) / vh) / (cart + 20);
|
||||||
|
console.log(delta_top);
|
||||||
|
if (delta_top < 0) delta_top = 0;
|
||||||
|
s1 = document.getElementsByClassName("s1")[0];
|
||||||
|
s2 = document.getElementsByClassName("s2")[0];
|
||||||
|
s3 = document.getElementsByClassName("s3")[0];
|
||||||
|
s3.style.transform = "translate(" + (25 - 39 * delta_top) + "vw," + 16 * delta_top + "vh) rotateY(" + 50 * delta_top + "deg)";
|
||||||
|
s2.style.transform = "translate(" + 3 * delta_top + "vw," + -14 * delta_top + "vh) rotateY(" + -5 * delta_top + "deg)";
|
||||||
|
s1.style.transform = "translate(" + (-25 + 46 * delta_top) + "vw," + 1 * delta_top + "vh) rotateY(" + -45 * delta_top + "deg)";
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue