"bubble car"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <svg class="mainSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -1.9" result="cm" /> </filter> <g id="bubble" stroke="#F3F1E2"> <ellipse fill="none" stroke-width="1" stroke-miterlimit="10" cx="8" cy="8" rx="7" ry="7"/> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M3.39,8 c0.07-0.84,0.35-1.68,0.87-2.42c0.5-0.71,1.15-1.25,1.89-1.61"/> </g> <path id="heart" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M11.58,3.55c0,4.16-4.32,8.04-5.54,8.04S0.5,7.7,0.5,3.55c0-1.68,1.36-3.05,3.05-3.05c1.03,0,1.94,0.51,2.49,1.3 c0.55-0.78,1.46-1.3,2.49-1.3C10.22,0.5,11.58,1.86,11.58,3.55z M3.99,2.25c-0.86,0-1.72,0.78-1.78,1.86"/> <g id="pop" class="pop" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" opacity="0"> <circle cx="18.22" cy="17.89" r="0" stroke="#F3F1E2" fill="none"/> <line x1="18" y1="10.5" x2="18" y2="0.5"/> <line x1="18" y1="25.5" x2="18" y2="35.5"/> <line x1="25.5" y1="18" x2="35.5" y2="18"/> <line x1="10.5" y1="18" x2="0.5" y2="18"/> </g> </defs> <g id="follower" ></g> <path id="waveyPath" fill="none" stroke="none" stroke-width="3.5" stroke-linecap="round" stroke-miterlimit="10" d="M300,338 c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36" /> <g id="movingPath"> <path id="filledMovingPath" fill="#69B565" d="M2300.5,338c-100,0-100,36-200.01,36 c-100,0-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36c-100,0-100-36-199.99-36 c-100,0-100,36-200.01,36s-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36 c-100,0-100-36-199.99-36v423h2400V338z"/> <path class="movingPath" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M-100,338 c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36 c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36 c100,0,100-36,200.01-36" /> </g> <g id="jumpingLorry"> <g id="movingLorry"> <g id="lorryGroup" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"> <path d="M53.58,34.5 H48v-24h12.24c2.2,0,4.34,1.76,4.76,3.92l1.56,7.9l1.96,0.78c1.93,0.77,3.49,3.07,3.49,5.15v4.25c0,1.1-0.89,2-2.01,2h-3.26h-0.3 C65.94,31.38,63.25,29,60,29S54.06,31.38,53.58,34.5z" /> <line x1="1.5" y1="34.5" x2="10.5" y2="34.5" /> <path fill="#3D933A" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M34.41,34.5 H48v-29c0-2.2-1.79-4-4.01-4H9.01C6.79,1.5,5,3.29,5,5.5v29h6.65c0.81-5.81,5.59-10.28,11.38-10.28S33.6,28.69,34.41,34.5z" /> <path d="M53.25,15.53h3.66 c1.58,0,3.02,1.19,3.22,2.65l0.1,0.7c0.2,1.46-0.92,2.65-2.5,2.65h-4.48V15.53z" /> <path d="M34.53,36.24 c0-6.64-5.15-12.02-11.5-12.02c-6.35,0-11.5,5.38-11.5,12.02" /> <g id="wheelL"> <circle cx="23.03" cy="35.72" r="6.5" /> <circle fill="#F3F1E2" stroke="none" cx="23" cy="35.5" r="1" /> </g> <g id="wheelR"> <circle cx="60" cy="35.5" r="6.5" /> <circle fill="#F3F1E2" stroke="none" cx="60" cy="35.5" r="1" /> </g> </g> </g> </g> </svg> </div> <script> var xmlns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink" select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, container = select('.container'), mainSVG = select('.mainSVG'), waveyPath = select('#waveyPath'), pop = select('#pop'), follower = select('#follower'), movingPath = select('#movingPath'), jumpingLorry = select('#jumpingLorry'), movingLorry = select('#movingLorry'), lorryGroup = select('#lorryGroup'), particleContainer = select('#particleContainer'), //particleTypeArray = ['#flake1', '#flake2', '#flake3', '#star','#heart'], particleTypeArray = ['#bubble', '#heart'], particleColorArray = ['#F3F1E2', '#B51541'], particlePool = [], popPool = [], numParticles = 270, particleCount = 0 //center the container cos it's pretty an' that TweenMax.set(container, { position: 'absolute', top: '50%', left: '50%', xPercent: -50, yPercent: -50 }) TweenMax.set('svg', { visibility: 'visible' }) TweenMax.set(lorryGroup, { transformOrigin: '50% 100%' }) TweenMax.set(jumpingLorry, { transformOrigin: '50% 50%', rotation: 0 }) TweenMax.set(follower, { x: 0, y: 0 }) TweenMax.set(pop, { alpha:0 }) var waveyPathBezier = MorphSVGPlugin.pathDataToBezier(waveyPath.getAttribute('d'), { offsetX: -(lorryGroup.getBBox().width / 2), offsetY: -(lorryGroup.getBBox().height) - waveyPath.getAttribute('stroke-width') }) var tl = new TimelineMax({ repeat: -1, onUpdate: playParticle }); tl.to(lorryGroup, 6, { bezier: { type: "cubic", values: waveyPathBezier, autoRotate: true }, ease: Linear.easeNone }) .to([movingPath, movingLorry], 6, { x: -1200, ease: Linear.easeNone }, '-=6') var jumpTl = new TimelineMax(); jumpTl.to(lorryGroup, 0.16, { //y:-6, scaleY: 0.97, scaleX: 1.03, repeat: -1, ease: Linear.easeNone, yoyo: true }) function createParticlePool() { var i = numParticles, p, popClone; while (--i > -1) { p = document.createElementNS(xmlns, 'use'); popClone = pop.cloneNode(true); //pop.setAttributeNS(xlinkns, "xlink:href", '#pop'); p.setAttributeNS(xlinkns, "xlink:href", particleTypeArray[i % particleTypeArray.length]); follower.appendChild(p); follower.appendChild(popClone); p.setAttributeNS(null, 'stroke', particleColorArray[i % particleColorArray.length]); //popClone.setAttributeNS(null, 'opacity', 1); //p.setAttribute('class', "particle"); particlePool.push(p); popPool.push(popClone); TweenMax.set([p, popClone], { transformOrigin: '50% 50%', alpha:1, x:-100, y:-100 //x:300, //y:follower._gsTransform.y }) TweenMax.set([p], { scale: 0 }) } } //ScrubGSAPTimeline(tl); function playParticle() { //console.log(particleCount%250 == 1) if (particleCount % 13) { particleCount++; checkParticleCount(); return; } var p = particlePool[particleCount]; TweenMax.set(p, { x: 260, y: lorryGroup._gsTransform.y + 12, //scale:0, alpha: 1 }) var s = randomBetween(5, 10) / 10; TweenMax.to(p, 0.46, { scaleX: s, ease: Elastic.easeOut.config(1, 0.83) }) TweenMax.to(p, 0.6, { scaleY: s, ease: Elastic.easeOut.config(1, 0.4) }) TweenMax.to(p, randomBetween(1, 2), { //paused:true, physics2D: { velocity: randomBetween(30, 165), angle: randomBetween(-180, -160), gravity: randomBetween(-130, -17) }, onComplete: function(p) { TweenMax.set(p, { scale: 0 }) createPop(p); }, onCompleteParams: [p] }); particleCount++; checkParticleCount(); } function createPop(p) { var popTl = new TimelineMax(), popClone = popPool[particleCount], popLines = popClone.getElementsByTagName('line'), popCircle = popClone.getElementsByTagName('circle'); TweenMax.set(popClone, { x: p._gsTransform.x - 10, y: p._gsTransform.y - 10, rotation: 45 }) TweenMax.set(popCircle, { alpha: 1, attr: { r: 0 } }) popTl.set(popLines, { drawSVG: '0% 0%' }) .to(popLines, 0.3, { drawSVG: '0% 20%', ease: Linear.easeNone }) .to(popLines, 0.6, { drawSVG: '80% 100%', ease: Linear.easeNone }) .to(popLines, 0.2, { drawSVG: '105% 105%', ease: Linear.easeNone }) .to(popClone, 1, { x: '-=20', y: '-=20', scale: 0.5, ease: Linear.easeNone }, '-=' + popTl.duration()) .to(popCircle, 1, { attr: { r: 6 }, alpha: 0, ease: Expo.easeOut }, '-=' + popTl.duration()); popTl.timeScale(1.6) } function checkParticleCount() { particleCount = (particleCount >= numParticles) ? 0 : particleCount; } tl.timeScale(1); createParticlePool(); //ScrubGSAPTimeline(tl); function randomBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } </script>
body { background-color:#3D933A; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container{ position:absolute; width:100%; } svg{ width:100%; height:100%; visibility:hidden; overflow:hidden; }

Related: See More


Questions / Comments: