القائمة الرئيسية

الصفحات

تعديل المشاركة

Create Scroll up using html,css and JQuery

سومر للحلول البرمجية
(0)

Create Scroll up using html,css and JQuery 





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

 ان هذا التمرير للاعلى  ياتي في   واجهة مستخدم داخل صفحة ويب تحتوي على مقالات كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل البحث بسهوله عن اي مقالة 

اليوم في هذه المدونة ، سأشارك معك هذا البرنامج ( إنشاء التمرير لأعلى باستخدام html و css و JQuery). التمرير  يستجيب بشكل كامل لأي جهاز. على الأجهزة المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة 
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (إنشاء التمرير لأعلى باستخدام html و css و JQuery).





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

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

قد يعجبك هذا :

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( إنشاء التمرير لأعلى باستخدام html و css و JQuery  ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div> بأسم الفئة "banner". كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. وانشأت واحد اخر بأسم الفئة "content" ,وذلك من غيرbootstrap ثم أنشأت <h1> بداخله ثم بعد ذلك انشأت ".p". وكتبت فيه النص المعروف Loren  وذلك من اجل ان يكون الكتابة بشكل كثير 
..
قمت ايضا بأنشاء "a" ولا تاخذ عنوان معين للانتقال الى صفحة اخرى اكتفيت بوضع العلامات فقط "" ويمكن ان تضع عنوان للانتقال اذا كنت تحب الانتقال الى صفحة اخرى

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

الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transition. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك  للاعلى وسرعته.  ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size
لإنشاء هذا البرنامج (التمرير للاعلى). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.


HTML FILE:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery scroll Top button</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<h1>Scroll Top</h1>
</div>
<div class="content">
<h2>Header one</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, esse perspiciatis consequatur non nulla nisi perferendis tempora maxime ipsa blanditiis enim mollitia sunt harum eligendi sequi qui ullam atque pariatur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta consequuntur laudantium repellat fugiat dignissimos distinctio error laboriosam exercitationem est, itaque ullam beatae eum, animi iure quas maxime amet corporis cupiditate?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, esse perspiciatis consequatur non nulla nisi perferendis tempora maxime ipsa blanditiis enim mollitia sunt harum eligendi sequi qui ullam atque pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta consequuntur laudantium repellat fugiat dignissimos distinctio error laboriosam exercitationem est, itaque ullam beatae eum, animi iure quas maxime amet corporis cupiditate? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
sum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dosum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dosum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dosum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dosum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum dosum dolor sit amet consectetur adipisicing elit. Veniam quidem itaque, ut a, quas accusantium vel numquam laborum deserunt quaerat dicta dolores eligendi perspiciatis praesentium repellat voluptas provident placeat assumenda.lo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo harum reiciendis porro aspernatur laudantium reprehenderit nesciunt voluptates commodi id fugiat accusantium maxime est doloribus enim quod repudiandae ea, dicta qui.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus animi odit iusto cumque obcaecati repellendus quaerat aperiam eos modi sunt mollitia adipisci, quo reiciendis velit recusandae est. Consectetur, est!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quia harum a, ea, voluptates sed fugiat, saepe eius libero nulla eum quisquam odio qui aliquid doloremque laborum placeat culpa perferendis?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint minima laborum voluptatum dolor eum natus nemo sit iste ipsum possimus eius reiciendis, ducimus quis, omnis nihil consequuntur inventore aut! Quam.
Lorem ipsum do
</p>
</div>
<a href="" class="scrollUp">
<i class="fa fa-chevron-up"></i>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const scrollUp = document.querySelector('.scrollUp');
window.addEventListener('scroll', () => {
if(window.pageYOffset > 100){
scrollUp.classList.add("active");
}else{
scrollUp.classList.remove("active")
}
});
</script>
</body>
</html>






CSS FILE:


*{
margin:0;
padding:0;
}
.banner{
height: 80vh;
display: -webkit-flex;
display: -moz-flex;
display: flex;
align-items: center;
justify-content: center;
background-image: url(1.jpg);
background-size: contain;
background-position: center center;
}
.banner h1{
font-size: 45px;
text-transform: uppercase;
letter-spacing: 6px;
color: #fff;
font-family: big john;
}
.content{
padding: 60px;
font-family: poppins;
}
.content h2{
text-align: center;
text-transform: uppercase;
font-size: 50px;
}
.scrollUp{
display: -webkit-flex;
display: -moz--flex;
display: flex;
align-items: center;
font-size: 35px;
color: #fff;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: .5s;
background: crimson;
justify-content: center;
position: fixed;
bottom: 16px;
right: 32px;
height: 60px;
width: 60px;
border-radius: 5px;
}
.scrollUp.active{
bottom: 32px;
pointer-events: auto;
opacity: 1;
transform: translateY(-55px);
}





هل اعجبك الموضوع :

أخر المواضيع من قسم : Scroll effect web

تعليقات

إرسال تعليق