Fix flickering
This commit is contained in:
parent
225ceede13
commit
602f17ad27
|
@ -3,10 +3,12 @@
|
|||
<h2 class="text-center mt-5 mb-4">Donate</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<img src="/assets/images/profile.png" class="mb-3"/>
|
||||
<a href="https://federicoterzi.com" target="_blank">
|
||||
<img src="/assets/images/profile.png" class="mb-3"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>Hi! I'm Federico, the creator of espanso. I developed espanso in my (little) spare time
|
||||
<p>Hi! I'm <a href="https://federicoterzi.com" target="_blank">Federico</a>, the creator of espanso. I developed espanso in my (little) spare time
|
||||
and I decided to make it open source because I thought it could be useful to many people.
|
||||
</p>
|
||||
<p class="bigger">If you liked the project, please consider making a small donation, it really helps :)</p>
|
||||
|
|
|
@ -2,12 +2,11 @@
|
|||
<div class="contrib-box">
|
||||
<h2 class="mb-4">Contributing</h2>
|
||||
<p><b>espanso</b> is open source and <a href="https://github.com/federico-terzi/espanso">hosted on GitHub</a>.</p>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/federico-terzi/espanso" data-size="large" data-show-count="true" aria-label="Star federico-terzi/espanso on GitHub">Star</a>
|
||||
<a class="github-button" href="https://github.com/federico-terzi/espanso" data-size="large" data-show-count="true" aria-label="Star federico-terzi/espanso on GitHub">Star</a>
|
||||
<p>If you find a bug or have an idea for a new feature,
|
||||
please <a href="https://github.com/federico-terzi/espanso/issues">open an issue on GitHub</a>.</p>
|
||||
</div>
|
||||
<div class="copy-box">
|
||||
<p class="bottom-paragraph">Designed and created by Federico Terzi. Copyright © Federico Terzi 2019</p>
|
||||
<p class="bottom-paragraph">Designed and created by <a href="https://federicoterzi.com" target="_blank">Federico Terzi</a>. Copyright © <a href="https://federicoterzi.com" target="_blank">Federico Terzi</a> 2019</p>
|
||||
</div>
|
||||
</div>
|
|
@ -18,6 +18,10 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grayColor;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
margin: 120px 0 160px 0;
|
||||
margin: 100px 0 130px 0;
|
||||
|
||||
@media screen and (max-width: $screen-desktop) {
|
||||
margin: 80px 0 100px 0;
|
||||
|
@ -12,6 +12,7 @@
|
|||
@media screen and (max-width: $screen-phone) {
|
||||
margin: 35px 0 70px 0;
|
||||
font-size: 2.5em;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -99,6 +100,7 @@
|
|||
background-color: $blackColor;
|
||||
color: white;
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
|
|
51
index.html
51
index.html
|
@ -113,7 +113,7 @@ showParticles: True
|
|||
</div>
|
||||
|
||||
<p class="mt-4 mb-3">Do you want to know more?</p>
|
||||
<a class="btn btn-lg" href="#" role="button">Visit Documentation</a>
|
||||
<a class="btn btn-lg" href="/docs/" role="button">Visit Documentation</a>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/typeit.min.js"></script>
|
||||
|
@ -138,6 +138,24 @@ showParticles: True
|
|||
return os;
|
||||
}
|
||||
|
||||
|
||||
function isVisible(element) {
|
||||
var coordinates = element.getBoundingClientRect();
|
||||
|
||||
if (
|
||||
coordinates.right > window.innerWidth ||
|
||||
coordinates.bottom > window.innerHeight
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (coordinates.top < 0 || coordinates.left < 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function jumboText() {
|
||||
// Setup get started button
|
||||
var os = getOS();
|
||||
|
@ -186,8 +204,10 @@ showParticles: True
|
|||
}
|
||||
|
||||
function features() {
|
||||
var examples = [];
|
||||
|
||||
document.getElementById("feature-1").innerText = "";
|
||||
new TypeIt('#feature-1', {
|
||||
var instance = new TypeIt('#feature-1', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -201,9 +221,10 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-1")});
|
||||
|
||||
document.getElementById("feature-2").innerText = "";
|
||||
new TypeIt('#feature-2', {
|
||||
var instance = new TypeIt('#feature-2', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -217,9 +238,10 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-2")});
|
||||
|
||||
document.getElementById("feature-3").innerText = "";
|
||||
new TypeIt('#feature-3', {
|
||||
var instance = new TypeIt('#feature-3', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -233,9 +255,10 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-3")});
|
||||
|
||||
document.getElementById("feature-4").innerText = "";
|
||||
new TypeIt('#feature-4', {
|
||||
var instance = new TypeIt('#feature-4', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -249,9 +272,10 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-4")});
|
||||
|
||||
document.getElementById("feature-5").innerText = "";
|
||||
new TypeIt('#feature-5', {
|
||||
var instance = new TypeIt('#feature-5', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -265,9 +289,10 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-5")});
|
||||
|
||||
document.getElementById("feature-6").innerText = "";
|
||||
new TypeIt('#feature-6', {
|
||||
var instance = new TypeIt('#feature-6', {
|
||||
speed: 50,
|
||||
startDelay: 900,
|
||||
loop: true,
|
||||
|
@ -281,6 +306,18 @@ showParticles: True
|
|||
.pause(1500)
|
||||
.options({speed: 50, deleteSpeed: 7})
|
||||
.go();
|
||||
examples.push({typeit: instance, element: document.getElementById("feature-6")});
|
||||
|
||||
// Fix page flickering
|
||||
setInterval(function() {
|
||||
for (var i = 0; i<examples.length; i++) {
|
||||
if (!isVisible(examples[i].element)) {
|
||||
examples[i].typeit.freeze();
|
||||
}else{
|
||||
examples[i].typeit.unfreeze();
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
jumboText();
|
||||
|
|
Loading…
Reference in New Issue
Block a user