Starting position of the text Left, Right, and Right

Question

When I load this animation, the text starts on the left side of the HTML page.

But I need it as below

• "Hello" Should start from the small outside of the upper left side of the html page
• Your should start with a small outer middle top (top to top) page
• The world should begin with a small outer right upper corner of the page.

(I changed this for better clarity and understanding)

All together, should come to the center of scaling. And they should all return to scaling on the left side of the page.

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

since the required animation is rather complicated (slide and zoom from different sides), is it possible to create a custom one?

in the example below, I use the 2D transforms and the step animation attribute. I put 2 long <span> between the words to push them to the sides.

Click on the red frame to start the animation. If you have any questions, feel free to ask.

ps: I leave the borders on the elements so you can see how they move

 $(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

I am editing the code. But in these codes you do not have class scaling and other classes. this code job is based on font size.

** 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; } 

** Edited> 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); } ); } ); };