Smiley Tick

Smiley

Birçok sitede üye olurken karşılaştığınız  bir örnektir evet-hayır yada kabul ediyorum-etmiyorum gibi seçenekleri tik atarak kabul edip etmediğinizi belirttiğiniz araçlardır.

Bu tür  durumlar için kullanılan bir çok tasarım örneği mevcut, bu da smiley (gülücük) ile  hazırlanmış bir örnek. Evet seçerseniz mutlu, hayır seçerseniz üzgün smiley çıkıyor.

Stil

<style>
body {
  background-color:#FFF;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
 position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  transform:translate(-50%, 0%);
}

.faceGroup{
 cursor:pointer;
}
.faceGroup, .panel{
 
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
</style>

Js:

<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);
  },
    faceGroup = select('.faceGroup'),
    shadow = select('.shadow'),
    panel = select('.panel'),
    faceBg = select('.faceBg'),
    happyMouth = select('.happyMouth'),
    happyEyeGroup = select('.happyEyeGroup'),
    sadMouth = select('.sadMouth'),
    happyEyeR = select('.happyEyeR'),
    happyEyeL = select('.happyEyeL')
  

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set([happyEyeL, happyEyeR], {
 transformOrigin:'50% 50%'
})
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 60%'
})
TweenLite.defaultEase = Expo.easeIn;

var toggleTl = new TimelineMax({paused:true}).timeScale(4);
toggleTl.to(happyMouth, 2, {
 scaleX:0,
 scaleY:1.23,
 x:-56,
 fill:'#E6E6E6'
},'+=0')
.to(happyEyeL, 2, {
 scaleX:0,
 scaleY:1.2,
 x:-50,
 y:2,
 fill:'#E6E6E6'
},'-=2')
.to(happyEyeR, 2, {
 scaleX:0,
 scaleY:1.23,
 x:-85,
 fill:'#E6E6E6'
},'-=2')

.set(happyEyeR, {
 scaleX:0,
 scaleY:1.23,
 x:60,
 y:9,
 fill:'#E6E6E6' 
})

.fromTo(sadMouth, 2, {
 scaleX:0,
 scaleY:0.8,
 x:96,
 y:6,
 fill:'#E6E6E6'
},{
 x:0,
 scaleX:1,
 scaleY:0.8,
 fill:'#FDFDFD',
 y:6,
 ease:Expo.easeOut
})
.fromTo(happyEyeL, 2, {
 scaleX:0,
 scaleY:1.2,
 x:95,
 y:4,
 fill:'#E6E6E6'
},{ 
 scale:1,
 x:0,
 y:6,
 fill:'#FDFDFD',
 immediateRender:false,
 ease:Expo.easeOut
},'-=2')

.to(happyEyeR, 2, {
 scale:1,
 x:0,
 y:6,
 fill:'#FDFDFD',
 immediateRender:false,
 ease:Expo.easeOut
},'-=2')

.to(faceGroup, 4, {
 x:-132,
 ease:Expo.easeInOut
},'-=4')
.to(faceBg, 4, {
 fill:'#D80032',
 ease:Expo.easeInOut
},'-=4')
.to(shadow, 4, {
 fill:'#B51136',
 ease:Expo.easeInOut
},'-=4')


faceGroup.onclick = function(){
 if(toggleTl.isActive()){return};
 if(toggleTl.time() > 0){
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 50%'
})  
  toggleTl.reverse();
  blink(0.152, 0);
 } else{
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 50%'
})  
  toggleTl.play()
  blink(0.12, 0.12);
 }
}

function blink(dur, rep){
 TweenMax.to(happyEyeGroup, dur, {
  scaleY:0.03,
  repeat:1,
  yoyo:true,
  repeatDelay:rep
 })
}
panel.onclick = faceGroup.onclick;
</script>

Html:

<svg class="faceSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <clipPath id="happyMask">
   <circle class="happyMask" cx="467.68" cy="299.68" r="60" fill="#31b65a"/>
   </clipPath>
  </defs> 
<rect class="panel" x="292" y="254" width="216" height="92" rx="46" ry="46" fill="#f6f6f6" stroke="#E6E6E6" stroke-miterlimit="10" stroke-width="4"/> 
      <g class="faceGroup" clip-path="url(#happyMask)">
        <circle class="faceBg" cx="467.68" cy="299.68" r="60" fill="#0CCE6B"/>
       <path class="shadow" d="M468.42,360.58a60,60,0,0,1-54-33.83,60,60,0,0,0,104-59.34,60,60,0,0,1-50,93.17Z" fill="#31b65a"/>
        <g class="faceGroup">
          <g class="happyEyeGroup">
            <circle class="happyEyeL" cx="449.58" cy="290.24" r="7" fill="#FDFDFD"/>
            <circle class="happyEyeR" cx="486.42" cy="290.24" r="7" fill="#FDFDFD"/>
          </g>
          <path class="happyMouth" d="M486.5,305.24a18.5,18.5,0,0,1-37,0Z" fill="#FDFDFD"/>
         <path class="sadMouth" d="M485.5,324a18.51,18.51,0,1,0-37,0Z" fill="#FDFDFD"/>
        </g>
      </g>
</svg>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-11-05 tarihinde yayınlandı,Toplam 3470 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...