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

الصفحات

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

Creative parallax scroll effect html & css only

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

Creative parallax scroll effect html &  css only 

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

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

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




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

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

قد يعجبك هذا :

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (Creative parallax scroll effect html &  css only ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <section>. كما تعلم ، يتم استخدام علامة <section> بشكل كبير لإنشاء التقسيم الاول. ,وذلك مع bootstrap ثم أنشأت <div> باسم الفئة ".diagonal". بعد ذلك ، أنشأت <div> آخر باسم الفئة "-container" ووضعت ايضا<div> . داخل كل <div> علامة قمت بإنشاء <col-md-4>  ميزة في bootstrap
..
داخل سمة href للعلامة <a> ، لقد كتبت # وهذا يعني أنه عند النقر فوق عناصر التنقل ، فلن يعيد توجيهك إلى أي صفحة. إذا كنت ترغب في إعادة توجيه المستخدم الخاص بك إلى صفحة معينة ، فيمكنك وضع عنوان URL للصفحة داخل href. أخيرًا ، أنشأت <h3> ووضعت علامة <p> و <img>. داخل <div> كتبت ذلك لتسهيل الانتقال الى المزيد من المقال

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

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

لإنشاء هذا البرنامج (شريط التنقل المتجاوب مع مربع البحث). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف 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>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="about">
<div id="diagonal"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="box">
<div id="outer">
<div id="inner">
<div class="content-title">
<h3>FULL STACK</h3>
<div class="underline"></div>
</div>
<div id="about-desc">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt voluptates doloribus quos illo recusandae totam doloremque blanditiis? Harum, quas! Natus consectetur ullam numquam fuga vero hic ratione,
</p>
</div>
<div id="about-btn">
<a href="" class="btn btn-info btn-lg">
Get started now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<div id="iore">
<h2 class="title">Fully paython</h2>
<br><br>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ipsa molestias dicta incidunt ea, nemo quibusdam ullam possimus beatae ipsum alias. Deleniti nemo ducimus laboriosam accusantium omnis fugit officiis impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam molestiae porro ab aut illo, unde cumque amet? Modi sequi doloribus harum, delectus repellat, nisi accusamus quaerat voluptas vel rerum tempora.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi labore aspernatur eligendi autem impedit! Dolore perspiciatis sit expedita et quod reiciendis. Architecto dignissimos, debitis voluptate molestiae ad id odit excepturi.
lo
</p>
<br><br><br>
<div class="button text-center">
<a class="btn btn-info btn-lg">lern now</a>
<a class="btn btn-info btn-lg">Get started now</a>
</div>
</div>
</div>
</section>
</body>
</html>

CSS FILE:

body{
height: 2000px;
font-family: sans-serif;
}
#diagonal{
width: 60%;
height: 70px;
float: right;
background-image: url(4.jpg);
border-left:200px solid white;
border-top: 700px solid transparent;
background-attachment: fixed;
}
#box{
float: left;
height: 700px;
}
#outer{
width: 100%;
height: 100%;
display: table;
}
#inner{
display: table-cell;
vertical-align: middle;
}
#about .content-title h3{
text-align: left;
}
#about .underline{
margin:0 0 30px 0px;
}
#about-desc p{
margin-bottom: 30px;
font-size: 17px;
}
.btn{
border-radius: 30px !important;
padding: 15px 30px;
}
.btn-info{
background-color: #ffd43b !important;
border : 0;
}
#iore .title{
text-align: center;
background-color: #ffd43b !important;
}









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

تعليقات

إرسال تعليق