Spinning Images
How do I make an spinning images?
Greensock Forums:http://forums.greensock.com/topic/8742-spinning-images/. What is a spinning images? How do you make a spinning images? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.
Spinning Images - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinning Images</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>SPINNING IMAGES <br>POWERED BY GREENSOCK ANIMATION PLATFORM</h2>
<div id="img-wrapper"> <img class="rotating-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/1-150x150.jpg" /> <img class="rotating-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/2-150x150.jpg" /> <img class="rotating-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/3-150x150.jpg" /> <img class="rotating-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/4-150x150.jpg" />
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Spinning Images - Script Codes CSS Codes
body
{ background:#000; margin:0;
}
h2
{ text-align:center; color:#fff; font:bold 30px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#img-wrapper
{ width:200px; height:200px; position:relative; margin-left:50%; left:-100px; margin-top:100px; border:solid 2px green; border-radius:10px;
}
.rotating-img
{ -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden !important; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; position:absolute; margin:25px;
}
Spinning Images - Script Codes JS Codes
var imgWrapper = $("#img-wrapper"), images = $(".rotating-img"), tl = new TimelineMax({repeat:-1});
TweenLite.set(imgWrapper, {perspective:500});
TweenLite.set(images, {rotationY:180});
TweenLite.set(images[0], {rotationY:0});
for(var i = 0; i < images.length; i++)
{ var nextImage = (i+1) == images.length ? images[0] : images[i+1]; tl .to(images[i], 2, {rotationY:'-180_ccw'}, (2 * i)) .to(nextImage, 2, {rotationY:'0_ccw'}, (2 * i));
}
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 18, 2022 |
Rating | 3.5 |
Size | 2,279 Kb |
Views | 16,192 |
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 |
Greensock Draggable latest update | 2,971 Kb |
GSAP Scramble Text Plugin | 2,521 Kb |
Simple scroll controlled animation | 2,229 Kb |
Simple Slider Powered by GreenSock | 4,573 Kb |
Auto scroll to element offset | 2,549 Kb |
Update tween progress with Draggable | 2,695 Kb |
Z Index Tween | 2,138 Kb |
Toggle Tween Direction | 2,325 Kb |
Greensock 3D Preloader Spinner | 2,373 Kb |
Circular Progress Bar | 4,985 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 |
Fireworks Show | Arianalynn | 3,048 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
LeMandinque | Aadesida | 9,046 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 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!