root
/
telebit-relay.js
mirror of https://git.coolaj86.com/coolaj86/telebit-relay.js.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Added more use cases to sliding text.

This commit is contained in:
John Shaver 2018-08-02 21:53:06 -07:00
parent 353329120f
commit 1099a75509
2 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/extensions/admin/index.html
View File

@ -77,7 +77,11 @@
new values are included in the style comments. new values are included in the style comments.
--> -->
<span class="accent-color">to test your webhooks.</span> <span class="accent-color">to test your webhooks.</span>
<span class="accent-color">to show your project to Grandma.</span> <span class="accent-color">to show your project to Mom.</span>
<span class="accent-color">to test your site on mobile.</span>
<span class="accent-color">to work from 127.0.0.1.</span>
<span class="accent-color">to access your raspberry pi.</span>
<span class="accent-color">to build peer-to-peer apps.</span>
</div></h2> </div></h2>
<h2 id="download-section">Quickstart with bash</h2> <h2 id="download-section">Quickstart with bash</h2>
<div class="quickstart-step"> <div class="quickstart-step">

35
lib/extensions/admin/static-site-assets/styles/vertical-slide.css
View File

@ -11,9 +11,9 @@ nth: the value in "nth-child())"
text-indent: 8px; text-indent: 8px;
} }
.sliding-vertical span{ .sliding-vertical span{
animation: topToBottom 5s linear infinite 0s;/* interval * n */ animation: topToBottom 15s linear infinite 0s;/* interval * n */
-ms-animation: topToBottom 5s linear infinite 0s;/* interval * n */ -ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */
-webkit-animation: topToBottom 5s linear infinite 0s;/* interval * n */ -webkit-animation: topToBottom 15s linear infinite 0s;/* interval * n */
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -23,7 +23,6 @@ nth: the value in "nth-child())"
-ms-animation-delay: 2.5s;/* (nth - 1) * interval */ -ms-animation-delay: 2.5s;/* (nth - 1) * interval */
-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */ -webkit-animation-delay: 2.5s;/* (nth - 1) * interval */
} }
/*
.sliding-vertical span:nth-child(3){ .sliding-vertical span:nth-child(3){
animation-delay: 5s; animation-delay: 5s;
-ms-animation-delay: 5s; -ms-animation-delay: 5s;
@ -43,9 +42,9 @@ nth: the value in "nth-child())"
.sliding-vertical span:nth-child(6){ .sliding-vertical span:nth-child(6){
animation-delay: 12.5s; animation-delay: 12.5s;
-ms-animation-delay: 12.5s; -ms-animation-delay: 12.5s;
-webkit-animation-delay: 7.5s; -webkit-animation-delay: 12.5s;
} }
/*
.sliding-vertical span:nth-child(7){ .sliding-vertical span:nth-child(7){
animation-delay: 15s; animation-delay: 15s;
-ms-animation-delay: 15s; -ms-animation-delay: 15s;
@ -55,28 +54,28 @@ nth: the value in "nth-child())"
/*topToBottom Animation*/ /*topToBottom Animation*/
@keyframes topToBottom{ @keyframes topToBottom{
0% { opacity: 0; transform: translateY(-50px); } 0% { opacity: 0; transform: translateY(-50px); }
12.5% { opacity: 1; transform: translateY(0px); }/* transitionTime * interval * n */ 6.667% { opacity: 1; transform: translateY(0px); }/* transitionTime/(interval*n) */
50% { opacity: 1; transform: translateY(0px); } /* interval/(interval * n) */ 16.667% { opacity: 1; transform: translateY(0px); } /* 1/n */
62.5% { opacity: 0; transform: translateY(50px); } /* interval/(interval * n) + transitionTime */ 23.333% { opacity: 0; transform: translateY(50px); } /* (interval + transitionTime)/(n*interval) */
} }
@-moz-keyframes topToBottom{ @-moz-keyframes topToBottom{
0% { opacity: 0; -moz-transform: translateY(-50px); } 0% { opacity: 0; -moz-transform: translateY(-50px); }
12.5% { opacity: 1; -moz-transform: translateY(0px); } 6.667% { opacity: 1; -moz-transform: translateY(0px); }
50% { opacity: 1; -moz-transform: translateY(0px); } 16.667% { opacity: 1; -moz-transform: translateY(0px); }
62.5% { opacity: 0; -moz-transform: translateY(50px); } 23.333% { opacity: 0; -moz-transform: translateY(50px); }
} }
@-webkit-keyframes topToBottom{ @-webkit-keyframes topToBottom{
0% { opacity: 0; -webkit-transform: translateY(-50px); } 0% { opacity: 0; -webkit-transform: translateY(-50px); }
12.5% { opacity: 1; -webkit-transform: translateY(0px); } 6.667% { opacity: 1; -webkit-transform: translateY(0px); }
50% { opacity: 1; -webkit-transform: translateY(0px); } 16.667% { opacity: 1; -webkit-transform: translateY(0px); }
62.5% { opacity: 0; -webkit-transform: translateY(50px); } 23.333% { opacity: 0; -webkit-transform: translateY(50px); }
} }
@-ms-keyframes topToBottom{ @-ms-keyframes topToBottom{
0% { opacity: 0; -ms-transform: translateY(-50px); } 0% { opacity: 0; -ms-transform: translateY(-50px); }
12.5% { opacity: 1; -ms-transform: translateY(0px); } 6.667% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); } 16.667% { opacity: 1; -ms-transform: translateY(0px); }
62.5% { opacity: 0; -ms-transform: translateY(50px); } 23.333% { opacity: 0; -ms-transform: translateY(50px); }
} }