Add Fallback to Airpod Mask in CSS

Mohammed4mach · Oct 30, 2023 · 7635532 · 7635532
1 parent 812798d
commit 7635532
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 A try to replicate on-scroll animation from [AirPods Pro web page](https://www.apple.com/eg/airpods-pro/)
 
+**[Demo](https://github.com/Mohammed4mach/apple-animation-replication/deployments)**
+
 ## Installation
 
 - [ ] Clone the repo

diff --git a/src/sass/app.scss b/src/sass/app.scss
@@ -218,8 +218,10 @@ strong
 
     &--masked
     {
-        -webkit-mask-image: url('../../assets/images/audio_airpod_mask__c3ed1snibvo2_large.png');
-        mask-image: url('../../assets/images/audio_airpod_mask__c3ed1snibvo2_large.png');
+        -webkit-mask-image: url('../../assets/images/audio_airpod_mask__c3ed1snibvo2_large.png'),
+            url('../../apple-animation-replication/assets/images/audio_airpod_mask__c3ed1snibvo2_large.png');
+        mask-image: url('../../assets/images/audio_airpod_mask__c3ed1snibvo2_large.png'),
+            url('../../apple-animation-replication/assets/images/audio_airpod_mask__c3ed1snibvo2_large.png');
         -webkit-mask-size: contain;
         mask-size: contain;
         -webkit-mask-repeat: no-repeat;