Липкий текст заголовка с плавным изменением цвета на прокрутке

Квест - добавьте класс, липкий для тега h1, центрированный по центру (по горизонтали и по вертикали) в заголовке, и отследите его до второго положения и перейдите в раздел «about» со свитком, пример (но это не работает) http://codepen.io/AlexanderDolgan/pen/bEjwRP Итак, Я добавил липкий класс (позиция: фиксированная, смена верха: до 0, сброс transform: translate (-50%, 0)) для этого элемента с помощью jQuery, когда пользователь запускает прокрутите страницу вниз.Липкий текст заголовка с плавным изменением цвета на прокрутке

1) Теперь осталось сделать плавный цвет текста с изменением текста от белого до черного с помощью прокрутки. Могут ли использоваться фильтры? или я могу создать второй текст h1 с 0 непрозрачностью выше, как его постепенно изменить? 2) добавьте еще один класс в нижнее положение (зеленый заголовок) и отбросьте текст там.

http://codepen.io/AlexanderDolgan/pen/bEjwRP

<html lang="en"> 

<head> 
    <meta charset="UTF-8" /> 
    <title>Document</title> 
</head> 

<body> 
    <div class="wrapper"> 
    <!--site header --> 
    <section class="site-header"> 
     <!--company name and desc--> 
     <div class="hero-text" id="sticky"> 
     <h1 >Company name</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
     </div> 
    </section> 
    <section class="about"> 
     <h2>I want to move the company name here</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod dolorum doloremque dicta iste a atque iure explicabo? Laborum, magnam?</p> 
    </section> 
    </div> 
</body> 

</html>

CSS

* { 
    box-sizing: border-box; 
} 
body { 
    min-height:1000px; 
} 

body, h1, .wrapper { 
    margin: 0; 
    padding: 0; 
} 

// site header 
.site-header { 
    background: grey; 
    height: 50vh; 
    min-height: 200px; 

    position:relative; 
} 

// company name and desc 
.hero-text { 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 

    text-align: center; 
    color: white; 
} 


.about { 
    text-align: center; 
} 
.about h2 { 
    color:green; 
} 
.about p { 
    display: block; 
    margin: 0 auto; 
    max-width: 700px; 
} 

.sticky { 
    width: 75%; 
    position: fixed; 
    top:0; 
    transform: translate(-50%,0%); 
}

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#sticky').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
      $('#sticky').addClass("sticky"); 
     } else { 
      $('#sticky').removeClass("sticky"); 
     } 
    }); 
});

Спасибо за любую помощь! Я не могу решить проблему с моим первым проектом. Если кто-нибудь подскажет мне, это будет здорово.

источник

2016-02-02 Alexander Dolgan

Выполняет ли ваш код работу? Если нет, то какая именно проблема вы видите? Что ты хочешь делать? это не ясно из вашего вопроса –

Спасибо за ваш ответ, да частично я завершаю вызов - 1) Теперь осталось сделать плавный цвет текста с изменением текста от белого до черного с помощью прокрутки. Могут ли использоваться фильтры? или я могу создать второй текст h1 с 0 непрозрачностью выше, как его постепенно изменить? 2) добавьте еще один класс в нижнее положение (зеленый заголовок) и отбросьте текст там. возможно, я закончил его по дороге на работу –

Я думаю, что вы можете сделать это следующим образом:

$(window).scroll(function(){ 


    if($(window).scrollTop() > stickyHeaderTop) { 
     //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
     $('#sticky').addClass("sticky"); 

     $('#sticky h1').css("color","rgb(0,0,0)"); 

    } else { 
     $('#sticky').removeClass("sticky"); 

     var colorPic = Math.round((1-$(window).scrollTop()/stickyHeaderTop)*255); 
     $('#sticky h1').css("color","rgb("+colorPic+","+colorPic+","+colorPic+")"); 
    } 
});

Что происходит, что я меняюсь h1 цвета по функции прокрутки с помощью rgb тег цвета. Прямо сейчас, я меняю цвет от white до black и наоборот, но вы можете добиться практически любых изменений цвета, которые вы хотите. Посмотрите рабочий пример в CODEPEN

источник

2016-02-03 00:30:01

Спасибо большое, это помогло мне завершить мой первый проект. –

Липкий текст заголовка с плавным изменением цвета на прокрутке

ответ

Смежные вопросы