Как вставить текст из левого закадрового текста, чтобы добавить его к существующему центрированному предложению, прежде чем центрировать оба - PullRequest
Новая
       7

Как вставить текст из левого закадрового текста, чтобы добавить его к существующему центрированному предложению, прежде чем центрировать оба

0 голосов
/ 11 апреля 2019

Я создаю простую страничку для новой строительной компании друга.Когда страница загружается, название компании центрируется по горизонтали на странице в две строки:

Синий квартал

Конструкция

Когда страница загружается, ему нужен текст "Веб-сайтПод «скользить за пределами экрана слева в той же строке, что и« Конструкция », перед тем как оба слова центрируются относительно окна.

Синий квартал

Сайт в разработке

(извините, я не был уверен, как центрировать текст в вопросе ...)

До сих пор я поместил обе части текста, для которых требуется анимация, в div, чтобы отображать встроенный текст.Я нашел некоторый код, который использует ключевые кадры CSS, но он анимирует оба бита одинаково, а также не работает, если удалить текст «Under Under» с левой стороны экрана. 

<div class="headline">    
<h1 class="under-anim" >WEBSITE UNDER </h1>
<h1 class="construction">CONSTRUCTION</h1>
</div>

@keyframes slide-right {
  from {
    margin-left: -100%;
    width: 0%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.headline {
    width: 100%;
    text-align: center;
}


.headline h1 {
    display: inline;
    vertical-align: top;
    font-weight: bold;
    font-size: 57pt;
}

h1.construction {
    color: #BCBDC0; 
}

h1.under-anim {
    color: #DCDDDF;
    animation: 5s slide-right;
}

Я думаю, что мне нужна помощь с кодированием нескольких ключевых кадров.Сначала выведите текст «Веб-сайт под» слева, а когда он окажется рядом с «Конструкцией», сдвиньте их так, чтобы они были полностью отцентрированы.Любая помощь с благодарностью.

Ответы [ 3 ]

1 голос
/ 11 апреля 2019 

$( document ).ready(function() {
var $div = $("<div/>",{"class":"under-anim","text":"WEBSITE UNDER "});
$('.slides').prepend($div);
$('.slides').css('margin-left', -$('.under-anim').width()/2);
$div.css({left:-1000,opacity : 0 });
$div.animate({'left':0,'opacity' : 1},2000, function (){
$('.slides').animate({ 'margin-left': '0px', opacity: 0.5 }, 1000);
});
}); 
.slides {
  width: 100%;
  margin:0 auto;
  text-align: center;
  display: block;
}
.slides div {
  position:relative;
  display:inline;
  vertical-align: top;
  font-weight: bold;
  font-size: 20pt;
}
.construction {
  color: #BCBDC0; 
}
.under-anim {
  color: #DCDDDF;
}
<div class="slides">
  <div class="construction">CONSTRUCTION</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0 голосов
/ 12 апреля 2019

Я задавался вопросом, может ли это быть сделано одним CSS.

.outer {
    display: block;
    position: relative;
    left: 0px;
    width: 100%;

    overflow: hidden;
}
.inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}
.text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;

}


.myspace {
  display: inline-block;
  width: 500px;
  animation: shrinkspace 3s;
  animation-fill-mode: forwards; 
  
  
  
  }

.mycopy {
  display: inline-block;
  overflow: hidden;
  color: transparent;
  
  animation: shrinkcopy 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards; 
  
}

@keyframes shrinkcopy{
0% {
               max-width: 16em;
            }       
     
            100% {
               max-width: 0em;
            }
         }



@keyframes shrinkspace {
0% {
               width: 500px;
            }       
     
            100% {
               width: 0px;
            }
         }
<div class="outer"><div class="inner"><div class="text">


Blue Quarter

</div></div></div>
<div class="outer"><div class="inner"><div class="text">

Website under 
<span class='myspace'></span>

Construction

<span class='myspace'></span>
<span class='mycopy'>
Website under
</span>


</div></div></div>
0 голосов
/ 11 апреля 2019 

$( document ).ready(function() {
  var $div = $("<div/>",{"class":"under-anim","text":"WEBSITE UNDER "});
  $('.slides').prepend($div);
 
  $div.css({left:-1000,opacity : 0 });
  $div.animate({
    'left':0,
    'opacity' : 1
  },2000);
});
.slides {
  width: 100%;
  margin:0 auto;
  text-align: center;
  display: block;
}
.slides div {
  position:relative;
  display:inline;
  vertical-align: top;
  font-weight: bold;
  font-size: 20pt;
}
.construction {
  color: #BCBDC0; 
}
.under-anim {
  color: #DCDDDF;
}
<div class="slides">
  <div class="construction">CONSTRUCTION</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вы можете использовать jQuery?Я делаю пример для вас, используя jQuery и animate.Я сделал font-size меньше, чтобы увидеть, как он работает во фрагменте.Может ли это помочь вам?

...