表白代码
爱心表白
演示地址：https://kjjt.asia/aixin.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://wx0725.top/js/jquery.js"></script>
<title>坠入爱河</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
body {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Dancing Script', cursive;
}
html {
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.6));
background-color: #E94E77;
height: 100%;
width: 100%;
overflow: hidden;
touch-action: none;
content-zooming: none;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
cursor: none;
}
#opening_screen {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
z-index: 500;
background: rgba(245, 11, 229, 0.15)
}
.player_container {
position: absolute;
top: 0;
right: 5%;
top: 30px;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
z-index: 500;
opacity: 0.65;
}
button {
background-color: rgba(255, 255, 255, 0);
border: 1px solid #ffffff;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
-webkit-transition: all 0.2s ease 0;
transition: all 0.2s ease 0;
}
button[data-am-button^="large"] {
width: 60px;
height: 60px;
margin: 0 5px;
}
button[data-am-button^="large"] i {
font-size: 25px;
}
button[data-am-button^="small"] {
width: 40px;
height: 40px;
}
button[data-am-button^="small"] i {
font-size: 14px;
}
button:hover {
color: #999999;
border-color: #999999;
}
button:focus {
outline: none;
}
#progress-bar {
width: 100%;
background-color: pink;
height: 5px;
position: relative;
margin: 1em 0;
}
#progress-bar #progress {
background-color: white;
height: 5px;
position: absolute;
left: 0;
-webkit-transition: width 2.5s linear 0;
transition: width 2.5s linear 0;
}
/* Timing */
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
h2 {
height: 60px;
color: #fff;
letter-spacing: 10px;
line-height: normal;
text-align: center;
z-index: 300;
padding-bottom: 10%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 4em;
font-size: 4.5vw;
font-family: 'Dancing Script', cursive;
text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0, 0, 0, 0.15), 0px 24px 2px rgba(0, 0, 0, 0.1), 0px 34px 30px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none
}
.animated {
visibility: visible !important;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
/* PULL SOFT */
.pullSoftIn {
-webkit-animation-name: pullSoftIn;
animation-name: pullSoftIn;
}
@-webkit-keyframes pullSoftIn {
from {
-webkit-transform: scale(.9);
opacity: 0;
}
}
@keyframes pullSoftIn {
from {
transform: scale(.9);
opacity: 0;
}
}
.pullSoftOut {
-webkit-animation-name: pullSoftOut;
animation-name: pullSoftOut;
}
@-webkit-keyframes pullSoftOut {
to {
-webkit-transform: scale(.9);
opacity: 0;
}
}
@keyframes pullSoftOut {
to {
transform: scale(.9);
opacity: 0;
}
}
.pushSoftIn {
-webkit-animation-name: pushSoftIn;
animation-name: pushSoftIn;
}
@-webkit-keyframes pushSoftIn {
from {
-webkit-transform: scale(1.1);
opacity: 0;
}
}
@keyframes pushSoftIn {
from {
transform: scale(1.1);
opacity: 0;
}
}
.pushSoftOut {
-webkit-animation-name: pushSoftOut;
animation-name: pushSoftOut;
}
@-webkit-keyframes pushSoftOut {
to {
-webkit-transform: scale(1.1);
opacity: 0;
}
}
@keyframes pushSoftOut {
to {
transform: scale(1.1);
opacity: 0;
}
}
/* ====================================================================== *
"Spin Animation Class
* ====================================================================== */
.spinning {
-webkit-animation: spinaround 8s infinite linear;
animation: spinaround 8s infinite linear;
}
@-webkit-keyframes spinaround {
to {
-webkit-transform: rotateY(360deg)
}
}
@keyframes spinaround {
to {
transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}
}
/* ROTATE EDGE IN */
.roEdgeUpIn {
-webkit-animation-name: roEdgeUpIn;
animation-name: roEdgeUpIn;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes roEdgeUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(1200px) rotateX(-90deg);
}
100% {
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(1200px);
}
}
@keyframes roEdgeUpIn {
0% {
opacity: 0;
transform-origin: 50% 0;
transform: perspective(1200px) rotateX(-90deg);
}
100% {
transform-origin: 50% 0;
transform: perspective(1200px);
}
}
.roEdgeUpOut {
-webkit-animation-name: roEdgeUpOut;
animation-name: roEdgeUpOut;
-webkit-animation-duration: 5s;
animation-duration: 3s;
}
@-webkit-keyframes roEdgeUpOut {
0% {
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(1200px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(1200px) rotateX(-90deg);
}
}
@keyframes roEdgeUpOut {
0% {
transform-origin: 50% 0;
transform: perspective(1200px);
}
100% {
opacity: 0;
transform-origin: 50% 0;
transform: perspective(1200px) rotateX(-90deg);
}
}
.roTwistUpOut {
-webkit-animation-name: roTwistUpOut;
animation-name: roTwistUpOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistUpOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50% -800px;
-webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50% -800px;
-webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
@keyframes roTwistUpOut {
0% {
opacity: 1;
transform-origin: 50% 50% -800px;
transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
100% {
opacity: 0;
transform-origin: 50% 50% -800px;
transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
/* ROTATE TWIST IN */
.roTwistLeftIn {
-webkit-animation-name: roTwistLeftIn;
animation-name: roTwistLeftIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistLeftIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50% -400px;
-webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50% -400px;
-webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
@keyframes roTwistLeftIn {
0% {
opacity: 0;
transform-origin: 50% 50% -400px;
transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
100% {
opacity: 1;
transform-origin: 50% 50% -400px;
transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
.roTwistRightIn {
-webkit-animation-name: roTwistRightIn;
animation-name: roTwistRightIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 7s;
animation-duration: 7s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 7s;
animation-duration: 7s;
}
@-webkit-keyframes fadeOut {
to {
opacity: 0;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
</style>
</head>
<body>
<audio id="player" preload="auto">
<source src="http://music.163.com/song/media/outer/url?id=1422884240.mp3">
</source>您的浏览器不支持播放 </audio>
<div class="player_container hidden animated">
<!-- <button data-am-button="small" id="btn-mute"><i class="fa fa-volume-off"></i></button> -->
<button data-am-button="large" id="btn-play-pause"><i class="fa fa-play">Music</i></button>
<!-- <button data-am-button="small" id="btn-stop"><i class="fa fa-stop"></i></button> -->
<div id="progress-bar"><span id="progress"></span></div>
</div>
<div id="opening_screen" class="animated">
<h2 class="spinning">点击 坠入爱河</h2>
</div>
<!-- Lyrics -->
<section id="peace">
<!-- FIRST VERSE -->
<h2 id="wisemensay" class="lyrics animated hidden">智者说：</h2>
<h2 id="onlyfools1" class="lyrics animated hidden">只有傻瓜才会冲进来</h2>
<h2 id="canthelp1" class="lyrics animated hidden">但我无能为力 </h2>
<h2 id="fallinginlove1" class="lyrics animated hidden">坠入爱河</h2>
<h2 id="withyou1" class="lyrics animated hidden">和你在一起</h2>
<h2 id="shallistay" class="lyrics animated hidden">如果我</h2>
<h2 id="beasin" class="lyrics animated hidden">情不自禁的</h2>
<h2 id="ificanthelp" class="lyrics animated hidden">爱上你</h2>
<h2 id="fallinginlove2" class="lyrics animated hidden">那</h2>
<h2 id="withyou2" class="lyrics animated hidden">会是一种罪过吗？</h2>
<!-- SECOND VERSE -->
<h2 id="likeariver1" class="lyrics animated hidden">就像</h2>
<h2 id="tothesea1" class="lyrics animated hidden">河流流向大海</h2>
<h2 id="darlingitgoes1" class="lyrics animated hidden">亲爱的</h2>
<h2 id="somethings1" class="lyrics animated hidden">有些事情</h2>
<h2 id="meanttobe1" class="lyrics animated hidden">是注定的</h2>
<h2 id="takemyhand1" class="lyrics animated hidden">牵着我的手</h2>
<h2 id="wholelife1" class="lyrics animated hidden">也牵着我的整个生命</h2>
<h2 id="foricanthelp1" class="lyrics animated hidden">因为我已经 </h2>
<h2 id="fallinginlove3" class="lyrics animated hidden">情不自禁的 </h2>
<h2 id="withyou3" class="lyrics animated hidden">爱上你</h2>
<!-- THIRD VERSE -->
<h2 id="likeariver2" class="lyrics animated hidden">一束玫瑰不足代表我的爱意</h2>
<h2 id="tothesea2" class="lyrics animated hidden">一盒巧克力不足代表我的诚意</h2>
<h2 id="darlingitgoes2" class="lyrics animated hidden">一个千纸鹤不足代表我的心意</h2>
<h2 id="somethings2" class="lyrics animated hidden">为你这么做只让你知道我的真意</h2>
<h2 id="meanttobe2" class="lyrics animated hidden">我是真的很喜欢你</h2>
<h2 id="takemyhand2" class="lyrics animated hidden">在“520我爱你”的日子里</h2>
<h2 id="wholelife2" class="lyrics animated hidden">愿你能够接受我的爱意!</h2>
<h2 id="foricanthelp2" class="lyrics animated hidden">巧逢何时，遇君 </h2>
<h2 id="fallinginlove4" class="lyrics animated hidden">白衫着身，倾我心 </h2>
<h2 id="withyou4" class="lyrics animated hidden">恰似春风十里柔情</h2>
<h2 id="foricanthelp3" class="lyrics animated hidden">叶落声声尽 </h2>
<h2 id="fallinginlove5" class="lyrics animated hidden">秋枫起 </h2>
<h2 id="withyou5" class="lyrics animated hidden">与君享千景 等雪临</h2>
<h2 id="bemine" class="lyrics animated hidden">我明白你会来，所以我等</h2>
</section>
<script>
var myPen = {};
(function() {
'use strict';
// main loop
this.run = function() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.drawImage(this.img, this.pointer.x - 100, this.pointer.y - 100, 200, 200);
for (var i = 0; i < this.N; i++) {
this.particles[i].run();
}
}
// particles class
var Particle = function(pen, size) {
this.pX = (pen.canvas.width * 0.5) + (Math.random() * 200) - 100;
this.pY = -size - Math.random() * 200;
this.vX = 0;
this.vY = Math.random();
this.size = size;
this.img = pen.img;
this.pointer = pen.pointer;
this.canvas = pen.canvas;
this.ctx = pen.ctx;
}
Particle.prototype.run = function() {
this.pY += this.vY;
this.pX += this.vX;
this.vY += 0.1;
if (this.pY > this.canvas.height) {
this.pY = -this.size;
this.pX = (this.canvas.width * 0.5) + (Math.random() * 200) - 100;
this.vY = 0;
this.vX = 0;
}
var dx = this.pX - this.pointer.x,
dy = this.pY - this.pointer.y,
r = (100 + this.size * 0.5),
d = dx * dx + dy * dy;
if (d < r * r) {
d = Math.sqrt(d);
dx /= d;
dy /= d;
d = (r - d) * 1.1;
dx *= d;
dy *= d;
this.pX += dx;
this.pY += dy;
this.vX = 0.5 * dx + ((this.pX >= this.pointer.x) ? 2 : -2);
this.vY = 0.5 * dy;
}
this.ctx.drawImage(this.img, this.pX - this.size * 0.5, this.pY - this.size * 0.5, this.size, this.size);
}
// canvas
this.canvas = {
elem: document.createElement('canvas'),
resize: function() {
this.width = this.elem.width = this.elem.offsetWidth;
this.height = this.elem.height = this.elem.offsetHeight;
},
init: function() {
var ctx = this.elem.getContext('2d');
document.body.appendChild(this.elem);
window.addEventListener('resize', this.resize.bind(this), false);
this.resize();
return ctx;
}
};
this.ctx = this.canvas.init();
// pointer
this.pointer = (function(canvas) {
var pointer = {
x: canvas.width / 2,
y: canvas.height / 2,
pointer: function(e) {
var touchMode = e.targetTouches,
pointer;
if (touchMode) {
e.preventDefault();
pointer = touchMode[0];
} else pointer = e;
this.x = pointer.clientX;
this.y = pointer.clientY;
},
};
window.addEventListener('mousemove', function(e) {
this.pointer(e);
}.bind(pointer), false);
canvas.elem.addEventListener('touchmove', function(e) {
this.pointer(e);
}.bind(pointer), false);
return pointer;
}(this.canvas));
// init
this.particles = [];
this.N = 800;
this.img = new Image();
this.img.src = 'http://wx0725.top/project/html/image/heart_codepen.png';
for (var i = 0; i < this.N; i++) {
this.particles[i] = new Particle(this, 35);
}
// request animation loop
var myPen = this;
(function run() {
requestAnimationFrame(run);
myPen.run();
})();
}).apply(myPen);
// END CANVAS HEARTS
// BEGIN AUDIOO PLAYER
$(function() {
var audio = $("audio")[0];
$('#opening_screen').on('click', function() {
$('#opening_screen').addClass('roEdgeUpOut');
$('.player_container').toggleClass('hidden roEdgeUpIn');
// 播放/暂停
if (audio.paused == false) {
audio.pause();
$('#btn-play-pause').children('i').removeClass('fa-pause');
$('#btn-play-pause').children('i').addClass('fa-play');
} else {
audio.play();
$('#btn-play-pause').children('i').removeClass('fa-play');
$('#btn-play-pause').children('i').addClass('fa-pause');
}
});
$('#btn-play-pause').on('click', function() {
// 播放/暂停
if (audio.paused == false) {
audio.pause();
$(this).children('i').removeClass('fa-pause');
$(this).children('i').addClass('fa-play');
} else {
audio.play();
$(this).children('i').removeClass('fa-play');
$(this).children('i').addClass('fa-pause');
}
});
$('#btn-stop').on('click', function() {
//Stop the track
audio.pause();
audio.currentTime = 0;
$('#btn-play-pause').children('i').removeClass('fa-pause');
$('#btn-play-pause').children('i').addClass('fa-play');
});
$('#btn-mute').on('click', function() {
// 静音
if (audio.volume != 0) {
audio.volume = 0;
$(this).children('i').removeClass('fa-volume-off');
$(this).children('i').addClass('fa-volume-up');
} else {
audio.volume = 1;
$(this).children('i').removeClass('fa-volume-up');
$(this).children('i').addClass('fa-volume-off');
}
});
function updateProgress() {
//Updates the progress bar
var progress = document.getElementById("progress");
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
progress.style.width = value + "%";
}
//Progress Bar event listener
audio.addEventListener("timeupdate", updateProgress, false);
});
// END AUDIOO PLAYER
// BEGIN AUDIO SYNCHING
// Using jQuery to add event listener to the audio element and toggle classes based on the curren time.
var audioElement = document.getElementById('player');
var lastTime = 0;
audioElement.addEventListener('timeupdate', function(e) {
var nowTime = this.currentTime;
//Check if just passed the 1.4 second time mark.
if (nowTime > 1 && lastTime < 5) {
$("#peace h2").siblings().addClass('hidden').removeClass('pushSoftOut');
$("#heart").addClass('hidden').removeClass('pushSoftIn');
}
// Wise Mwn Say
if (nowTime > 7.5 && lastTime < 7.5) {
$('#wisemensay').toggleClass('pushSoftIn hidden');
}
// Only fools rush in
if (nowTime > 14 && lastTime < 14) {
$('#onlyfools1').toggleClass('pushSoftIn hidden');
$('#wisemensay').toggleClass('pushSoftIn pushSoftOut');
}
// But I can't help
if (nowTime > 21 && lastTime < 21) {
$('#canthelp1').toggleClass('pushSoftIn hidden');
$('#onlyfools1').toggleClass('pushSoftIn pushSoftOut');
}
// Falling in love
if (nowTime > 27 && lastTime < 27) {
$('#fallinginlove1').toggleClass('pushSoftIn hidden');
$('#canthelp1').toggleClass('pushSoftIn pushSoftOut');
}
// With you
if (nowTime > 30 && lastTime < 30) {
$('#withyou1').toggleClass('pushSoftIn hidden');
$('#fallinginlove1').toggleClass('pushSoftIn pushSoftOut');
}
// Shall I Stay
if (nowTime > 37 && lastTime < 37) {
$('#shallistay').toggleClass('pushSoftIn hidden');
$('#withyou1').toggleClass('pushSoftIn pushSoftOut');
}
// Would it be a sin
if (nowTime > 43 && lastTime < 43) {
$('#beasin').toggleClass('pushSoftIn hidden');
$('#shallistay').toggleClass('pushSoftIn pushSoftOut');
}
// If I can't help
if (nowTime > 50 && lastTime < 50) {
$('#ificanthelp').toggleClass('pushSoftIn hidden');
$('#beasin').toggleClass('pushSoftIn pushSoftOut');
}
// Falling in Love - 2
if (nowTime > 56 && lastTime < 56) {
$('#fallinginlove2').toggleClass('pushSoftIn hidden');
$('#ificanthelp').toggleClass('pushSoftIn pushSoftOut');
}
// With You - 2
if (nowTime > 59 && lastTime < 59) {
$('#withyou2').toggleClass('pushSoftIn hidden');
$('#fallinginlove2').toggleClass('pushSoftIn pushSoftOut');
}
// Like a rivere flows
if (nowTime > 65 && lastTime < 65) {
$('#likeariver1').toggleClass('pushSoftIn hidden');
$('#withyou2').toggleClass('pushSoftIn pushSoftOut');
}
// Surelt to the sea
if (nowTime > 69 && lastTime < 69) {
$('#tothesea1').toggleClass('pushSoftIn hidden');
$('#likeariver1').toggleClass('pushSoftIn pushSoftOut');
}
// Darling so it goes
if (nowTime > 72 && lastTime < 72) {
$('#darlingitgoes1').toggleClass('pushSoftIn hidden');
$('#tothesea1').toggleClass('pushSoftIn pushSoftOut');
}
// Some things
if (nowTime > 75 && lastTime < 75) {
$('#somethings1').toggleClass('pushSoftIn hidden');
$('#darlingitgoes1').toggleClass('pushSoftIn pushSoftOut');
}
// Are meant to be
if (nowTime > 78.5 && lastTime < 78.5) {
$('#meanttobe1').toggleClass('pushSoftIn hidden');
$('#somethings1').toggleClass('pushSoftIn pushSoftOut');
}
// Take my hand
if (nowTime > 83 && lastTime < 83) {
$('#takemyhand1').toggleClass('pushSoftIn hidden');
$('#meanttobe1').toggleClass('pushSoftIn pushSoftOut');
}
// Take my whole life too
if (nowTime > 89 && lastTime < 89) {
$('#wholelife1').toggleClass('pushSoftIn hidden');
$('#takemyhand1').toggleClass('pushSoftIn pushSoftOut');
}
// For I can't help
if (nowTime > 96.5 && lastTime < 96.5) {
$('#foricanthelp1').toggleClass('pushSoftIn hidden');
$('#wholelife1').toggleClass('pushSoftIn pushSoftOut');
}
// Falling in love
if (nowTime > 102 && lastTime < 102) {
$('#fallinginlove3').toggleClass('pushSoftIn hidden');
$('#foricanthelp1').toggleClass('pushSoftIn pushSoftOut');
}
// With you - 3
if (nowTime > 105 && lastTime < 105) {
$('#withyou3').toggleClass('pushSoftIn hidden');
$('#fallinginlove3').toggleClass('pushSoftIn pushSoftOut');
}
// THIRD VERSE Like a rivere flows
if (nowTime > 112 && lastTime < 112) {
$('#likeariver2').toggleClass('pushSoftIn hidden');
$('#withyou3').toggleClass('pushSoftIn pushSoftOut');
}
// Surely to the sea
if (nowTime > 115 && lastTime < 115) {
$('#tothesea2').toggleClass('pushSoftIn hidden');
$('#likeariver2').toggleClass('pushSoftIn pushSoftOut');
}
// Darling so it goes
if (nowTime > 118.5 && lastTime < 118.5) {
$('#darlingitgoes2').toggleClass('pushSoftIn hidden');
$('#tothesea2').toggleClass('pushSoftIn pushSoftOut');
}
// Some things
if (nowTime > 122 && lastTime < 122) {
$('#somethings2').toggleClass('pushSoftIn hidden');
$('#darlingitgoes2').toggleClass('pushSoftIn pushSoftOut');
}
// Are meant to be
if (nowTime > 125.5 && lastTime < 125.5) {
$('#meanttobe2').toggleClass('pushSoftIn hidden');
$('#somethings2').toggleClass('pushSoftIn pushSoftOut');
}
// Take my hand
if (nowTime > 129 && lastTime < 129) {
$('#takemyhand2').toggleClass('pushSoftIn hidden');
$('#meanttobe2').toggleClass('pushSoftIn pushSoftOut');
}
// Take my whole life too
if (nowTime > 135 && lastTime < 135) {
$('#wholelife2').toggleClass('pushSoftIn hidden');
$('#takemyhand2').toggleClass('pushSoftIn pushSoftOut');
}
// For I can't help
if (nowTime > 143 && lastTime < 143) {
$('#foricanthelp2').toggleClass('pushSoftIn hidden');
$('#wholelife2').toggleClass('pushSoftIn pushSoftOut');
}
// Falling in love
if (nowTime > 147.5 && lastTime < 147.5) {
$('#fallinginlove4').toggleClass('pushSoftIn hidden');
$('#foricanthelp2').toggleClass('pushSoftIn pushSoftOut');
}
// With you - 3
if (nowTime > 152 && lastTime < 152) {
$('#withyou4').toggleClass('pushSoftIn hidden');
$('#fallinginlove4').toggleClass('pushSoftIn pushSoftOut');
}
// For I can't help
if (nowTime > 156 && lastTime < 156) {
$('#foricanthelp3').toggleClass('pushSoftIn hidden');
$('#withyou4').toggleClass('pushSoftIn pushSoftOut');
}
// Falling in love
if (nowTime > 163 && lastTime < 163) {
$('#fallinginlove5').toggleClass('pushSoftIn hidden');
$('#foricanthelp3').toggleClass('pushSoftIn pushSoftOut');
}
// With you - 3
if (nowTime > 166 && lastTime < 166) {
$('#withyou5').toggleClass('pushSoftIn hidden');
$('#fallinginlove5').toggleClass('pushSoftIn pushSoftOut');
}
// With you - 3
if (nowTime > 175 && lastTime < 175) {
$('#withyou5').toggleClass('pushSoftIn pushSoftOut');
}
if (nowTime > 180 && lastTime < 180) {
$('#bemine').toggleClass('roEdgeUpIn hidden');
location.reload();
}
lastTime = nowTime;
});
</script>
</body>
</html>