搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [教學] 利用jQuery實現，網站LOGO隨著背景色不同，而自動變換顏色

[教學] 利用jQuery實現，網站LOGO隨著背景色不同，而自動變換顏色

2020/11/17

梅問題－[教學] 網站LOGO會隨著背景色不同，而自動的變換顏色
　　之前梅干曾看到南部的一間眼鏡行網站，LOGO竟然會隨著背景色而變換，當今天底色是白色時，LOGO就變黑色，當底色變黑色時，LOGO就變白色，這效果相當的酷，因此那天就花了點時間，研究一下這個特效的作法，於是就上網搜尋了一些範例，再加加減減後，終於完成這個效果，因此也想將網站LOGO，隨著背景色的不同，而變換LOGO顏色的朋友，梅干就把作法分享各位，有需要的朋友，就自行使用。

Step1
首先，先將HTML碼與CSS碼，放置網頁中，而這邊比較需要注意的地方，logo需準備二張，一黑一白同時div區塊的再加入data-color的屬性來標示出區塊的顏色，當白底為light，黑底為dark。
#html
<body class="df-light">
<div id="nav">
<a href="#" class="logo">
    <img src="https://www.7-cha.com/images/logo-dark.png">
    <img src="https://www.7-cha.com/images/logo.png">
</a>

</div>
<div class="block div1" data-color="light"></div>
<div class="block div2" data-color="dark"></div>
<div class="block div3"></div>
#CSS
body.df-light .logo>img:nth-of-type(2){
display: none;
}
body.df-light.mwt-dark .logo>img:nth-of-type(1){
display: none;
}
body.df-light.mwt-dark .logo>img:nth-of-type(2){
display: block;
}
#nav{
position: fixed;
z-index: 999
}
.div1{height:200px;}
.div2{height:1000px; background: #111;}
.div3{height: 1000px; background:#fff;}
梅問題-[教學] 網站LOGO會隨著背景色不同，而自動的變換顏色
Step2
這時當滾動畫面時，會發現當黑色底時，又遇到黑色LOGO時，就會有被吃掉的感覺。
梅問題-[教學] 網站LOGO會隨著背景色不同，而自動的變換顏色
Step3
這時再把jquery引用，並將下方的程式碼碼加入，並重整頁面後，再滾動一次，就會發現LOGO會隨著背景色而變換顏色啦！是不是超酷的呀！
$(function(){
$(window).scroll(function() {
  var $window = $(window),
      $body = $('body'),
      $block = $('.block');
  var scroll = $window.scrollTop() + ($window.height() / 25);
  $block.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)mwt-\S+/g) || []).join(' ');
      });
      if(typeof($(this).data('color')) !== 'undefined') {
            $body.addClass('mwt-' + $(this).data('color'));
      }
    }
  });

}).scroll();
});
梅問題-[教學] 網站LOGO會隨著背景色不同，而自動的變換顏色
#範例展示


jQuery教學, jquery變色特效, jqury隨背景變更顏色, logo自動變換顏色,