CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Franky
John Franky

Reputation: 1042

Zoom text on html load and fade out at different location on same page

This is for HTML website with CSS and Javascript.

I am trying my best to archive the below, but i am not getting what is required.

This is for the logo which is a text, which will zoom in and out when the page loads and then it goes and sits in its place.

Example: 1. On page load, the text "Hello" zoom size 200% starts from top corner heading towards center of the page 2. Page load continues - say 50% of page load, the zoom of the text heading toward center is 500% 3. Page load completes - the text "hello" has come to center with zoom 800% 4. Pause for 3 seconds 5. Zooms out to 500% heading towards left top corner (logo position) 6. zooms out to 200% heading towards left top corner (logo position) 7. Fades out when reaching the logo 8. Logo appears

HTML Div:

<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

JS:

function pageFullyLoaded()
{
    var elem = document.getElementById("hello");
    elem.style.zoom = "500%";
}

Upvotes: 2

Views: 2662

Answers (1)

guest271314
guest271314

Reputation: 1

Try utilizing .animate()

// 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
  zoom: "800%",
  left: window.innerWidth / 2
}, 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: "200%",
    left:0
  }, 3000, function() {
    $(this).fadeOut()
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello">
  <h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

Upvotes: 2

Related Questions