إضافة تأثير الفقاعة مع خاصية التكبير في مشروع React

Mohamed Boumlik · 8 مايو 2023

السلام عليكم
Screenshot2023-05-08122124.png.e34812b82574f0a6bede6dae8e9753e6.png

كما تلا حظون الفقاعة اريدها ان تمتلك خاصية magnify

ب css كل شيء يعمل بطريقة متالية animation .. الا اني حاولت ان استخدم scaling في الاول و لم يعمل

ملف css


.square{
    animation: morph 12s ease-in-out alternate infinite ;
    background-image: url("../img/img1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    height: 450px;
    position: relative;
    width: 450px;
 
   
}
@keyframes morph {
    0% {
      border-radius: 60% 70% 60% 80%/60% 60% 50% 90%;
      transform: scale(.96) rotate(0deg);
      filter: blur(0.3);
    }
    25% {
      border-radius: 20% 60% 70% 30%/30% 50% 60% 90%;
      transform:  rotate(7deg);
    }
    50% {
      border-radius: 90% 50% 80% 90%/70% 80% 70% 90%;
      transform:  rotate(-2deg);
      filter: blur(0);
    }
    75% {
      border-radius: 60% 50% 70% 60%/50% 40% 70% 30%;
      transform:  rotate(-7deg);
    }
    100% {
      border-radius: 60% 70% 50% 70%/60% 30% 70% 40%;
      transform: scale(1) rotate(0deg);
      filter: blur(0.1);
    }
  }
  
  .bubble1 {
    background: rgba(255, 255, 255, 0.1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    animation: play 30s infinite ease-in;
    box-shadow: 0 0 25px rgb(255, 254, 255) inset;
    
  }
  .bubble1:before {
    background: rgba(255, 255, 255, 0.2);
    content: "";
    width: 20px;
    height: 18px;
    position: absolute;
    margin: 10px 0 0 25px;
    border-radius: 50%;
    transform: rotate(-20deg);
  }
  .bubble2 {
    background: rgba(255, 255, 255, 0.1);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    animation: play 20s infinite ease-in;
    box-shadow: 0 0 25px rgb(255, 254, 255) inset;
    
  }
  .bubble2:before {
    background: rgba(255, 255, 255, 0.2);
    content: "";
    width: 20px;
    height: 18px;
    position: absolute;
    margin: 10px 0 0 25px;
    border-radius: 50%;
    transform: rotate(-20deg) ;
  }
  @keyframes play {
    0% {
      box-shadow: 0 0 25px var(--white-gris) inset;
      transform: red translateX(0) translateY(0px) ;
    }
    20% {
      box-shadow: 0 0 25px var(--white-gris) inset;
      transform: translateX(300px) translateY(343px);
    }
    30% {
      box-shadow: 0 0 25px var(--white-gris) inset;
      transform: translateX(224px) translateY(140px);
    }
    40% {
      box-shadow: 0 0 25px var(--white-gris) inset;
      transform: translateX(300px) translateY(0);
    }
    50% {
      box-shadow: 0 0 25px var(--blue) inset;
      transform: translateX(100px) translateY(243px);
    }
    60% {
      box-shadow: 0 0 25px var(--blue) inset;
      transform: translateX(0) translateY(180px);
    }
    70% {
      box-shadow: 0 0 25px var(--blue) inset;
      transform: translateX(200px) translateY(0);
    }
    80% {
      box-shadow: 0 0 25px var(--gris) inset;
      transform: translateX(224px) translateY(270px);
    }
    90% {
      box-shadow: 0 0 25px var(--white-gris) inset;
      transform: translateX(0) translateY(0);
    }
  }

هل من حل ؟

جزاكم الله خيرا

تم التعديل في 8 مايو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

بلال زيادة · 8 مايو 2023

لإضافة خاصية magnify إلى عنصر HTML ، يمكنك استخدام خاصية transform وتعيين قيمة scale لها. لتحقيق التكبير، تحتاج إلى زيادة قيمة الـ scale إلى أكبر من 1.0.

على سبيل المثال ، لإضافة خاصية magnify للفقاعة ، يمكنك استخدام الشيفرة التالية:

.bubble1:hover {
   transform: scale(1.5);
}

في هذا المثال، عندما يتم تحويل المؤشر إلى الفقاعة، سيتم تكبير حجمها 1.5 مرة.

ومن الجدير بالذكر أنه يمكنك تعديل قيمة scale لتحقيق أي حجم تريده.

Mustafa Suleiman · 8 مايو 2023

إذا كنت ترغب في إضافة تأثير التكبير للفقاعة، فهناك خاصية transform: scale() في CSS لتكبير الفقاعة، حاول تجربة إضافة هذه الخاصية إلى تعريف الـ .bubble1 و .bubble2 في الكود الخاص بك، وذلك على النحو التالي:

.bubble1 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(1.5); /* تكبير الفقاعة بنسبة 1.5 */
}

.bubble2 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(2); /* تكبير الفقاعة بنسبة 2 */
}

وتستطيع تعديل قيمة scale وفقًا للتكبير المطلوب للفقاعة.

تذكر أنه يجب تحديد العناصر .bubble1 و .bubble2 في عنصر الـ .square أو أي عنصر آخر تستخدمه لعرض الفقاعات.

بعد إضافة الـ transform: scale() للفقاعات، قد تحتاج إلى ضبط حجمها وموقعها بناءً على ما ترغب فيه داخل العنصر الأساسي .square باستخدام القيم المناسبة للـ width و height و position.

Mohamed Boumlik · 8 مايو 2023

بتاريخ 3 دقائق مضت قال Mustafa Suleiman:
إذا كنت ترغب في إضافة تأثير التكبير للفقاعة، فهناك خاصية transform: scale() في CSS لتكبير الفقاعة، حاول تجربة إضافة هذه الخاصية إلى تعريف الـ .bubble1 و .bubble2 في الكود الخاص بك، وذلك على النحو التالي:
.bubble1 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(1.5); /* تكبير الفقاعة بنسبة 1.5 */
}

.bubble2 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(2); /* تكبير الفقاعة بنسبة 2 */
}
وتستطيع تعديل قيمة scale وفقًا للتكبير المطلوب للفقاعة.

تذكر أنه يجب تحديد العناصر .bubble1 و .bubble2 في عنصر الـ .square أو أي عنصر آخر تستخدمه لعرض الفقاعات.

بعد إضافة الـ transform: scale() للفقاعات، قد تحتاج إلى ضبط حجمها وموقعها بناءً على ما ترغب فيه داخل العنصر الأساسي .square باستخدام القيم المناسبة للـ width و height و position.

بتاريخ 8 دقائق مضت قال بلال زيادة:
لإضافة خاصية magnify إلى عنصر HTML ، يمكنك استخدام خاصية transform وتعيين قيمة scale لها. لتحقيق التكبير، تحتاج إلى زيادة قيمة الـ scale إلى أكبر من 1.0.

على سبيل المثال ، لإضافة خاصية magnify للفقاعة ، يمكنك استخدام الشيفرة التالية:
.bubble1:hover {
   transform: scale(1.5);
}
في هذا المثال، عندما يتم تحويل المؤشر إلى الفقاعة، سيتم تكبير حجمها 1.5 مرة.

ومن الجدير بالذكر أنه يمكنك تعديل قيمة scale لتحقيق أي حجم تريده.

لا ليس هدا ما اردت
اسف اني لم اوضح جيدا
-----------------------------

حسنا في العالم الواقعي . عنج النظر في الفقاعة فان ما تراه يكون اكبر

ا نا لا اريد تعديل حجم الفقاعة لاكن اريد شيءا قريبا من

Screenshot2023-05-08130337.png.797d13ce78c0ac6541dc04515046026a.png

و مع ان اللفقاعة تتحرك يكون الeffect يعمل
هل وضحت جيدا ؟

Mustafa Suleiman · 8 مايو 2023

بتاريخ 36 دقائق مضت قال Mohamed Boumlik:

لا ليس هدا ما اردت
اسف اني لم اوضح جيدا
-----------------------------

حسنا في العالم الواقعي . عنج النظر في الفقاعة فان ما تراه يكون اكبر

ا نا لا اريد تعديل حجم الفقاعة لاكن اريد شيءا قريبا من

و مع ان اللفقاعة تتحرك يكون الeffect يعمل
هل وضحت جيدا ؟

ما تريده يتطلب بعض الجهد ولا يتم من خلال CSS فقط، بل يجب استخدام جافاسكريبت أيضًا، وتستطيع استخدام مكتبة مثل https://thdoan.github.io/magnify/ أو https://www.npmjs.com/package/react-image-magnifiers لتنفيذ ذلك، بحيث تقوم بمحاكاة مؤشر الفأرة كما لو أنك أشرت إلى الصورة لكل فقاعة، وابحث عن React.js Image Zoom/Magnifier على اليوتيوب وستجد شروحات.

Mohamed Boumlik · 8 مايو 2023

لقد بحت ووجدت انه يحتاح jquerry
لدالك ادخللته ب webpack
Screenshot2023-05-08150032.png.feb61de8089a61db99a5388d5cf3dd24.png

Screenshot2023-05-08150049.png.d0afcc3c32d2d3a35eae0a76127851d4.png

Screenshot2023-05-08150100.png.c2399d2a78304c97ca16593ff6745ac2.png

الا انه يخبرني ان caught ReferenceError: jQuery is not defined
at ./node_modules/magnify/dist/js/jquery.magnify.js (jquery.magnify.js:343:1)

caught ReferenceError: jQuery is not defined
    at ./node_modules/magnify/dist/js/jquery.magnify.js (jquery.magnify.js:343:1)

رغم اني لدي magnify + jquerry in package.json

Screenshot2023-05-08150332.png.c625a66626b8909c885bb81f0c5fd2d7.png

إضافة تأثير الفقاعة مع خاصية التكبير في مشروع React

السؤال

Mohamed Boumlik

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

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

5 أجوبة على هذا السؤال

Recommended Posts

بلال زيادة

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

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

Mustafa Suleiman

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

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

Mohamed Boumlik

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

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

Mustafa Suleiman

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

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

Mohamed Boumlik

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية