hero image flicker effect
MODIFY
WalletWasabi.Backend/wwwroot/css/style.css
WalletWasabi.Backend/wwwroot/css/style.css
@@ -43,7 +43,7 @@ ul {
box-shadow: 0 0 50px rgba(0,0,0,.23);
}
.box-shadow {
- box-shadow: 0 0 30px rgba(0,0,0,.23);
+ box-shadow: 0 0 30px rgba(0,0,0,.18);
}
.arrow-right {
@@ -171,13 +171,70 @@ section .shader {
}
.hero .hero-image {
+ position: relative;
height: 100vh;
width: 100%;
- background-image: url("../images/hero.png");
+ background-image: url("../images/hero-off.jpg");
background-size: cover;
background-position: center;
}
+.hero .hero-image:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-image: url("../images/hero-on.jpg");
+ background-size: cover;
+ background-position: center;
+ z-index: 0;
+
+ -webkit-animation-name: hero-flickr;
+ -webkit-animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-duration: 3s;
+ -webkit-transform-style: preserve-3d;
+
+}
+
+@-webkit-keyframes hero-flickr {
+ 0% {
+ opacity: 0;
+ }
+ 2% {
+ opacity: 1;
+ }
+ 4% {
+ opacity: 0;
+ }
+ 7% {
+ opacity: .5;
+ }
+ 9% {
+ opacity: .2;
+ }
+ 12%, 69% {
+ opacity: 1;
+ }
+ 70% {
+ opacity: 0;
+ }
+ 73% {
+ opacity: 0.5;
+ }
+ 76% {
+ opacity: 0;
+ }
+ 79% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
.hero .mobile-heading {
position: absolute;
bottom: 0;

ADD
WalletWasabi.Backend/wwwroot/images/hero-off.jpg
WalletWasabi.Backend/wwwroot/images/hero-off.jpg
Binary files /dev/null and b/WalletWasabi.Backend/wwwroot/images/hero-off.jpg differ

ADD
WalletWasabi.Backend/wwwroot/images/hero-on.jpg
WalletWasabi.Backend/wwwroot/images/hero-on.jpg
Binary files /dev/null and b/WalletWasabi.Backend/wwwroot/images/hero-on.jpg differ

MODIFY
WalletWasabi.Backend/wwwroot/index.html
WalletWasabi.Backend/wwwroot/index.html
<div class="container">
<h2 class="text-center text-lowercase mb-4">Frequently Asked Questions</h2>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq1" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq1">
Why did my enqueued coins get banned?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq2" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq2">
Will it be possible to ever use Wasabi on a phone?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq3" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq3">
Do we need privacy options in the Core-protocol or are apps like Wasabi enough?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq4" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq4">
How does it get its blockchain data? SPV, Compact Filters or Full Node?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq5" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq5">
Why is it called Wasabi?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq6" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq6">
Will Wasabi wallet support hardware wallets?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq7" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq7">
What to do with change?
</div>
</div>
- <div class="card bg-light box-shadow border-light mb-2">
+ <div class="card bg-white box-shadow border-light mb-2">
<input type="checkbox" id="faq8" class="toggle-input" />
<label class="card-header bg-light font-weight-bold text-uppercase border-0 toggle-label pr-3" for="faq8">
What's an anonymity set?

hero image flicker effect