Начальная позиция текста Влево, вправо и вправо

Question

Когда я загружаю эту анимацию, текст начинается с левой стороны HTML-страницы.

Но мне это нужно, как ниже

1. «Привет» Если начать с небольшой снаружи левого верхнего угла части страницы HTML
2. «Ваш» следует начинать с немного за пределами Ближнего Top (центр сверху) страницы
3. «Мир» должен начинаться с немного за пределами правом верхнем углу страницы

(я уточнил выше для лучшей ясности и понимания)

Все вместе должны появиться в центре, увеличивая масштаб. И все они должны возвращать масштабирование в левую сторону страницы.

JSFiddle

$('#hello').animate({ 
 
     zoom: '150%', 
 
     left: window.innerWidth/1 
 
}, 3000, function() { 
 
    // 4. Pause for 3 seconds 
 
    $(this).delay(3000) 
 
    // 6. zooms out to 200% heading towards left top corner, 
 
    // (logo position) 
 
    // 7. Fades out when reaching the logo 8. Logo appears 
 
    .animate({ 
 
     zoom: '40%', 
 
     left:0 
 
    }, 3000, function() { 
 
     $(this).find('span').fadeOut() 
 
    }) 
 
});

h1 { 
 
    font-size: 1em; 
 
    zoom: 200%; 
 
    transition: zoom 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="hello"> 
 
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1>

Answer 1

, так как анимация, в которой вы нуждаетесь, довольно сложна (слайд и масштабирование с разных сторон), возможно, создать пользовательский?

В приведенном ниже примере я использую 2D-преобразования и атрибут анимации step. Я положил 2 длинный <span> между словами, чтобы подтолкнуть их к бокам.

нажмите на красную рамку, чтобы начать анимацию. Если у вас есть вопросы, не стесняйтесь спросить.

пс: я оставил границы на элементы, так что вы можете увидеть, как они двигаются

$(function() { 
 
    FixMargins(); 
 

 
    $(".container").click(function() { 
 
    var phWidth = $(".placeholder").width(); 
 
    var height = $(".container").height(); 
 
    containerHeight = $(".theText").height(); 
 
    var newTopMargin = (height - containerHeight)/2; 
 
    
 
    $(".theText").animate({ 
 
     transform: 2 
 
    }, { 
 
     step: function(now, fx) { 
 
     var newscale = 1 + +now; 
 
     $(this).css({ 
 
     'transform': "scale(" + newscale + "," + newscale + ")", 
 
        "opacity":-1 + now 
 
        }); 
 
     $(this).css("margin-top",-150 + (newTopMargin+150)/2 * now); 
 
     $(".placeholder").css({ 
 
      "width": phWidth - phWidth * now/2 
 
     }); 
 
     FixMargins(); 
 
     }, 
 
     duration: 700 
 
    }).promise().done(function() { 
 
     $(this).delay(500); 
 
     var textTop = $(".theText").css("margin-top").split('p')[0]; 
 
     var textLeft = $(".theText").css("margin-left").split('p')[0]; 
 
     $(this).animate({ 
 
     transform: 2 
 
     }, { 
 
     step: function(now, fx) { 
 
      console.log(textLeft - textLeft * now); 
 
      var newscale = 3 - +now; 
 
      $(this).css('transform', "scale(" + newscale + "," + newscale + ")"); 
 

 
      $(".theText").css("marginLeft", textLeft - textLeft/2 * now); 
 
      $(".theText").css("marginTop", textTop - textTop/2 * now); 
 
     }, 
 
     duration: 500 
 
     }).promise().done(function() { 
 
     
 
     $(this).find('span').css({ 
 
      "position":"absolute" 
 
     }).animate({ 
 
      "width":0, 
 
      "opacity":0 
 
     }); 
 
     }); 
 
    }); 
 

 

 
    }); 
 
}); 
 

 
function FixMargins() { 
 

 
    width = $(".container").width(); 
 
    containerWidth = $(".theText").width(); 
 
    leftMargin = (width - containerWidth)/2; 
 
    $(".theText").css("marginLeft", leftMargin); 
 

 
}

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    border:1px solid red; 
 
} 
 
.theText { 
 
    position: absolute; 
 
    margin-top:-150px; 
 
    opacity:0; 
 
} 
 
.placeholder { 
 

 
    width: 200px; 
 
    display: inline-block; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> <span class="theText"> 
 
     H<span>ello</span> 
 
    <span class="placeholder"></span> 
 
    Y<span>our</span> 
 
    <span class="placeholder"></span> 
 
    W<span>orld</span> 
 
    </span> 
 
</div>

Answer 2

отредактировать вашего кода. Но в этих кодах вы не обладаете масштабированием класса и другими классами. эта работа по коду основана на размере шрифта.

** Html **

<div id="hello"> 
    <h1>H <span>ello</span></h1> 
    <h1>Y <span>our</span></h1> 
    <h1>W <span>orld</span></h1> 
</div> 

** Css **

#hello h1 { 
    width: 33%; 
    font-size: 1em; 
    text-align: center; 
    display: inline-block; 
} 

** Отредактировано> Css **

#hello{ 
    -webkit-animation: myfirst linear 12s; /* Chrome, Safari, Opera */ 
    animation: myfirst linear 12s; 
} 

@-webkit-keyframes myfirst { 
    0% {padding:0} 
    10% {padding: 40vh 0} 
    50% {padding: 40vh 0} 
    85% {padding: 40vh 0} 
    100% {padding: 0} 
} 

@keyframes myfirst { 
    0% {padding:0} 
    10% {padding: 40vh 0} 
    50% {padding: 40vh 0} 
    85% {padding: 40vh 0} 
    100% {padding: 0} 
} 

** Jquery **

window.onload = function() { 

    var h1 = $('#hello h1'); 
    h1.animate({fontSize: '5em'}, 5000, 

     function() { 
      h1.delay(3000); 

      h1.animate({'font-size': '1em'}, 2000, 
       function() { 
        h1.children('span').fadeOut(1000); 
       } 
      ); 

     } 
    ); 
};