• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Анимация заголовков или определенных блоков

Разработка Анимация заголовков или определенных блоков

Нет прав для скачивания
Анимация заголовков или определенных блоков
Пишем просто код HTML:
HTML:
<section>
  <div class="special split">BREATHE</div>
</section>
Пишем стиль для него:
CSS:
:root {
  --bgColor: #231f20;
  --color: #c85e83;
}
* {
  box-sizing: border-box;
}
body {
  background-color: var(--bgColor);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
}
body section {
  font-family: 'Cheee';
  font-variation-settings: 'yest' 0, 'gvty' 0;
  width: 100%;
  margin: 32vh auto;
  display: inline-block;
  line-height: 1em;
  color: var(--color);
  font-size: 19vw;
}
body .special.split {
  color: inherit;
}
body .special.split > div {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  will-change: font-variation-settings;
}
И придаем динамику и все возможные подергивания:
JavaScript:
var win, container, stats;
//-
var testStats;
//-
$(document).ready(function($) {
    win = $(window);
    container = $('section');

    //- Stats
    if ( testStats && typeof Stats !== "undefined") {
        stats = new Stats();
        stats.domElement.style.position = "absolute";
        stats.domElement.style.top = "0px";
        document.body.appendChild(stats.domElement);
    }
    //-
    var splits = [];
    container.find('.special.split').each( function(){
        splits.push( new SplitFont( $(this), splits.length ) );
    });
    //-
    function animate() {
        if( testStats ){
            stats.begin();
        }
        //-
        requestAnimationFrame( animate );
        $.each(splits, function(_i, _split ){
            _split.render();
        });
        
        //-
        if( testStats ){
            stats.end();
        }
    }
    animate();
});


//- FONT -
var SplitFont = function( _element, _incr ){
    var t = this;
    t.el = _element;
    t.splitText = new SplitText( t.el, {type:"chars"});
    t.numChars = t.splitText.chars.length;
    //console.log(t.numChars);
    //
    t.chars = [];
    
    //- Animation
    t.iniWght   = 0;
    t.finWght   = 1000;
    t.wdth      = 0;
    t.increase  = (Math.PI * 2 / t.numChars );
    t.vel          = 0.1;
    
    //-
    t.radius = 190;
    //-
    for(var i = 0; i < t.numChars; i++){
        var char = $(t.splitText.chars[i]);
        var text = char.text();
        char.data('counter', (t.increase * i) + (_incr * 0.5)  );
        //-
        var deg = (360 * (i / t.numChars) - 90);
        var x = t.radius * Math.cos( deg * Math.PI / 180);
        var y = t.radius * Math.sin( deg * Math.PI / 180);
    }
 
      t.render = function(){
        for(var i = 0; i < t.numChars; i++){
            var char = $(t.splitText.chars[i]);
            var wght = t.iniWght + ( (t.finWght - t.iniWght) * (Math.sin( char.data('counter') ) / 2 + 0.5 ));
            char.css('font-variation-settings', '"yest" '+wght+', "gvty" 0' );
            char.data('counter', char.data('counter') - (t.increase * t.vel) );
        }
    };
};
Смотрим теперь наше название:
1q81.gif
Автор
baltun
Скачиваний
0
Просмотры
404
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Верх Низ