Question

在此演示引导程序模板上：

http://ironsummitmedia.github.io/startbootstrap-creative/

向下滚动标题文本“Start Bootstrap”缩小并更改颜色。

这是怎么做到的？我试图在代码中解决它 - 我知道它正在使用Bootstrap的词缀，我可以得到文本调整大小 - 我只是不知道字体大小之间的动画过渡是如何工作的。

Answer 1

我想他们会做这样的事情......

/* Important bit... */
$(window).scroll(function () {
    var $this = $(this);
    var $nav = $('.navbar-brand');
    
    if ($this.scrollTop() > 100) {
       $nav.addClass('small');
    } else {
       $nav.removeClass('small');
    }
});

body {
    height: 2000px;
    background: url(http://placehold.it/200x200?text=scroll) repeat;
}

.navbar-brand {
    position: fixed;
    top: 0;
    font-size: 30px;
    color: #1a1a1a;
    transition: all 1s ease; /* ... other important bit */
}

/* this bit's important too... */
.small { 
    font-size: 20px;
    color: #f05f40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a class="navbar-brand" href="#">Start Bootstrap</a>

如何在引导程序头中为文本设置动画

1 个答案: