Progressively reveal dots on a Bezier curve
How do I make an progressively reveal dots on a bezier curve?
Answers a question in the GreenSock forums: http://forums.greensock.com/topic/7251-plot-elements-and-or-draw-along-a-bezier-path/#entry27130. What is a progressively reveal dots on a bezier curve? How do you make a progressively reveal dots on a bezier curve? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.
Progressively reveal dots on a Bezier curve - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progressively reveal dots on a Bezier curve</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="intro-video"> <img class="imga" src="http://localhost/epiphany/wp-content/themes/rg/library/images/kentucky-commercial-residential.jpg" alt="" /> <h2 class="h2a">Commercial Residential</h2> <img class="imgb" src="http://localhost/epiphany/wp-content/themes/rg/library/images/improve-indoor-air-barrier-system.jpg" alt="" /> <h2 class="h2b">Improve Indoor Air Quality</h2> <img class="imgc" src="http://localhost/epiphany/wp-content/themes/rg/library/images/environment-friendly-foam-2.jpg" alt="" /> <div class="h2c-c"><h2 class="h2c">Conserve Energy</h2></div> <img class="imgd" src="http://localhost/epiphany/wp-content/themes/rg/library/images/the-right-choice-insulation.jpg" alt="" /> <div class="h2d-c"><h2 class="h2da">The right choice for you</h2><h2 class="h2db">and the environment</h2></div> <div class="logo-c"> <svg class="e-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="122.3" viewBox="-1.5 -1.5 120 122.3" enable-background="new -1.5 -1.5 120 122.3"><path fill="#010101" d="M90.8 99.4c-7.3 3.4-20.1 7.3-37 .8-13.8-5.2-22.3-14.3-29-25.9-4.8-8.3-11.3-26.9.7-47.2 11.2-18.9 36.2-22.6 53.9-11.8 8.6 5.3 15.6 14.2 17.3 24.3 1.6 9.5-.9 21.2-10 26.5-9.8 5.7-21.2 3.7-29-4.4-3.8-4-5.5-8.5-5.4-14 .2-11.2 10.6-19.8 17.9-10.4 1.4 1.7 3.3 5.2 2.3 7.5-1.2 2.6-4.3.5-5.5-.7-2.5-2.4-5-4.8-7.3-7.7-2.6 1.4-6.8 5.7-5.8 14.4.6 5.9 5 10.4 8.6 12.2 15.3 8.1 28.2-2.4 28.7-15.9.5-13-10.3-26-22.6-29.4-10.2-2.7-21.5-1.6-29.7 5.3-18.1 15.2-13 44.2 2.4 59.2 21.8 21.4 62.3 9.4 66.8-21.1 3.2-22.3-8.4-42.2-27.2-53.6-17-10.2-42.6-10.4-58.8 2.1-11.9 9.1-25.6 27.1-21.3 56.6 5.2 34.6 37.9 52.4 61.6 53.1 16.7.5 34.7-6.3 46-23.6 10-15.3 9.8-35.7 8.3-42.7 1.1 13.5-2.9 35.8-25.9 46.4z"/></svg> <svg class="e-logo-text" xmlns="http://www.w3.org/2000/svg" width="117.5" height="47.3" viewBox="0 34.8 117.5 47.3" enable-background="new 0 34.8 117.5 47.3"><path d="M13.5 51h-6.7l-.7 3.6h7.5l-.8 4.1h-12.3l3.6-19.1h12l-.8 4.1h-7.2l-.6 3.2h6.7l-.7 4.1zm.5 13.3l2.7-13.9c.3-1.7.6-4.3.8-5.7h4.3l-.2 1.9h.1c1.1-1.4 2.7-2.1 4.2-2.1 3 0 4.5 2.4 4.5 5.4 0 4.8-3.1 9.2-8 9.2-.9 0-1.9-.3-2.4-.6h-.1l-1.1 5.9-4.8-.1zm6.6-9.5c.4.4.9.6 1.5.6 1.8 0 3.2-2.8 3.2-5.2 0-.9-.4-1.9-1.4-1.9-1.4 0-2.4 1.5-2.8 3.7l-.5 2.8zm10.2 3.9l2.7-13.9h4.8l-2.7 13.9h-4.8zm3.3-17.6c0-1.6 1.3-2.6 2.7-2.6 1.4 0 2.3.9 2.3 2.2 0 1.7-1.3 2.6-2.8 2.6-1.2 0-2.2-.8-2.2-2.2zm3.1 23.2l2.7-13.9c.3-1.7.6-4.3.8-5.7h4.3l-.2 1.9h.1c1.1-1.4 2.7-2.1 4.2-2.1 3 0 4.5 2.4 4.5 5.4 0 4.8-3.1 9.2-8 9.2-.9 0-1.9-.3-2.4-.6h-.2l-1.1 5.9-4.7-.1zm6.7-9.5c.4.4.9.6 1.5.6 1.8 0 3.2-2.8 3.2-5.2 0-.9-.4-1.9-1.4-1.9-1.4 0-2.4 1.5-2.8 3.7l-.5 2.8zm10.3 3.9l3.8-20.1h4.8l-1.4 7.7h.1c1.1-1.1 2.4-1.9 4.2-1.9 2.4 0 3.5 1.6 3.5 3.8 0 .6-.1 1.7-.3 2.6l-1.5 7.9h-4.8l1.4-7.5c.1-.5.1-1.1.1-1.7 0-.8-.3-1.3-1.1-1.3-1.2 0-2.4 1.6-2.9 4.2l-1.1 6.2-4.8.1zm24.8 0l.1-2.4h-.1c-1.2 2.1-2.9 2.7-4.4 2.7-2.5 0-4.3-1.9-4.3-5 0-4.7 2.9-9.6 10.1-9.6 1.8 0 3.7.4 5 .8l-1.5 7.3c-.3 1.5-.6 4.4-.5 6.2h-4.4zm1-10.6c-.3-.1-.6-.1-.9-.1-2.2 0-3.7 3-3.7 5.1 0 1.3.6 2 1.4 2 .9 0 2-.9 2.7-4.2l.5-2.8zm5.7 10.6l1.7-9.2c.4-1.9.6-3.4.8-4.7h4.2l-.2 2.2h.1c1.4-1.7 3-2.4 4.7-2.4 2.5 0 3.6 1.6 3.6 3.8 0 .6-.1 1.7-.2 2.4l-1.6 8h-4.8l1.4-7.5c.1-.4.1-1 .1-1.4 0-.8-.3-1.4-1.1-1.4-1.2 0-2.4 1.5-2.9 4.5l-1.1 6-4.7-.3zm21.4-13.9l.6 5.5c.1 1.4.3 2.4.4 3.2h.1c.3-.8.5-1.7 1.1-3.2l2.1-5.5h5.1l-4.8 9.8c-2 4-3.7 6.5-5.6 8.2-1.7 1.5-3.7 2.2-4.7 2.4l-1.1-4.2c.6-.1 1.5-.5 2.3-1 .9-.6 1.7-1.3 2.1-2.1.1-.2.1-.4.1-.6l-2.7-12.5h5zm-36.2 18.6l-1.8 6.2c1.2 0 2-.1 2.4-.1.6-.1 1.1-.4 1.7-.8.5-.4.9-.9 1.2-1.7h.5l-1.9 6.5h-.5c.1-.4.1-.8.1-1 0-.5-.1-.9-.3-1.2-.2-.3-.5-.5-.8-.6-.4-.1-1.2-.2-2.7-.2l-1.4 5.2-.3 1c-.1.2-.1.4-.1.6 0 .3.1.5.1.6.1.1.3.3.5.4.2.1.6.1 1.3.1l-.1.4h-8.1l.1-.4c.8 0 1.4-.1 1.7-.4.4-.3.7-.9 1-1.9l2.9-10c.3-1.1.5-1.7.5-2 0-.3-.1-.5-.4-.7-.3-.2-.8-.3-1.7-.4l.1-.4h13.6l-1.1 4.4h-.4c-.1-.9-.2-1.6-.4-2-.2-.4-.6-.8-1.1-1-.6-.2-1.4-.4-2.6-.4l-2-.2zm12.1 4.3c.6 0 1.2.1 1.8.4.6.3 1 .7 1.3 1.2.3.5.4 1.1.4 1.7 0 1.3-.4 2.7-1.1 3.9s-1.7 2.4-2.9 3.1c-1.2.8-2.4 1.1-3.6 1.1-1.1 0-1.9-.4-2.6-1-.6-.6-.9-1.4-.9-2.4 0-1.1.2-2.2.6-3.2.4-1 1-1.9 1.7-2.6.7-.7 1.5-1.3 2.4-1.8 1-.2 2-.4 2.9-.4zm-.5.6c-.4 0-.8.1-1.1.4-.6.5-1.2 1.7-1.9 3.6-.7 1.9-1.1 3.6-1.1 5.1 0 .4.1.6.4.9.2.3.5.4.8.4.3 0 .6-.1.9-.3.4-.3.8-.9 1.3-1.9.5-1 .9-2.2 1.3-3.4s.5-2.4.5-3.4c0-.4-.1-.7-.3-1-.3-.2-.5-.4-.8-.4zm15.5-.5l-2.4 8.1-.2 1-.1.3c0 .1 0 .2.1.3.1.1.1.1.2.1s.4-.1.7-.4l.9-1.1.4.2c-.6 1.1-1.2 1.8-1.9 2.3-.6.5-1.4.7-2.1.7-.4 0-.8-.1-1.1-.4-.2-.2-.4-.6-.4-.9 0-.3.1-.9.4-1.8l.3-1c-.9 1.6-1.9 2.7-2.7 3.4-.5.4-1 .6-1.6.6-.7 0-1.3-.3-1.7-.9s-.5-1.3-.5-2.1c0-1.1.4-2.4 1.1-3.9.7-1.5 1.7-2.7 2.7-3.6.9-.7 1.8-1.1 2.7-1.1.4 0 .8.1 1.1.4.3.3.5.7.6 1.4l.4-1.5 3.1-.1zm-3.9 2.4c0-.6-.1-1.1-.3-1.4-.1-.2-.4-.3-.6-.3-.2 0-.5.1-.8.4-.6.5-1.1 1.5-1.8 3-.6 1.5-.9 2.9-.9 3.9 0 .4.1.7.2.9.1.2.3.3.5.3.4 0 .7-.2 1.1-.6.5-.6 1-1.4 1.4-2.2.8-1.5 1.2-2.9 1.2-4zm9.7-2.5l-1.6 5.2c1.1-1.6 1.8-2.7 2.3-3.2.7-.8 1.3-1.4 1.7-1.6.4-.2.9-.4 1.4-.4.5 0 .9.1 1.1.5.2.3.4.6.4 1.1 0 .4-.1 1-.4 1.7l-.6 1.9c1.1-1.7 1.9-2.7 2.4-3.2.8-.8 1.4-1.4 2-1.7.4-.2.8-.3 1.2-.3.4 0 .9.1 1.1.5.3.3.4.7.4 1.2s-.1 1.1-.4 2l-1.5 4.5c-.2.6-.4 1.1-.4 1.3 0 .1 0 .1.1.1l.1.1c.1 0 .1 0 .2-.1.3-.2.6-.6.9-1l.4-.4.4.3c-.6 1-1.1 1.8-1.9 2.2-.6.5-1.3.7-1.9.7-.5 0-.9-.1-1.2-.4-.3-.3-.4-.6-.4-.9s.1-.9.4-1.6l1.5-4.7c.2-.6.3-1.1.3-1.2 0-.1 0-.1-.1-.1-.1-.1-.1-.1-.2-.1s-.2 0-.4.1c-.1.1-.4.3-.8.6-.4.4-.9.9-1.6 1.8-.6.9-1.1 1.6-1.4 2.1-.2.5-.5 1.1-.7 1.9l-.8 2.5h-3.1l2.4-7.9c.1-.4.2-.7.2-.9 0-.1 0-.1-.1-.1l-.1-.1c-.3 0-.8.4-1.4 1.1-1 1.2-1.9 2.7-2.7 4.4l-1 3.4h-2.9l2.4-7.8c.2-.8.4-1.3.4-1.7 0-.1 0-.2-.1-.4-.1-.1-.2-.1-.4-.2.1.1-.2.1-.6.1l.1-.4 4.2-.7h.6l.1-.2z"/></svg> </div> <svg class="replay" xmlns="http://www.w3.org/2000/svg" width="67.5" height="67.5" viewBox="0 0 67.5 67.5"><path d="M60.9 33.8c0-15-12.2-27.2-27.2-27.2-6.9 0-13.3 2.6-18.1 6.9l7.2 8.3c2.9-2.6 6.7-4.3 10.9-4.3 8.9 0 16.2 7.3 16.2 16.2h-6.3l11.8 15.8 11.8-15.8h-6.3zM33.8 49.9c-8.9 0-16.2-7.3-16.2-16.2v-.3h6.3l-11.8-15.7-11.8 15.8h6.3v.3c0 15 12.2 27.2 27.2 27.2 7 0 13.4-2.7 18.2-7l-7.2-8.3c-2.9 2.5-6.8 4.2-11 4.2z"/></svg>
</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.14.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Progressively reveal dots on a Bezier curve - Script Codes CSS Codes
body { background-color: black;
}
* { box-sizing: border-box;
}
.intro-video { margin: auto; width: 350px; height: 262px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;
}
.intro-video img { position: absolute; width: 100%; max-width: 100%; height: auto; vertical-align: bottom;
}
.intro-video h2 { font-size: 1.5rem; line-height: 2rem; background: rgba(255, 255, 255, 0.7); position: absolute; text-align: center; margin: auto; width: 90%; left: 0; right: 0; margin-top: 5%; color: #004974; padding: 0 8px;
}
.intro-video .h2c, .intro-video .h2da, .intro-video .h2db { position: absolute; margin-top: auto; margin-bottom: 5%; bottom: 0;
}
.intro-video .h2c-c, .intro-video .h2d-c { position: absolute; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.intro-video .h2da { width: auto; margin-top: 5%; margin-left: 5%; bottom: auto; right: auto;
}
.intro-video .h2db { margin-right: 5%; width: auto; left: auto;
}
.dot { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; visibility: hidden; z-index: 1;
}
.logo-c { width: 117px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 166px; z-index: 2;
}
.replay { position: absolute; width: 30px; height: 30px; right: 2px; bottom: 2px; cursor: pointer; fill: #004974; z-index: 2;
}
Progressively reveal dots on a Bezier curve - Script Codes JS Codes
function initCSS() { TweenLite.set('.replay', {autoAlpha:0, transformOrigin: "50% 50%"}); TweenLite.set('.intro-video h2', {transformPerspective: 600,transformOrigin: "50% 0%" }); TweenLite.set('h2.h2a', {rotationX: -90}); TweenLite.set('h2.h2b', {transformPerspective: 200, transformOrigin: "50% 50% -300px", rotationX: 0, rotationY: -90, display: 'none'}); TweenLite.set('img.imgc', {transformPerspective: 600, rotationY: 180, display: 'none'}); TweenLite.set(["img.imgb",'img.imgc'], {backfaceVisibility:"hidden", transformPerspective: 600}); TweenLite.set('.h2c-c', {transformPerspective: 600, transformOrigin: "50% 50% -100px", rotationX: 0, rotationY: 180, backfaceVisibility:"hidden"}) TweenLite.set('.h2c-c h2.h2c', {transformPerspective: 0}); TweenLite.set(["img.imgd",".h2d-c"], {yPercent:100, display: 'none'}); TweenLite.set(".logo-c", {perspective:600});
TweenLite.set([".e-logo",".e-logo-text"], {transformOrigin: "50% 50% 0", autoAlpha:0});
} var grow1 = 0; Points = 0; path = 0; if (matchMedia) { var mq = window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)"); mq.addListener(WidthChange); WidthChange(mq);
}
// media query change
function WidthChange(mq) { if (mq.matches) { // window width is at least 500px grow1 = 13; $(".intro-video").css({'width':'700px' , "height" : '502px'}); ////////////////////////////////////////////////////////////////////// Points=[{x:0.4, y:55.8}, {x:0.4, y:55.8}, {x:615.6999999999999, y:56.599999999999994}, {x:640.4, y:56.4}, {x:693, y:55.8}, {x:685.3, y:77.9}, {x:685.3, y:104.3}, {x:685.3, y:130.7}, {x:665.8, y:152.2}, {x:640.4, y:152.2}, {x:615, y:152.2}, {x:40.10000000000002, y:152.2}, {x:40.10000000000002, y:152.2}, {x:15.2, y:152.2}, {x:-5, y:173.7}, {x:-5, y:200.1}, {x:-5, y:226.5}, {x:15.2, y:248.2}, {x:39.9, y:248.2}, {x:39.9, y:248.2}, {x:640.6, y:247.39999999999998}, {x:640.6, y:247.39999999999998}, {x:665.3000000000001, y:247.39999999999998}, {x:685.5, y:268.9}, {x:685.5, y:295.29999999999995}, {x:685.5, y:321.69999999999993}, {x:665.3, y:343.19999999999993}, {x:640.6, y:343.19999999999993}, {x:640.6, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:641.2, y:343.19999999999993}, {x:65, y:343.19999999999993}, {x:40.30000000000007, y:343.19999999999993}, {x:15.600000000000136, y:343.19999999999993}, {x:-4.59999999999993, y:364.69999999999993}, {x:-4.59999999999993, y:391.0999999999999}, {x:-4.59999999999993, y:417.4999999999999}, {x:16.10000000000007, y:439.3999999999999}, {x:40.30000000000007, y:439.3999999999999}, {x:64.50000000000007, y:439.3999999999999}, {x:706.5000000000001, y:439.3999999999999}, {x:706.5000000000001, y:439.3999999999999}], path = [{x:0.4, y:55.8}];
////////////////////////////////////////////////////////////////////// } else { // window width is less than 500px grow1 = 8; ////////////////////////////////////////////////////////////////////// Points=[{x:17.6, y:19.8}, {x:17.6, y:19.8}, {x:319, y:20.1}, {x:319, y:20.1}, {x:332.1, y:20.1}, {x:342.8, y:31.5}, {x:342.8, y:45.5}, {x:342.8, y:59.5}, {x:332.1, y:70.9}, {x:319, y:70.9}, {x:319, y:70.9}, {x:25.9, y:70.9}, {x:25.9, y:70.9}, {x:12.7, y:70.9}, {x:2, y:82.3}, {x:2, y:96.3}, {x:2, y:110.3}, {x:12.7, y:121.8}, {x:25.8, y:121.8}, {x:25.8, y:121.8}, {x:319.1, y:121.4}, {x:319.1, y:121.4}, {x:332.2, y:121.4}, {x:342.9, y:132.8}, {x:342.9, y:146.8}, {x:342.9, y:160.8}, {x:332.2, y:172.2}, {x:319.1, y:172.2}, {x:319.1, y:172.2}, {x:319.4, y:172.2}, {x:319.4, y:172.2}, {x:319.4, y:172.2}, {x:26, y:172.2}, {x:26, y:172.2}, {x:12.9, y:172.2}, {x:2.2, y:183.6}, {x:2.2, y:197.6}, {x:2.2, y:211.6}, {x:12.9, y:223.2}, {x:26, y:223.2}, {x:26, y:223.2}, {x:341.7, y:222.76}, {x:341.7, y:222.76}]; path = [{x:17, y:19.8}];
////////////////////////////////////////////////////////////////////// }
}
//////////////////////////////////////////////////////////////////////
function box1() { var tl = new TimelineMax(); tl.from("img.imga", 2, {autoAlpha:0}) .to('h2.h2a', 2, { rotationX: 0, force3D:true, ease:Elastic.easeOut},"-=.8") .from("img.imgb", 2, {xPercent:100, force3D:true, ease:Elastic.easeOut}) .to('h2.h2b', 3, {display: 'inline', rotationY: 0, force3D:true, ease:Elastic.easeOut}, "-=1.2") .to("img.imgb", 3, {rotationY:-180, force3D:true, ease:Elastic.easeInOut}) .to('h2.h2b', 3, {backfaceVisibility:"hidden",transformPerspective: 600, display: 'none', rotationY: -180, force3D:true, ease:Elastic.easeInOut}, "-=3") .to("img.imgc", 3, {display: 'inline',rotationY:0, force3D:true, ease:Elastic.easeInOut}, "-=3") .to(".h2c-c", 3, {rotationY:0, force3D:true, ease:Elastic.easeInOut}, "-=2.9") .to(".h2c-c", 1, { yPercent:-100,force3D:true, ease:Back.easeIn}) .to(".imgc", 1.1, { yPercent:-100,force3D:true, ease:Back.easeOut}, "-=0.35" ) .to(".imgd", 1, { display: 'inline',yPercent:0,force3D:true, ease:Back.easeOut},"-=1") .to(".h2d-c", 1, { display: 'inline',yPercent:0,force3D:true, ease:Back.easeOut}, "-=0.9" ) return tl;
}
//////////////////////////////////////////////////////////////////////
function box2() { var quantity = 99, position = {x:path[0].x, y:[path[0].y]}, tween = TweenMax.to(position, quantity, {bezier:{type:"soft", values:Points}, ease:Linear.easeNone}), tlb = new TimelineMax(), i, dot; tlb.timeScale(3) path.shift(); for (i = 0; i < quantity; i++) { tween.time(i); dot = $("<div />", {id:"dot"+i}).addClass("dot").css({left:position.x+"px", top:position.y+"px"}).appendTo(".intro-video"); tlb.set(dot, {visibility:"visible",transformOrigin: "5px 5px", scale: 0},0.1)
////////////////////////////////////////////////////////////////////// if (i == 0){ tlb.to(dot, 4, {scale: grow1} ); }else{ tlb.to(dot, 4, {scale: grow1, ease:Power1.easeOut }, "-=3.9" ); }
////////////////////////////////////////////////////////////////////// } return tlb;
}
/////////////////////////////////////////////////////////////////////
function box3() { var tl = new TimelineMax();
tl.to(".e-logo", 1, {autoAlpha:1,rotationY:"360_cw", ease:Linear.easeNone}) .to(".e-logo", 0.3, {rotationY:"+=50_cw"}) .to(".e-logo", 1.5, {rotationY:"-=290_ccw"}) .to(".e-logo", 1.5, {rotationY:"+=20_cw"}) .to(".e-logo-text", 2,{autoAlpha:1}, "-=1.5"); return tl;
}
////////////////////////////////////////////////////
var $replay = $(".replay");
var repeatc = 1;
function showReplay(){
if (repeatc > 1){ TweenLite.to($replay, 0.5, {autoAlpha:1, rotation:"+=360_cw"}); }else{ repeatc++; timeline.restart(); }
}
///////////////////////////////////////////////////
$replay.mouseenter(function(e){ TweenLite.to($replay, 0.5, {rotation:"+=360_cw"});
})
$replay.mouseleave(function(e){ TweenLite.to($replay, 0.5, {rotation:"-=360_cw"});
})
$replay.click(function(){ timeline.restart(); initCSS();
});
///////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
function MasterTimeline() { timeline = new TimelineMax({onComplete:showReplay});
// timeline.add(box1()) timeline.add(box2()) timeline.add(box3())
}
initCSS();
MasterTimeline();
/////////////////////////////////////////////////////////////////
$(window).resize(Resize); function Resize() { var $window = $(window) , maxWidth = $('.intro-video').width() , width = $window.width(), scale; if( width >= maxWidth ) { return } TweenMax.set('.intro-video',{scale: Math.min(width/maxWidth),transformOrigin:"0% 0%"});
};
Resize();
Developer | Revolution Graphics |
Username | rgfx |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 7,323 Kb |
Views | 18,216 |
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 |
Cross browser radio buttons | 2,474 Kb |
Custom Select Box 2 | 5,033 Kb |
CSS Background | 2,293 Kb |
Icon-font animation troggle | 2,108 Kb |
Canvas Noise generator | 2,904 Kb |
Call to action button | 3,077 Kb |
Scroll animate | 2,428 Kb |
Animating TImescale Gsap tweenmax | 2,149 Kb |
Video-js scss | 13,211 Kb |
Simple Horizontal Stacked Bar | 2,000 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 |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Adding Items | Valhead | 4,008 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Konami Code Easter Egg | Teolitto | 3,051 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!