بطاقات تفاعلية ثلاثية الأبعاد اكتشف المحتوى خلف الصورة

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

حديقة شتوية

معهد ساراتوف الحكومي للموسيقى يحمل اسم L.V. معهد سوبينوفا (SGC) هو مؤسسة تعليمية موسيقية عليا في ساراتوف، وهو المعهد الموسيقي الثالث في روسيا. تأسست سنة 1912 على أساس مدرسة للموسيقى.

الرافعات

المجمع التذكاري "الرافعات" في حديقة النصر على جبل سوكولوفايا في ساراتوف هو نصب تذكاري لسكان ساراتوف الذين لقوا حتفهم خلال الحرب الوطنية العظمى 1941-1945. المجمع التذكاري "الرافعات"، أحد رموز ساراتوف.

سيرك

سيرك ساراتوف الذي يحمل اسم الأخوين نيكيتين هو سيرك في ساراتوف، وهو السيرك الدائم الثاني في أوروبا (بعد سيرك بينزا). تأسست في عام 1876 من قبل رواد الأعمال والفنانين في السيرك، الأخوين نيكيتين. وهي منشأة فيدرالية تابعة لوزارة الثقافة في الاتحاد الروسي.

هذا الكود هو مزيج من HTML و css وجافا سكريبت لإنشاء تأثير بطاقات تفاعلية (Interactive Cards). سأشرح كل جزء من الكود بالتفصيل:

HTML (الهيكل الأساسي):

• <section class="card-container">: هذا العنصر يمثل الحاوية الرئيسية التي تحتوي على البطاقات.
• <div class="card"> : كل بطاقة تحتوي على وجهين (face-1 و face-2).
• face-1: الوجه الأول من البطاقة، يحتوي على صورة وعنوان.
• face-2: الوجه الثاني من البطاقة، يحتوي على نص وصفي.
• <img> : الصورة التي تظهر في الوجه الأول من البطاقة.
• <h3>: العنوان الذي يظهر في الوجه الأول من البطاقة.
• <p>: النص الوصفي الذي يظهر في الوجه الثاني من البطاقة.

css (التصميم والتنسيق):

• .card-container: الحاوية الرئيسية للبطاقات. يتم تعيين خلفية لها وتحديد أبعادها وتنسيقها باستخدام Flexbox لتوسيط البطاقات.
• .card-container:after: طبقة شبه شفافة تُضاف فوق الخلفية لتعتيمها قليلاً.
• .card: كل بطاقة تحتوي على وجهين. يتم تحديد عرض البطاقة وارتفاعها.
• .face: الوجه العام للبطاقة، يتم تحديد ارتفاعه وانتقالاته (transitions) لإنشاء تأثيرات سلسة.
• .face-1: الوجه الأول من البطاقة، يتم تحريكه لأسفل قليلاً عند التحميل، وعند التمرير فوق البطاقة (hover) يتم إعادته إلى موضعه الأصلي.
• .face-2: الوجه الثاني من البطاقة، يتم إخفاؤه في البداية (opacity: 0) وعند التمرير فوق البطاقة يتم إظهاره وتحريكه إلى موضعه الأصلي.
• .card:hover .face-1: عند التمرير فوق البطاقة، يتم إزالة التأثيرات التي تم تطبيقها على الوجه الأول.
• .card:hover .face-2: عند التمرير فوق البطاقة، يتم إظهار الوجه الثاني وتحريكه إلى موضعه الأصلي.
• .card:nth-child(n):hover .face-2: يتم تحديد ارتفاع الوجه الثاني بناءً على محتواه باستخدام متغيرات css (--face_height_n).
• @media screen and (max-width: 696px): استعلام وسائط (Media Query) لتعديل التنسيقات على الشاشات الصغيرة.

JavaScript (الوظائف التفاعلية):

• let card = document.querySelectorAll(".card");: يتم تحديد جميع البطاقات باستخدام querySelectorAll.
• for( let i = 1; i <= card.length; i++ ){ ... }: يتم تكرار عملية على كل بطاقة.
• document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px");: يتم حساب ارتفاع الوجه الثاني (face-2) لكل بطاقة وتعيينه كمتغير css (--face_height_n). هذا المتغير يستخدم لاحقًا في css لتحديد ارتفاع الوجه الثاني عند التمرير فوق البطاقة.

التأثير العام:

• عند التمرير فوق البطاقة (hover)، يتم تحريك الوجه الأول (face-1) إلى موضعه الأصلي وإظهار الوجه الثاني (face-2) مع تحريكه إلى موضعه الأصلي أيضًا.
• يتم حساب ارتفاع الوجه الثاني ديناميكيًا بناءً على محتواه باستخدام JavaScript مما يضمن أن البطاقة تتوسع بشكل صحيح لعرض المحتوى بالكامل.

الاستجابة للتغيرات في حجم الشاشة:

• يتم تعديل التنسيقات على الشاشات الصغيرة باستخدام Media Query لضمان أن البطاقات تظهر بشكل مناسب على جميع الأجهزة.

الاستخدام العملي:

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

1. JavaScript

   
   let card = document.querySelectorAll(".card"); 
   for( let i = 1; i <= card.length; i++ ){ 
   	document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px"); 
   }	
   

2. HTML

   
   <section class="card-container">
   	<div class="card">
   		<div class="face face-1">
   			<img src="https://atuin.ru/demo/i/saratov-1.jpg" alt="">
   			<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">حديقة شتوية</font></font></h3>
   		</div>
   		<div class="face face-2">
   				<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">معهد ساراتوف الحكومي للموسيقى يحمل اسم L.V. معهد سوبينوفا (SGC) هو مؤسسة تعليمية موسيقية عليا في ساراتوف، وهو المعهد الموسيقي الثالث في روسيا. تأسست سنة 1912 على أساس مدرسة للموسيقى.</font></font></p>					
   		</div>
   	</div>
   	<div class="card">
   		<div class="face face-1">
   			<img src="https://atuin.ru/demo/i/saratov-2.jpg" alt="">
   			<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">الرافعات</font></font></h3>
   		</div>
   		<div class="face face-2">
   				<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المجمع التذكاري "الرافعات" في حديقة النصر على جبل سوكولوفايا في ساراتوف هو نصب تذكاري لسكان ساراتوف الذين لقوا حتفهم خلال الحرب الوطنية العظمى 1941-1945. المجمع التذكاري "الرافعات"، أحد رموز ساراتوف.</font></font></p>
   				<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">المجمع التذكاري "الرافعات" في حديقة النصر على جبل سوكولوفايا في ساراتوف هو نصب تذكاري لسكان ساراتوف الذين لقوا حتفهم خلال الحرب الوطنية العظمى 1941-1945. المجمع التذكاري "الرافعات"، أحد رموز ساراتوف.</font></font></p>           
   		</div>
   	</div>		
   	<div class="card">
   		<div class="face face-1">
   			<img src="https://atuin.ru/demo/i/saratov-3.jpg" alt="">
   			<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">سيرك</font></font></h3>
   		</div>
   		<div class="face face-2">
   				<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">سيرك ساراتوف الذي يحمل اسم الأخوين نيكيتين هو سيرك في ساراتوف، وهو السيرك الدائم الثاني في أوروبا (بعد سيرك بينزا). تأسست في عام 1876 من قبل رواد الأعمال والفنانين في السيرك، الأخوين نيكيتين. وهي منشأة فيدرالية تابعة لوزارة الثقافة في الاتحاد الروسي.</font></font></p>
   		</div>
   	</div> 	
   </section>
   

3. css

   
   .card-container {
       width: 100%;
   	position: relative;
       background: url(https://atuin.ru/demo/i/saratov-0.jpg);
   	background-size: cover;
   	background-position: 50% 50%;
       display: flex;
   	flex-wrap: wrap;
       justify-content: center;
       align-items: center;
   	align-content: center;	
   	height: 500px;
   	margin: 20px 0;
   }
   .card-container:after {
   	content: "";
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   	background: rgba(0,0,0,0.5);
   }
   .card-container .card {
   	margin: -20px 20px;
   	width: 300px;
   }
   .card-container .card .face {
       width: 100%;
   	height: 200px;
       transition: 0.5s;
   	background: #FFF;
   	overflow: hidden;
   }
   .card-container .card .face-1 {
       position: relative;
       z-index: 2;
       transform: translateY(50px);
   	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
   }
   .card-container .card:hover .face-1 {
       transform: translateY(0);
   }
   .card-container .card .face-1 img {
   	filter: brightness(0.8);
       width: 100%;
   	height: 100%;
   	object-fit: cover;
   	transition: 0.5s;
   }
   .card-container .card:hover .face-1 img {
       filter: brightness(1)
   }
   .card-container .card .face-1 h3 {
       padding: 10px 0;
   	margin: 0;
   	position: absolute;
   	bottom: 0;
   	left: 0;
   	background: rgba(0,0,0,0.5);
   	color: #FFF;
   	width: 100%;
       color: #fff;
       text-align: center;
   	font-family: 'Roboto', sans-serif;
   	text-transform: uppercase;
   	font-size: 18px;
   	letter-spacing: 1px;
   }
   .card-container .card .face-2 {
       position: relative;
   	z-index: 1;
   	opacity: 0;
       background: #fff;
       padding: 20px 20px 10px;
       box-sizing: border-box;
   	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
       transform: translateY(-100px);
   	height: 100px;
   	transition: 0.5s;
   }
   .card-container .card:hover .face-2 {
       transform: translateY(0);
   	opacity: 1;
   }
   .card-container .card:nth-child(1):hover .face-2 {
   	height: var(--face_height_1);
   }
   .card-container .card:nth-child(2):hover .face-2 {
   	height: var(--face_height_2);
   }
   .card-container .card:nth-child(3):hover .face-2 {
   	height: var(--face_height_3);
   }
   .card-container .card .face-2 p {
       margin: 0;
       padding: 0 0 10px;
   	font-size: 15px;
   	line-height: 1.3;
   	font-family: Verdana, sans-serif; 
   }
   @media screen and (max-width: 696px) {
   	.card-container {
   		margin: 140px 0;
   	}
   }