• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
288
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ