A Pen by Patrick Rodacker on CodePen.
Forked from anonymous/Spinning wheel with svg text.markdown
Created
October 21, 2015 06:07
-
-
Save CodeMyUI/91594532ab5add63f879 to your computer and use it in GitHub Desktop.
Spinning wheel with svg text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="full-screen"> | |
| <div class="wheel-03"> | |
| <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1" | |
| width="800" height="400" | |
| viewBox="0 0 800 400"> | |
| <g transform="translate(0,0)"> | |
| <g transform="translate(0,250)" class="wheel-container"> | |
| <text x="0" y="-225" class="term term00">SMELL</text> | |
| <text x="0" y="-150" class="term term01">HELL</text> | |
| <text x="0" y="-75" class="term term02">SHOCK</text> | |
| <text x="0" y="0" class="term term03">BRAND</text> | |
| <text x="0" y="75" class="term term04">COOL</text> | |
| <text x="0" y="150" class="term term05">NICE</text> | |
| <text x="0" y="225" class="term term06">EYE</text> | |
| <text x="0" y="300" class="term term07">SMELL</text> | |
| <text x="0" y="375" class="term term08">HELL</text> | |
| <text x="0" y="450" class="term term09">SHOCK</text> | |
| <text x="0" y="525" class="term term10">BRAND</text> | |
| <text x="0" y="600" class="term term11">COOL</text> | |
| <text x="0" y="675" class="term term12">NICE</text> | |
| <text x="0" y="750" class="term term13">EYE</text> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(window).load(function () { | |
| var term01 = $('.wheel-03 .term01'); | |
| var term02 = $('.wheel-03 .term02'); | |
| var term03 = $('.wheel-03 .term03'); | |
| var term04 = $('.wheel-03 .term04'); | |
| var term05 = $('.wheel-03 .term05'); | |
| var term06 = $('.wheel-03 .term06'); | |
| var term07 = $('.wheel-03 .term07'); | |
| var term08 = $('.wheel-03 .term08'); | |
| var term09 = $('.wheel-03 .term09'); | |
| var term10 = $('.wheel-03 .term10'); | |
| var term11 = $('.wheel-03 .term11'); | |
| var term12 = $('.wheel-03 .term12'); | |
| var term13 = $('.wheel-03 .term13'); | |
| var stepFrame = 0.5 | |
| // css classes | |
| tl01 = new TimelineLite(); | |
| tl01 | |
| .to(term01, stepFrame, { | |
| css: {className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| tl02 = new TimelineLite(); | |
| tl02 | |
| .to(term02, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term02, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl03 = new TimelineLite(); | |
| tl03 | |
| .to(term03, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term03, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term03, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl04 = new TimelineLite(); | |
| tl04 | |
| .to(term04, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term04, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term04, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term04, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl05 = new TimelineLite(); | |
| tl05 | |
| .to(term05, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term05, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term05, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term05, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term05, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl06 = new TimelineLite(); | |
| tl06 | |
| .to(term06, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term06, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term06, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term06, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term06, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term06, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl07 = new TimelineLite(); | |
| tl07 | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term07, stepFrame, { | |
| css:{className: 'term term00'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }); | |
| tl08 = new TimelineLite(); | |
| tl08 | |
| .to(term08, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term08, stepFrame, { | |
| css: {className: 'term term01'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| ; | |
| tl09 = new TimelineLite(); | |
| tl09 | |
| .to(term09, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term09, stepFrame, { | |
| css: {className: 'term term02'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| ; | |
| tl10 = new TimelineLite(); | |
| tl10 | |
| .to(term10, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term10, stepFrame, { | |
| css: {className: 'term term03'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| ; | |
| tl11 = new TimelineLite(); | |
| tl11 | |
| .to(term11, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term11, stepFrame, { | |
| css: {className: 'term term04'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| ; | |
| tl12 = new TimelineLite(); | |
| tl12 | |
| .to(term12, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| css: {className: 'term term06'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| .to(term12, stepFrame, { | |
| css: {className: 'term term05'}, | |
| attr: {y: '-=75'}, | |
| ease: Linear.easeNone | |
| }) | |
| ; | |
| var wheelTurn = 0.3; | |
| wheel03 = new TimelineMax({repeat: 20, timeScale: 2}); | |
| wheel03.add(tl01, 0); | |
| wheel03.add(tl02, 0); | |
| wheel03.add(tl03, 0); | |
| wheel03.add(tl04, 0); | |
| wheel03.add(tl05, 0); | |
| wheel03.add(tl06, 0); | |
| wheel03.add(tl07, 0); | |
| wheel03.add(tl08, 0); | |
| wheel03.add(tl09, 0); | |
| wheel03.add(tl10, 0); | |
| wheel03.add(tl11, 0); | |
| wheel03.add(tl12, 0); | |
| wheel03.play(); | |
| TweenMax.to(wheel03, 0.1, {timeScale: 8, ease: Circ.easeOut}) | |
| TweenMax.to(wheel03, 4.9, {timeScale: 0, delay: 6, ease: Circ.easeOut}) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| background-color: #000; | |
| color: #ffff00; | |
| } | |
| section { | |
| overflow: hidden; | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .full-screen { | |
| height: 100%; | |
| } | |
| .wheel-svg { | |
| margin-left: 10px; | |
| border: 4px dashed yellow; | |
| perspective: 300px; | |
| } | |
| .wheel-svg .term { | |
| font-family: GothamLight, sans-serif; | |
| font-size: 100px; | |
| letter-spacing: -1px; | |
| fill: #ffffff; | |
| opacity: 0; | |
| } | |
| .wheel-svg .term.term03 { | |
| opacity: 1; | |
| } | |
| .wheel-svg .term.term02, | |
| .wheel-svg .term.term04 { | |
| opacity: 0.5; | |
| } | |
| .wheel-svg .term.term01, | |
| .wheel-svg .term.term05 { | |
| opacity: 0.2; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment