پرش به محتوا 
در این آموزش از آکادمی تیچرنت یاد می‌گیرید که چگونه یک هدر تعاملی و خلاقانه (Interactive Hero Section Design) را در المنتور طراحی کنید. با استفاده از CSS و JavaScript، جلوه‌های ویژه و انیمیشن‌های جذابی به بخش هدر اضافه می‌کنید تا تجربه کاربری بهتری ایجاد شود. این آموزش به شما کمک می‌کند تا بدون نیاز به افزونه‌های اضافی، یک هدر پویا و حرفه‌ای بسازید که واکنش‌گرا و کاربرپسند باشد.
کدهای استفاده شده در آموزش طراحی بخش تعاملی خلاقانه
کد CSS برای بخش اصلی:
.watch-section{ -webkit-transition: all 1s !important; transition: all 1s !important }کد CSS برای تصاویر:
selector{ position: absolute; left: 0; bottom: -10vh; width: 160px; transform: translateX(300%); } selector img{ cursor: pointer; transition: 0.5s; } selector img:hover{ transform: translateY(-10px) } کد جاوا اسکریپت:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> var $ = jQuery; $(document).ready(function(){ $('[data-vincent]').on('click', function(){ var vincent = $(this).attr('data-vincent'); var bColor = $(this).attr('data-color'); $('.watch img').attr('src', vincent).attr('srcset', ''); $(".watch-section").css("background-color", bColor); }); }); </script>کد ویژگی ها:
data-vincent|image-url data-color|color-code
