تنسيق قائمة بطريقة انيمشن

ريماس الياس · منذ 20 ساعة

كيف يمكنني جعل عناصر القائمة تتحرك كما بالفيديو

محمد عاطف17 · منذ 17 ساعة

هذه الأمر من الممكن أن يتم إنشاءه بأكثر من طريقة في css من خلال ال transition و إستخدام الخاصية transform لتغير أماكن العناصر .

ولكن في الموقع المرفق هنا تم إستخدام العنصر مرتين . وأيضا تم فصل كل حرف من الكلمات وذلك لجعل كل حرف يتحرك بشكل منفصل عن الأخر وأيضا تأخير وقت كل حرف حتي لا يتحركون معا ويظهر لكي نفس الشكل الموجود في الفيديو .

إليكي الكود الخاص ب HTML وإنشاء العناصر :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <span class="rolling-text">
            <div class="block">
                <span class="letter">P</span>
                <span class="letter">O</span>
                <span class="letter">R</span>
                <span class="letter">T</span>
                <span class="letter">F</span>
                <span class="letter">O</span>
                <span class="letter">L</span>
                <span class="letter">I</span>
                <span class="letter">O</span>
            </div>
            <div class="block"><span class="letter">P</span>
                <span class="letter">O</span>
                <span class="letter">R</span>
                <span class="letter">T</span>
                <span class="letter">F</span>
                <span class="letter">O</span>
                <span class="letter">L</span>
                <span class="letter">I</span>
                <span class="letter">O</span>
            </div>
        </span>
        <span class="rolling-text">
            <div class="block"><span class="letter">A</span>
                <span class="letter">B</span>
                <span class="letter">O</span>
                <span class="letter">U</span>
                <span class="letter">T</span>
                <span class="letter">&nbsp;</span>
                <span class="letter">U</span>
                <span class="letter">S</span>
            </div>
            <div class="block"><span class="letter">A</span>
                <span class="letter">B</span>
                <span class="letter">O</span>
                <span class="letter">U</span>
                <span class="letter">T</span>
                <span class="letter">&nbsp;</span>
                <span class="letter">U</span>
                <span class="letter">S</span>
            </div>
        </span>
        <span class="rolling-text">
            <div class="block"><span class="letter">R</span>
                <span class="letter">E</span>
                <span class="letter">N</span>
                <span class="letter">T</span>
                <span class="letter">A</span>
                <span class="letter">L</span>
            </div>
            <div class="block"><span class="letter">R</span>
                <span class="letter">E</span>
                <span class="letter">N</span>
                <span class="letter">T</span>
                <span class="letter">A</span>
                <span class="letter">L</span>
            </div>
        </span>
    </div>

</body>

</html>

وهذا هو ملف css للتنسيقات :

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.rolling-text {
    display: inline-block;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.rolling-text:hover .letter,
.rolling-text.play .letter {
    transform: translateY(-100%);
}

.rolling-text .letter {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}


.letter:nth-child(1) {
    transition-delay: 0s;
}

.letter:nth-child(2) {
    transition-delay: 0.015s;
}

.letter:nth-child(3) {
    transition-delay: 0.03s;
}

.letter:nth-child(4) {
    transition-delay: 0.045s;
}

.letter:nth-child(5) {
    transition-delay: 0.06s;
}

.letter:nth-child(6) {
    transition-delay: 0.075s;
}

.letter:nth-child(7) {
    transition-delay: 0.09s;
}

.letter:nth-child(8) {
    transition-delay: 0.105s;
}

.letter:nth-child(9) {
    transition-delay: 0.12s;
}

ريماس الياس · منذ 18 ساعة

@محمد عاطف17

هذا رابط الموقع الذي استخدمها ربما يساعدك ذلك

https://millimeterpro.com/

ريماس الياس · منذ 10 ساعة

بتاريخ 7 ساعة قال محمد عاطف17:

هذه الأمر من الممكن أن يتم إنشاءه بأكثر من طريقة في css من خلال ال transition و إستخدام الخاصية transform لتغير أماكن العناصر .

ولكن في الموقع المرفق هنا تم إستخدام العنصر مرتين . وأيضا تم فصل كل حرف من الكلمات وذلك لجعل كل حرف يتحرك بشكل منفصل عن الأخر وأيضا تأخير وقت كل حرف حتي لا يتحركون معا ويظهر لكي نفس الشكل الموجود في الفيديو .

إليكي الكود الخاص ب HTML وإنشاء العناصر :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <span class="rolling-text">
            <div class="block">
                <span class="letter">P</span>
                <span class="letter">O</span>
                <span class="letter">R</span>
                <span class="letter">T</span>
                <span class="letter">F</span>
                <span class="letter">O</span>
                <span class="letter">L</span>
                <span class="letter">I</span>
                <span class="letter">O</span>
            </div>
            <div class="block"><span class="letter">P</span>
                <span class="letter">O</span>
                <span class="letter">R</span>
                <span class="letter">T</span>
                <span class="letter">F</span>
                <span class="letter">O</span>
                <span class="letter">L</span>
                <span class="letter">I</span>
                <span class="letter">O</span>
            </div>
        </span>
        <span class="rolling-text">
            <div class="block"><span class="letter">A</span>
                <span class="letter">B</span>
                <span class="letter">O</span>
                <span class="letter">U</span>
                <span class="letter">T</span>
                <span class="letter">&nbsp;</span>
                <span class="letter">U</span>
                <span class="letter">S</span>
            </div>
            <div class="block"><span class="letter">A</span>
                <span class="letter">B</span>
                <span class="letter">O</span>
                <span class="letter">U</span>
                <span class="letter">T</span>
                <span class="letter">&nbsp;</span>
                <span class="letter">U</span>
                <span class="letter">S</span>
            </div>
        </span>
        <span class="rolling-text">
            <div class="block"><span class="letter">R</span>
                <span class="letter">E</span>
                <span class="letter">N</span>
                <span class="letter">T</span>
                <span class="letter">A</span>
                <span class="letter">L</span>
            </div>
            <div class="block"><span class="letter">R</span>
                <span class="letter">E</span>
                <span class="letter">N</span>
                <span class="letter">T</span>
                <span class="letter">A</span>
                <span class="letter">L</span>
            </div>
        </span>
    </div>

</body>

</html>

وهذا هو ملف css للتنسيقات :

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.rolling-text {
    display: inline-block;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.rolling-text:hover .letter,
.rolling-text.play .letter {
    transform: translateY(-100%);
}

.rolling-text .letter {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}


.letter:nth-child(1) {
    transition-delay: 0s;
}

.letter:nth-child(2) {
    transition-delay: 0.015s;
}

.letter:nth-child(3) {
    transition-delay: 0.03s;
}

.letter:nth-child(4) {
    transition-delay: 0.045s;
}

.letter:nth-child(5) {
    transition-delay: 0.06s;
}

.letter:nth-child(6) {
    transition-delay: 0.075s;
}

.letter:nth-child(7) {
    transition-delay: 0.09s;
}

.letter:nth-child(8) {
    transition-delay: 0.105s;
}

.letter:nth-child(9) {
    transition-delay: 0.12s;
}

هل يمكن عمل ذلك بكتابة عناصر القائمة بشكل طبيعية دون كتابتها حرف حرف ؟

محمد عاطف17 · منذ 6 ساعة

بتاريخ 4 ساعة قال ريماس الياس:

هل يمكن عمل ذلك بكتابة عناصر القائمة بشكل طبيعية دون كتابتها حرف حرف ؟

للأسف إذا أردتي نفس التنسيقات حيث كما يظهر أن كل حرف يتحرك بشكل منفصل فلن يتم فعل ذلك دون فصل الأحرف معا . وإلا ستجدين أن الكلمة بأكملها تتحرك معا وليس كما يظهر في الفيديوا أن كل حرف منفصل عن الأخر في الحركة .

ولكن إذا كنتي تقصدين عدم فصل الأحرف في HTML فمن الممكن تنفيذ ذلك بالطبع من خلال js ولكن سيتم فصل الأحرف . وإليكي كود HTML مع JS الذي سيفعل ذلك ويمكنكي إستخدام كود css السابق كما هو :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rolling Text</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <span class="rolling-text" data-text="PORTFOLIO"></span>
        <span class="rolling-text" data-text="ABOUT US"></span>
        <span class="rolling-text" data-text="RENTAL"></span>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const rollingTexts = document.querySelectorAll(".rolling-text");

            rollingTexts.forEach((rollingText) => {
                const text = rollingText.getAttribute("data-text");

                const letters = text.split("");
                const div1 = document.createElement("div");
                div1.classList.add("block");
                letters.forEach((letter, index) => {
                    const span = document.createElement("span");
                    span.classList.add("letter");
                    span.innerText = letter;
                    div1.appendChild(span);
                });

                const div2 = div1.cloneNode();

                rollingText.appendChild(div1);
                rollingText.appendChild(div2);
            });
        });
    </script>
</body>

</html>

ريماس الياس · منذ 4 ساعة

@محمد عاطف17

اولا شكرا جدا لانني اتعبك معي ولكن

عند استخدام كود الجافر سكريبت يظهر هكذا تذهب للاعلى ولا تعود للاسفل

وعند استخدام ال css وكل حرف على حدى تخرب تنسيقات الصفحة بالكامل لا اعلم لماذا

هذا هو كود القائمة الموجودة لدي هل ممكن نصائح كيف اقوم بتعديلها ؟

  <!-- navbar -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary shadow-bottom fixed-top mb-4">
    <div class="container">
      <a href="{{ url('/') }}">
      <img style="height: 50px; width : 150px" src="{{asset ('storage/' .  $information->logo)}}" alt="" >
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ms-auto"> <!-- ms-auto لتحريك العناصر لليمين -->
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{ url('/') }}">  Home</a>
          </li>

          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{ route('favorites') }}"> Favorites</a>
          </li>
          <!--services  -->
          <div class="nav-item">  
            <a class="nav-link" href="#">
            <span class=""> Services </span>
            </a>
            <ul class="dropdown-menu"> 
                  @foreach ($categories as $category)
                  <li class="nav-item">
                          <a class="dropdown-item has-submenu" href="{{ route('subcategories.index1', $category->id) }}">{{ $category->name }}</a>
                          <ul class=" dropdown-menu">
                              @foreach ($category->subcategories as $subcategory)
                              <li><a class="dropdown-item" href="{{ route('subcategories.show', $subcategory->id) }}">{{ $subcategory->name }}</a></li>
                              @endforeach
                          </ul>
                      </li>
                  @endforeach
              </ul>
          </div>
        <!-- our team -->
          <li class="nav-item">
            <a class="nav-link" href="#ourteam"> 
            Our team</a>
          </li>
          <!-- subscriber -->
          <div class="nav-item">  
              <a class="nav-link" href="#">
                  <span>Subscribers</span>
              </a>
              <ul class="dropdown-menu">
                  @foreach ($subscriberCategories as $subscriberCategory)
                      <li class="nav-item">
                          <a class="dropdown-item has-submenu" href="#">{{ $subscriberCategory->name }}</a>
                          <ul class="dropdown-menu">
                              @foreach ($subscriberCategory->subscribers as $subscriber)
                                  <li>
                                      <!-- رابط لصفحة التفاصيل الخاصة بكل مشترك -->
                                      <a class="dropdown-item" href="{{ route('subscribers.index', $subscriber->id) }}">
                                          {{ $subscriber->name }}
                                      </a>
                                  </li>
                              @endforeach
                          </ul>
                      </li>
                  @endforeach
              </ul>
          </div>

          <!-- posts -->
          <div class="nav-item">  
            <a class="nav-link" href="#">
            <span class="">
            
            Articles
            </span>
            </a>
            <ul class="dropdown-menu">
            @foreach ($postCategories as $postCategory )
            <li class="nav-item">
              <a class="dropdown-item has-submenu" href="#">{{ $postCategory->name }}</a>
              <ul class=" dropdown-menu">
                  @foreach ($postCategory->posts as $post)
                       <li><a class="dropdown-item" href="#">{{ $post->name }}</a></li>
                   @endforeach
              </ul>

            </li>
            @endforeach
            </ul>
          </div>


          
        </ul>

        <!-- تسجيل الدخول والخروج -->
         <ul class="navbar-nav ms-auto">
         @guest
                            <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">
                            <button class="btn-register">{{ __('log in') }}</button>

                            </a>
                            </li>
                            @if (Route::has('register'))
                            <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">
                              <button class="btn-register">{{ __('register') }}</button>
                            </a>
                            </li>
                            @endif
                            @else
                            <li class="nav-item dropdown">
                            <a id="navbarDropdown" class=" dropdown-toggle text-decoration-none text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                     {{ Auth::user()->name }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end text-right">
                              @can('update-info')
                                <li><a href="{{ route('admin.index') }}" class="dropdown-item">admin controller</a></li>
                              @endcan
                                <li><a class="dropdown-item" href="{{ route('profile.show') }}">{{ __('my account') }}</a></li>
                                <li>
                                  <a class="dropdown-item" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                    {{ __('log out') }}
                                  </a>
                                </li>

                                <!-- نموذج تسجيل الخروج -->
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                  @csrf
                                </form>
                                                                
                            </ul>
                            </li>
                            @endguest
            
         </ul>
      </div>
    </div>
  </nav>
<!-- end navbar -->

ريماس الياس · منذ 54 دقيقة

@محمد عاطف17

محمد عاطف17 · منذ 28 دقيقة

بتاريخ 4 ساعة قال ريماس الياس:

@محمد عاطف17

اولا شكرا جدا لانني اتعبك معي ولكن

عند استخدام كود الجافر سكريبت يظهر هكذا تذهب للاعلى ولا تعود للاسفل

وعند استخدام ال css وكل حرف على حدى تخرب تنسيقات الصفحة بالكامل لا اعلم لماذا
هذا هو كود القائمة الموجودة لدي هل ممكن نصائح كيف اقوم بتعديلها ؟

لا داعي للشكر . اعتقد أنه يوجد بالفعل المشكلة حيث يبدوا أني لم أقم بإرفاق الكود الصحيح إليكي الكود التالي :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rolling Text</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <span class="rolling-text" data-text="PORTFOLIO"></span>
        <span class="rolling-text" data-text="ABOUT US"></span>
        <span class="rolling-text" data-text="RENTAL"></span>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // تحديد جميع العناصر التي تحتوي على النص
            const rollingTexts = document.querySelectorAll(".rolling-text");

            rollingTexts.forEach((rollingText) => {
                // الحصول على النص من السمة data-text
                const text = rollingText.getAttribute("data-text");

                // تقسيم النص إلى أحرف
                const letters = text.split("");
                const div1 = document.createElement("div");
                div1.classList.add("block");
                // إنشاء عناصر لكل حرف وإضافتها إلى DOM
                letters.forEach((letter, index) => {
                    const span = document.createElement("span");
                    span.classList.add("letter");
                    span.innerText = letter;
                    div1.appendChild(span);
                    div1.appendChild(document.createTextNode(" "));
                });

                // تكرار النص مرة أخرى لإنشاء التأثير
                const div2 = div1.cloneNode(true);

                rollingText.appendChild(div1);
                rollingText.appendChild(div2);
            });
        });
    </script>
</body>

</html>

أما بخصوص التنسيقات فإنه لا يجب أن يوجد أى تعارض ولكن من الممكن أن السبب بسبب class الذي يسمى container حيث أنه يستخدم بكثرة في المكتبات . يمكنكي حذف هذا ال class من ملف style.css ليصبح كود التنسيقات كالتالي :

.rolling-text {
    display: inline-block;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.rolling-text:hover .letter,
.rolling-text.play .letter {
    transform: translateY(-100%);
}

.rolling-text .letter {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}


.letter:nth-child(1) {
    transition-delay: 0s;
}

.letter:nth-child(2) {
    transition-delay: 0.015s;
}

.letter:nth-child(3) {
    transition-delay: 0.03s;
}

.letter:nth-child(4) {
    transition-delay: 0.045s;
}

.letter:nth-child(5) {
    transition-delay: 0.06s;
}

.letter:nth-child(6) {
    transition-delay: 0.075s;
}

.letter:nth-child(7) {
    transition-delay: 0.09s;
}

.letter:nth-child(8) {
    transition-delay: 0.105s;
}

.letter:nth-child(9) {
    transition-delay: 0.12s;
}

تنسيق قائمة بطريقة انيمشن

السؤال

ريماس الياس

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

Recommended Posts

محمد عاطف17

ريماس الياس

ريماس الياس

محمد عاطف17

ريماس الياس

ريماس الياس

محمد عاطف17

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية