A Pen by Chrysto
How do I make an a pen by chrysto?
What is a a pen by chrysto? How do you make a a pen by chrysto? This script and codes were developed by Chrysto on 16 July 2022, Saturday.
A Pen by Chrysto - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Chrysto</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> <div class="slide">Slide 4</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Chrysto - Script Codes CSS Codes
#container{ position: relative; width: 960px; height: 400px; overflow: hidden; margin: 100px auto 0px; } .slide{ width: 960px; height: 400px; position: absolute; top: 0px; left: 0px; font-size: 50px; text-align: center; } .slide:nth-child(1){ background-color: red; } .slide:nth-child(2){ background-color: blue; color: white; } .slide:nth-child(3){ background-color: green; } .slide:nth-child(4){ background-color: yellow; }
A Pen by Chrysto - Script Codes JS Codes
$(function(){ var $slides = $(".slide"); var currentSlide = 0; TweenLite.set($slides.filter(":gt(0)"), {left:"960px"}); TweenLite.delayedCall(4, nextSlide); function nextSlide(){ TweenLite.to( $slides.eq(currentSlide), 1, {left:"-960px"} ); if (currentSlide < $slides.length - 1) { currentSlide++; } else { currentSlide = 0; } TweenLite.fromTo( $slides.eq(currentSlide), 1, {left: "960px"}, {left:"0px"} ); TweenLite.delayedCall(4, nextSlide); } });
Developer | Chrysto |
Username | bassta |
Uploaded | July 16, 2022 |
Rating | 3.5 |
Size | 2,057 Kb |
Views | 34,408 |
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 |
Infinite scrolling horizontal text | 2,438 Kb |
One page website scrolling effect | 2,764 Kb |
TweenLite staggerTo | 2,495 Kb |
GSAP Parallax | 2,513 Kb |
TweenMax text - changing slogans | 2,333 Kb |
Medium.com style header effect | 2,828 Kb |
Fullscreen image in Canvas | 2,268 Kb |
Simple GSAP Slider | 2,839 Kb |
GIF-like animation with single image | 1,807 Kb |
Smooth scroll | 4,915 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 |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Ghost | Mghayour | 11,738 Kb |
Sass Radar | Jlong | 6,887 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Modular Flip Card | Bbodine1 | 4,009 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 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!