CODEWITHSUNDEEP
javascripthtmlcss
fjs
fjs

Reputation: 51

Change text-shadow color for music button when scoll

I want to change the text-shadow color for the music button when I scroll down and the color will change back when I scroll up later. May I know how can I do this? Thanks in advance.

  $(document).ready(function() {
     $(".music-btn .fa-volume-up").on('click', function() {
      $(this).hide();
      $(".fa-volume-mute").fadeIn();
      $("#music")[0].play();
     });

     $(".music-btn .fa-volume-mute").on('click', function() {
      $(this).hide();
      $(".fa-volume-up").fadeIn();
      $("#music")[0].pause();
     });
  });
  
  
  
.music-btn {
 background-color:transperant;
 cursor: pointer;
 border: none;
 font-size: 40px;
 color: white;
 text-shadow:1px 1px 2px #e47746, 0 0 30px #ffc45d, 0 0 5px #ffc45d;
}

.fa-volume-up {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-music">
<audio id="music" src="music.mp3" autoplay="autoplay" loop="loop"></audio>
<button class="music-btn">
<i class="fa fa-volume-up" aria-hidden="true" title="play"></i>
<i class="fas fa-volume-mute" title="mute"></i>
</button>
</div>

Upvotes: 0

Views: 49

Answers (1)

BOZ
BOZ

Reputation: 2020

I am not sure if you meant to mute the sound or really the scroll motion.

That's why I wrote for both. Please choose whichever works for you.

$(document).ready(function() {
  $(".music-btn .fa-volume-up").on('click', function() {
    $(this).hide();
    $(".fa-volume-mute").fadeIn();
    $("#music")[0].play();
    // For sound mute
    $('.music-btn').removeClass('change-text-shadow');
  });

  $(".music-btn .fa-volume-mute").on('click', function() {
    $(this).hide();
    $(".fa-volume-up").fadeIn();
    $("#music")[0].pause();
    // For sound mute
    $('.music-btn').addClass('change-text-shadow');
  });

  /* -> For Scroll -> */
  var lastScrollTop = 0;
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      $('.music-btn').addClass('change-text-shadow');
    } else {
      $('.music-btn').removeClass('change-text-shadow');
    }
    lastScrollTop = st;
  });
  /* <- For Scroll <- */
});
.music-btn {
  background-color: transperant;
  cursor: pointer;
  border: none;
  font-size: 40px;
  color: white;
  text-shadow: 1px 1px 2px #e47746, 0 0 30px #ffc45d, 0 0 5px #ffc45d;
}

.change-text-shadow.music-btn {
  text-shadow: 1px 1px 2px green, 0 0 30px #ffc45d, 0 0 5px green;
}

.fa-volume-up {
  display: none;
}

body {
  height: 120rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="bg-music">
  <audio id="music" src="music.mp3" autoplay="autoplay" loop="loop"></audio>
  <button class="music-btn">
<i class="fa fa-volume-up" aria-hidden="true" title="play"></i>
<i class="fas fa-volume-mute" title="mute"></i>
</button>
</div>

Upvotes: 1

Related Questions