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.
-->
<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>
<h2 id="download-section">Quickstart with bash</h2>
<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;
}
.sliding-vertical span{
animation: topToBottom 5s linear infinite 0s;/* interval * n */
-ms-animation: topToBottom 5s linear infinite 0s;/* interval * n */
-webkit-animation: topToBottom 5s linear infinite 0s;/* interval * n */
animation: topToBottom 15s linear infinite 0s;/* interval * n */
-ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */
-webkit-animation: topToBottom 15s linear infinite 0s;/* interval * n */
opacity: 0;
overflow: hidden;
position: absolute;
@ -23,7 +23,6 @@ nth: the value in "nth-child())"
-ms-animation-delay: 2.5s;/* (nth - 1) * interval */
-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */
}
/*
.sliding-vertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
@ -43,9 +42,9 @@ nth: the value in "nth-child())"
.sliding-vertical span:nth-child(6){
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){
animation-delay: 15s;
-ms-animation-delay: 15s;
@ -55,28 +54,28 @@ nth: the value in "nth-child())"
/*topToBottom Animation*/
@keyframes topToBottom{
0% { opacity: 0; transform: translateY(-50px); }
12.5% { opacity: 1; transform: translateY(0px); }/* transitionTime * interval * n */
50% { opacity: 1; transform: translateY(0px); } /* interval/(interval * n) */
62.5% { opacity: 0; transform: translateY(50px); } /* interval/(interval * n) + transitionTime */
6.667% { opacity: 1; transform: translateY(0px); }/* transitionTime/(interval*n) */
16.667% { opacity: 1; transform: translateY(0px); } /* 1/n */
23.333% { opacity: 0; transform: translateY(50px); } /* (interval + transitionTime)/(n*interval) */
}
@-moz-keyframes topToBottom{
0% { opacity: 0; -moz-transform: translateY(-50px); }
12.5% { opacity: 1; -moz-transform: translateY(0px); }
50% { opacity: 1; -moz-transform: translateY(0px); }
62.5% { opacity: 0; -moz-transform: translateY(50px); }
6.667% { opacity: 1; -moz-transform: translateY(0px); }
16.667% { opacity: 1; -moz-transform: translateY(0px); }
23.333% { opacity: 0; -moz-transform: translateY(50px); }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; -webkit-transform: translateY(-50px); }
12.5% { opacity: 1; -webkit-transform: translateY(0px); }
50% { opacity: 1; -webkit-transform: translateY(0px); }
62.5% { opacity: 0; -webkit-transform: translateY(50px); }
6.667% { opacity: 1; -webkit-transform: translateY(0px); }
16.667% { opacity: 1; -webkit-transform: translateY(0px); }
23.333% { opacity: 0; -webkit-transform: translateY(50px); }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; -ms-transform: translateY(-50px); }
12.5% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
62.5% { opacity: 0; -ms-transform: translateY(50px); }
6.667% { opacity: 1; -ms-transform: translateY(0px); }
16.667% { opacity: 1; -ms-transform: translateY(0px); }
23.333% { opacity: 0; -ms-transform: translateY(50px); }
}