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

[教學] 利用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會隨著背景色不同,而自動的變換顏色
#範例展示