Z Index Tween
How do I make an z index tween?
Setting z-index property of a relative positioned element and then tween some css properties besides z-index. What is a z index tween? How do you make a z index tween? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.
Z Index Tween - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Z Index Tween</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="btn1">Tween</button>
<div id="log1">On start the element's z-index is: <span></span></div>
<div id="log2">The element's current z-index is: <span></span></div>
<div id="log3">On complete the element's z index is: <span></span></div>
<div id="div1"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.3/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Z Index Tween - Script Codes CSS Codes
#div1{ position:relative; width:150px; height:150px; background:#00f; margin-top:10px;
}
#log1, #log2, #log3{ width:300px; height:30px; line-height:30px; padding:10px; border:solid 1px #000; background:#E9E9E9; margin-top:10px;
}
Z Index Tween - Script Codes JS Codes
$(document).ready(function(){
var div1 = $("div#div1"), log1 = $("div#log1"), log2 = $("div#log2"), log3 = $("div#log3"), btn1 = $("button#btn1"), tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360, zIndex:20, paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});
TweenMax.set(div1, {zIndex:50})
function tn1Start()
{ log1.children().html(div1.css('z-index'));
}
function tn1Update()
{ log2.children().html(div1.css('z-index'));
}
function tn1Complete()
{ log3.children().html(div1.css('z-index'));
}
btn1.click(function()
{ log1.children().html(''); log2.children().html(''); log3.children().html(''); tn1.play(0);
});
});
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,138 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Update tween progress with Draggable | 2,695 Kb |
Greensock 3D Preloader Spinner | 2,373 Kb |
Circular Bezier | 2,696 Kb |
Cross-Browser Flip Card | 2,396 Kb |
Greensock Swipe Slides | 4,201 Kb |
Simple scroll controlled animation | 2,229 Kb |
Auto scroll to element offset 2 | 2,620 Kb |
Simple Dragging Direction | 2,374 Kb |
GSAP Scramble Text Plugin | 2,521 Kb |
Greensock Draggable latest update | 2,971 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Basic template | Tomcat | 1,675 Kb |
Fellowship of the Ring | Aussieyang | 2,639 Kb |
Template | Indra_z85 | 2,323 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Degree Picker | Idered | 4,307 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Responsive slide | Thorien | 2,400 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!