تحريك صورة الغلاف على محور Y في موقع شبيه بـ Facebook باستخدام React

ستحتاج إلى استخدم JavaScript لتحريك صورة الغلاف على محور الـ Y، باستخدام حدث onMouseMove لتحديد موقع المؤشر وتحديث خاصية background-position-y في CSS بناءًا على ذلك الموقع، وتستطيع ضبط سرعة التحريك عن طريق ضبط القيمة التي تتم إضافتها إلى background-position-y بناءًا على حركة المؤشر.

ولكن نصيحتي إليك هي بأن تقوم بإنشاء الموقع بخواصه الأساسية والمطلوب منك فقط، ثم إذا أردت التحسين وإضافة ميزات أخرى افعل ذلك، وتلك الطريقة ستجنبك إضاعة الوقت في ميزات جانبية بدلاً من العمل على إنهاء المشروع بميزاته الأساسية.

وللعلم تلك الطريقة مستخدمة في بناء المشاريع حيث يتم بناء ما يعرف باسم MVP أي المشروع بميزات أساسية ليعمل فقط ويتم تجريبه ثم مع الوقت يتم إضافة الميزات والخواص المطلوبة للتوسع وبناءًا على إحتياجات المشروع، ولا أن يتم بناء كل الميزات وإطلاقها في نفس الوقت وتأخير إطلاق المشروع.

وعلي أي حال،سأوضح لك بمثال بالكود:

أولًا، قم بإنشاء مكون React يسمى "CoverPhoto"، واحفظه في ملف "CoverPhoto.js":

import React, { useState } from 'react';
import './CoverPhoto.css';

const CoverPhoto = () => {
  const [positionY, setPositionY] = useState(0);

  const handleMouseMove = (event) => {
    const { clientY } = event;
    setPositionY(clientY);
  };

  return (
    <div
      className="cover-photo"
      onMouseMove={handleMouseMove}
      style={{ backgroundPositionY: `${positionY}px` }}
    />
  );
};

export default CoverPhoto;

ثم، قم بإنشاء ملف CSS واحفظه بنفس المجلد تحت اسم "CoverPhoto.css":

.cover-photo {
  width: 100%;
  height: 300px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  transition: background-position-y 0.3s ease-out;
}

وضع في اعتبارك تعديل "image.jpg" بمسار صحيح لصورة الغلاف.

أخيرًا، عليك بتضمين مكون "CoverPhoto" في مكان الذي يُعرض فيه الغلاف في المشروع. الخاص بك.

import React from 'react';
import CoverPhoto from './CoverPhoto';

const App = () => {
  return (
    <div>
      {/* عناصر أخرى في التطبيق */}
      <CoverPhoto />
      {/* عناصر أخرى في التطبيق */}
    </div>
  );
};

export default App;

بتاريخ 5 دقائق مضت قال Mustafa Suleiman:

ستحتاج إلى استخدم JavaScript لتحريك صورة الغلاف على محور الـ Y، باستخدام حدث onMouseMove لتحديد موقع المؤشر وتحديث خاصية background-position-y في CSS بناءًا على ذلك الموقع، وتستطيع ضبط سرعة التحريك عن طريق ضبط القيمة التي تتم إضافتها إلى background-position-y بناءًا على حركة المؤشر.

ولكن نصيحتي إليك هي بأن تقوم بإنشاء الموقع بخواصه الأساسية والمطلوب منك فقط، ثم إذا أردت التحسين وإضافة ميزات أخرى افعل ذلك، وتلك الطريقة ستجنبك إضاعة الوقت في ميزات جانبية بدلاً من العمل على إنهاء المشروع بميزاته الأساسية.

وللعلم تلك الطريقة مستخدمة في بناء المشاريع حيث يتم بناء ما يعرف باسم MVP أي المشروع بميزات أساسية ليعمل فقط ويتم تجريبه ثم مع الوقت يتم إضافة الميزات والخواص المطلوبة للتوسع وبناءًا على إحتياجات المشروع، ولا أن يتم بناء كل الميزات وإطلاقها في نفس الوقت وتأخير إطلاق المشروع.

وعلي أي حال،سأوضح لك بمثال بالكود:

أولًا، قم بإنشاء مكون React يسمى "CoverPhoto"، واحفظه في ملف "CoverPhoto.js":

import React, { useState } from 'react';
import './CoverPhoto.css';

const CoverPhoto = () => {
  const [positionY, setPositionY] = useState(0);

  const handleMouseMove = (event) => {
    const { clientY } = event;
    setPositionY(clientY);
  };

  return (
    <div
      className="cover-photo"
      onMouseMove={handleMouseMove}
      style={{ backgroundPositionY: `${positionY}px` }}
    />
  );
};

export default CoverPhoto;

ثم، قم بإنشاء ملف CSS واحفظه بنفس المجلد تحت اسم "CoverPhoto.css":

.cover-photo {
  width: 100%;
  height: 300px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  transition: background-position-y 0.3s ease-out;
}

وضع في اعتبارك تعديل "image.jpg" بمسار صحيح لصورة الغلاف.

أخيرًا، عليك بتضمين مكون "CoverPhoto" في مكان الذي يُعرض فيه الغلاف في المشروع. الخاص بك.

import React from 'react';
import CoverPhoto from './CoverPhoto';

const App = () => {
  return (
    <div>
      {/* عناصر أخرى في التطبيق */}
      <CoverPhoto />
      {/* عناصر أخرى في التطبيق */}
    </div>
  );
};

export default App;

 

شكراََ لك اخ @Mustafa Suleiman

لتحريك صورة الغلاف على محور الـ Y بإستخدام السحب بالفأرة في React، يمكن استخدام مكتبة React-Draggable التي توفر القدرة على سحب العناصر المرئية وتعديل موقعها بناءً على حركة الفأرة.

قم بتثبيت مكتبة React-Draggable باستخدام npm عبر الأمر التالي:

npm install react-draggable

ثم يمكنك استخدام الكود التالي لإنشاء مكون React يحرّك صورة الغلاف على محور الـ Y:

import React, { useState } from 'react';
import Draggable from 'react-draggable';
function CoverPhoto() {
  const [yPos, setYPos] = useState(0);
  const handleDrag = (event, ui) => {
    const { y } = ui;
    setYPos(y);
  };
  return (
    <div>
      <Draggable axis="y" onDrag={handleDrag}>
        <div
          style={{
            backgroundImage: `url('/path/to/image.jpg')`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            height: '200px',
            position: 'relative',
            top: yPos,
          }}
        />
      </Draggable>
    </div>
  );
}
export default CoverPhoto;

في هذا المثال، يتم استخدام حالة محلية لحفظ موضع صورة الغلاف على محور الـ Y. تم إنشاء دالة `handleDrag` التي تختص بمعالجة الحدث onDrag الذي يتم إطلاقه عندما يتم سحب الصورة. يتم استخدام خاصية `top` في الـ CSS لتغيير موضع الصورة على محور الـ Y بناءً على قيمة yPos.

يمكنك ضبط الارتفاع والأسلوب الذي يتم عرض صورة الغلاف في الـ CSS، كما هو موضح في المثال.

كما يمكنك الإطلاع على المثال التالي

https://codepen.io/chavdar84/pen/pKvXbq