Is it possible to remove the letters "ello" from the word "Hello" as it zooms out?
I want the letters "e," "l," "l," and "o" to fade out when steps 6 and 7 of my code are reached, while only the letter "H" moves towards the top left corner. // 6. Zoom out to 200% heading towards the top left corner, // 7. Fade out upon reaching the logo
JavaScript:
// 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. Zoom out to 200% heading towards the top left corner,
// (logo position)
// 7. Fade out upon reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).fadeOut()
})
})
HTML:
<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>