تنفيذ تأثير حركي عند الضغط على زر

Yasmeen Hassan · 10 أبريل 2022

اريد ان يكون بعد الضغط على الزر تبدأ الحركة التالية ؟

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <body>
    <input type="checkbox" id="c">
    <label for="c" id="upload_app">
      
      <div id="app">
        <div id="arrow"></div>
        <div id="success">
          <i class="fas fa-check-circle"></i>
        </div>
      </div>



      <div class="circle">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>


    </label>

  </body>

</body>

</html>

html,
body {
  height: 100%;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  background-color: #f1f2f3;
}

#c {
  display: none;
}

#upload_app {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 120px;
  height: 42px;
  transform: translateY(-50%);
  transition: 0.3s ease width;
  cursor: pointer;
}

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border: 2px solid #143240;
  overflow: hidden;
  z-index: 2;
}

#app:before {
  content: "Upload";
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
  left: 0;
  color: #143240;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  z-index: 1;
}

arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background-color: #fff;
  z-index: 2;
}

#arrow:before,
#arrow:after {
  content: "";
  position: absolute;
  top: 18px;
  width: 10px;
  height: 2px;
  background-color: #143240;
}

#arrow:before {
  right: 17px;
  transform: rotateZ(-45deg);
}

#arrow:after {
  right: 11px;
  transform: rotateZ(45deg);
}

#success {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  margin: -8px;
  background-color: #143240;
  transform: scale(0);
  border-radius: 50%;
  z-index: 3;
}

#success i {
  font-size: 20px;
  color: #fff;
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px auto;
  transform: scale(0);
}

#c:checked + #upload_app {
  width: 42px;
}

#c:checked + #upload_app #arrow:before {
  animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #arrow:after {
  animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #success {
  animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;
}

#c:checked + #upload_app #success i {
  animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;
}

@keyframes _a {
  0% {
    top: 18px;
    right: 17px;
    width: 10px;
    transform: rotateZ(-45deg);
    background-color: #143240;
  }
  100% {
    top: 36px;
    right: 19px;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _b {
  0% {
    top: 18px;
    right: 11px;
    width: 10px;
    transform: rotateZ(45deg);
    background-color: #143240;
  }
  100% {
    top: 36px;
    right: 0;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _incHeight {
  0% {
    top: 36px;
    height: 2px;
  }
  25% {
    top: 31px;
    height: 8px;
  }
  50% {
    top: 21px;
    height: 18px;
  }
  80% {
    top: 11px;
    height: 28px;
  }
  100% {
    top: 0;
    height: 39px;
  }
}

@keyframes _success {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/*-------------------------------*/
.circle {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #3a6e9a;
    background-size:contain ;
  }
  
  .circle div {
    position: absolute;
    top: calc((50% - 10px)); /* تبع موقع الدايرة من الصفحة كاملة الي بالبكسل غير مهمة*/
    left: calc((50% - 10px));
    width: 20px;
    height:20px;
    border-radius: 50%;/*هذا والاثنين الي فوقة مقاييس تبع الدايرة*/
    background: #fff;
   
  }
  /*السرعات لي الدوائر*/
  .circle-anim div:nth-child(1) { animation: anim_01 5s forwards;}
  .circle-anim div:nth-child(2) { animation: move_01 5s 2s; }
  .circle-anim div:nth-child(4) { animation: move_03 5s 2s; }
  .circle-anim div:nth-child(3) { animation: move_02 5s 2s; }
  .circle-anim div:nth-child(5) { animation: move_04 5s 2s; }
  
  @keyframes anim_01 {
    0% {   transform: scale(0);}/*الدائرة لمن تصغر*/
    20% {  transform: scale(5);} /*الدائرة لمن تكبر*/
    50% {  transform: scale(3);}/*الدائرة لمن تصغر*/
    90% {  transform: scale(5);}/*الدائرة لمن تكبر*/
    100% { transform: scale(0);}/*الدائرة لمن تصغر*/
  }
  
  @keyframes move_01 {
    0% {   transform: translate(0) scale(0);} /* غير متاكدة حجم الدائرة لمن تخرج من الوسط*/
    /* انتقال الدوائر الصغير ف الارباع المختلفة*/
    20% {  transform: translate(-100px, -100px) scale(1);}
    40% {  transform: translate(-100px, 100px) scale(1);}
    60% {  transform: translate(100px, 100px) scale(1);}
    80% {  transform: translate(100px, -100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_02 {
    0% {   transform: translate(0) scale(0);}
    20% {  transform: translate(-100px, 100px) scale(1);}
    40% {  transform: translate(100px, 100px) scale(1);}
    60% {  transform: translate(100px, -100px) scale(1);}
    80% {  transform: translate(-100px, -100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_03 {
    0% {   transform: translate(0px) scale(0);}
    20% {  transform: translate(100px, 100px) scale(1);}
    40% {  transform: translate(100px, -100px) scale(1);}
    60% {  transform: translate(-100px, -100px) scale(1);}
    80% {  transform: translate(-100px, 100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_04 {
    0% {   transform: translate(0px) scale(0);}
    20% {  transform: translate(100px, -100px) scale(1);}
    40% {  transform: translate(-100px, -100px) scale(1);}
    60% {  transform: translate(-100px, 100px) scale(1);}
    80% {  transform: translate(100px, 100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }

مجلد 1.docx

Yomna Raouf · 10 أبريل 2022

لتحريك الدوائر عند الضغط على الزر سنحتاج لكتابة شيفرة جافاسكريبت تقوم بإضافة الصنف المستخدم لتحريك الدائرة.

 <script>
   // نقوم باختيار العنصر الذي نريد إضافة الصنف له
    const circle = document.getElementsByClassName("circle")[0];

	// نقوم بتعريف دالة يتم استدعائها عند الضغط على الزر و إضافة صنف التحريك للدائرة
    function animateCircle() {
      circle.classList.add("circle-anim")
    }

   // التابع التالي لحذف الصنف المسئول عن تحريك الدائرة
    function removeAnimatation() {
      circle.classList.remove("circle-anim")
    }
  </script>

نقوم باستدعاء الدالة عند الضغط على الزر كما يلي:

<div id="app" onclick="animateCircle();">
  <div id="arrow"></div>
  <div id="success">
    <i class="fas fa-check-circle"></i>
  </div>
</div>

الآن نقوم بتعديل الجزء التالي من الكود و تغيير circle ليصبح اسم الصنف المسئول عن التحريك:

 .circle-anim div:nth-child(1) { animation: anim_01 5s forwards;}
  .circle-anim div:nth-child(2) { animation: move_01 5s 2s; }
  .circle-anim div:nth-child(4) { animation: move_03 5s 2s; }
  .circle-anim div:nth-child(3) { animation: move_02 5s 2s; }
  .circle-anim div:nth-child(5) { animation: move_04 5s 2s; }

الأكواد بعد التعديل

تنفيذ تأثير حركي عند الضغط على زر

السؤال

Yasmeen Hassan

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية