第一屏添加打字机效果和问候弹窗
This commit is contained in:
roozen
parent
bff5e7c1ff
commit
67302e836b
|
|
@ -93,6 +93,15 @@ spec:
|
|||
value: true
|
||||
- label: 隐藏
|
||||
value: false
|
||||
- $formkit: repeater
|
||||
name: typed
|
||||
label: 打字机显示的文字
|
||||
value: [ ]
|
||||
children:
|
||||
- $formkit: text
|
||||
name: text
|
||||
label: 文字
|
||||
placeholder: 请输入文字
|
||||
- $formkit: attachment
|
||||
name: index_img
|
||||
if: $get(enable_above).value
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
:root {
|
||||
|
||||
--light-grey:rgba(255,255,255,0.7);
|
||||
--white: rgba(255,255,255,0.9);
|
||||
--light-grey: rgba(255, 255, 255, 0.7);
|
||||
--white: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
|
@ -14,14 +14,16 @@
|
|||
}
|
||||
|
||||
|
||||
.back-home-button{
|
||||
color: rgba(255,255,255,0.7);
|
||||
.back-home-button {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
#nav #site-name{
|
||||
|
||||
#nav #site-name {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
#nav .site-page{
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
#nav .site-page {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
#page-header.full_page {
|
||||
|
|
@ -29,12 +31,14 @@
|
|||
background-attachment: fixed;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#page-header.full_page #site-info {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page-header #scroll-down {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -60,6 +64,7 @@
|
|||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#page-header #scroll-down .scroll-down-effects {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -132,4 +137,8 @@
|
|||
.pl-blur {
|
||||
/* 小图锯齿多，增加高斯模糊 */
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
#nav a {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<!-- 第一屏 -->
|
||||
<th:block th:fragment="index-img">
|
||||
<th:block th:if="${theme.config.top.above.enable_above}">
|
||||
<div id="greetingBox"></div>
|
||||
<div class="pl-container">
|
||||
<div class="pl-img pl-blur pl-visible"></div>
|
||||
<div class="pl-img pl-visible"></div>
|
||||
|
|
@ -11,12 +12,187 @@
|
|||
|
||||
<div id="site-info">
|
||||
<h1 id="site-title">[[${site.title}]]</h1>
|
||||
<div id="site-subtitle">
|
||||
<span id="subtitle"></span>
|
||||
<span class="typed-cursor" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
|
||||
|
||||
<link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css'}">
|
||||
|
||||
<style>
|
||||
#site-title {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0);
|
||||
animation: 1.5s linear 1s 1 normal both running show;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
#site-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin: auto;
|
||||
border-radius: 12px;
|
||||
top: 11px;
|
||||
height: 55px;
|
||||
width: 110%;
|
||||
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-title::after {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-subtitle::after {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#site-subtitle {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
animation: 1.5s linear 1s 1 normal both running show;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
#site-subtitle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
border-radius: 12px;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
|
||||
}
|
||||
|
||||
@keyframes color_change {
|
||||
0% {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: var(--xlfd-main);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes color_change {
|
||||
0% {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: var(--xlfd-main);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swipe_box {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swipe_box {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swipe_box2 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swipe_box2 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show {
|
||||
0% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
text-shadow: transparent 2px 3px 10px;
|
||||
}
|
||||
|
||||
81% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
text-shadow: transparent 2px 3px 10px;
|
||||
}
|
||||
|
||||
81% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.pl-img {
|
||||
background-image: url([[${theme.config.top.above.index_img}]]);
|
||||
|
||||
|
|
@ -27,8 +203,125 @@
|
|||
background-image: url([[${theme.config.top.above.phone_index_img}]]);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.typed-cursor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.typed-cursor.typed-cursor--blink {
|
||||
animation: typedjsBlink 0.7s infinite;
|
||||
-webkit-animation: typedjsBlink 0.7s infinite;
|
||||
animation: typedjsBlink 0.7s infinite;
|
||||
}
|
||||
|
||||
@keyframes typedjsBlink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes typedjsBlink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#greetingBox {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 15%;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
#greeting {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
top: -110px;
|
||||
padding: 5px 40px;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: small;
|
||||
transition: .5s;
|
||||
box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
|
||||
}
|
||||
|
||||
#greeting.shown {
|
||||
opacity: 1;
|
||||
top: 0
|
||||
}
|
||||
</style>
|
||||
<script th:inline="javascript">
|
||||
function subtitleType() {
|
||||
fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
|
||||
{
|
||||
const e = "出自 " + t.from;
|
||||
const n = [[${theme.config.top.above.typed}]].map((item)=>{
|
||||
return item.realNode.text;
|
||||
});
|
||||
n.unshift(t.hitokoto, e), window.typed = new Typed("#subtitle", {
|
||||
strings: n,
|
||||
startDelay: 300,
|
||||
typeSpeed: 100,
|
||||
loop: !0,
|
||||
backSpeed: 50
|
||||
})
|
||||
}
|
||||
}))
|
||||
}
|
||||
"function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
|
||||
</script>
|
||||
<script>
|
||||
(() => {
|
||||
const e = [{greeting: "晚安😴", startTime: 0, endTime: 5}, {
|
||||
greeting: "早上好鸭👋, 祝你一天好心情！",
|
||||
startTime: 6,
|
||||
endTime: 9
|
||||
}, {
|
||||
greeting: "上午好👋, 状态很好，鼓励一下～",
|
||||
startTime: 10,
|
||||
endTime: 10
|
||||
}, {greeting: "11点多啦, 在坚持一下就吃饭啦～", startTime: 11, endTime: 11}, {
|
||||
greeting: "午安👋, 宝贝",
|
||||
startTime: 12,
|
||||
endTime: 14
|
||||
}, {
|
||||
greeting: "🌈充实的一天辛苦啦！",
|
||||
startTime: 14,
|
||||
endTime: 18
|
||||
}, {
|
||||
greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
|
||||
startTime: 19,
|
||||
endTime: 19
|
||||
}, {greeting: "晚上好👋, 在属于自己的时间好好放松😌~", startTime: 20, endTime: 24}];
|
||||
let t = document.createElement("div");
|
||||
t.id = "greeting", setTimeout((() => {
|
||||
t.classList.add("shown")
|
||||
}), 1e3);
|
||||
let i = document.querySelector("#greetingBox");
|
||||
i.appendChild(t);
|
||||
const n = (new Date).getHours();
|
||||
let r = "晚上好👋";
|
||||
for (let t = 0; t < e.length; t++) if (n >= e[t].startTime && n <= e[t].endTime) {
|
||||
r = e[t].greeting;
|
||||
break
|
||||
}
|
||||
t.innerHTML = r, setTimeout((() => {
|
||||
t.classList.remove("shown"), setTimeout((() => {
|
||||
i.remove()
|
||||
}), 500)
|
||||
}), 3e3)
|
||||
})()</script>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue