السلام عليكم ورحمة الله تعالى وبركاته, اليوم قررنا ان ننشر لكم اضافة رمضانية جديدة وحصرية من هاشتاج للمعلوميات والاضافة على شكل هيدر يوضع اعلى المدونة لتظهر للزائر خلال دخوله للمدونة مباشرة, فكرت في هذه الاضافة عند طلب الكثير من المتابعين عن نشر اضافات رمضانية لتزيين المدونات ,نتمنى ان تنال اعجابكم.معاينة حية للاضافة
معاينة
طريقة التركيب
- انتقل الي لوحة تكم قالب مدونتك.
- ثم الي المظهر --> تحرير Html.
- ثم قم بالبحث عن الوسم </head>باستعمال Ctrl+F.
- وضع اكواد Css التالية فوقه مباشرة
<style type='text/css'>
/*<![CDATA[*/
.parallax {
background: url(https://e.top4top.net/p_5132bbkx1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height:100vh;
width:100%;
position:relative;
z-index:9999;
}
.parallax h2 {
text-align: center;
padding: 70vh 0 0;
font-size: 4em;
line-height:1;
color: white;
margin:0;
text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.35);
}
.parallax p {
text-align: center;
padding: 20px 50px 0;
margin:0;
font-size: 2em;
color: white;
text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.35);
}
.parallax .arrow_down{
position:absolute;
width:60px;
height:60px;
bottom:20px;
left:50%;
margin-left:-30px;
font-size:24px;
color:#fff;
}
.parallax .close_parallax{
position:absolute;
width:20px;
height:20px;
top:20px;
right:25px;
font-size:34px;
line-height:1;
color:#fff;
cursor:pointer;
}
.parallax .bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
}
}
@media screen and (max-width:1024px){.parallax h2 {
padding: 60vh 0 0;
font-size: 2em;
}
.parallax p {
font-size: 1em;
}
}
@media screen and (max-width:375px){.parallax h2 {
padding: 50vh 0 0;
}
}
/*]]>*/
</style>
- الان ابحث عن الوسم <body او الوسم <body>
- وضع اكواد Html التالية اسفلة مباشرة.
<section class='parallax' id='parallax'>
<h2>مرحبا يا رمضان</h2>
<p>موقع هاشتاج يتمنى لكم رمضان مبارك وكل عام وانتم بخير</p>
<div class='arrow_down bounce'><img alt='down' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmA0p4h7P3B3R6YTpzbi_6KCz6f8wuQuoHKhm9K7ghn1zhu2KUWwY6kKaMWh13qrHh6JVvisSNqxUMzk2GdIIhtm3MRLcrIDdqqUhtrTRbEtfOtA8t0T1B4OhLbgSnzmchLvkFY5LDh4/s1600/chevron-double-down+%25281%2529.png' width='60'/></div>
<div class='close_parallax' onclick='hideParallax()' title='Close'>&times;</div>
</section>
- وأخيرا ابحث عن الوسم </body> وضع كود الجافا سكريبت هذا فوقه مباشرة.
<script type='text/javascript'>وأخيرا تقوم بحفض القالب ومبروك عليك الاضافة, الى هنا نكون وصلنا الى نهاية هذا الموضوع نتمنى ان تنال الاضافة اعجابكم ورمضان مبارك..
//<![CDATA[
var parallax= document.querySelector(".parallax");
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset,
limit= parallax.offsetTop+ parallax.offsetHeight;
if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {
parallax.style.backgroundPositionY= (scrolledHeight - parallax.offsetTop) /1.5+ "px";
} else {
parallax.style.backgroundPositionY= "0";
}
});
function hideParallax() {
document.getElementById("parallax").style.display = "none";
};
//]]>
</script>
إضافة اكثر من رائعة وجميلة جدا لتزيين المدونات :)
ردحذفاخي ممكن تعمل شرح على القالب المستعمل في هدا الشرح و ايضا القاب يكون متوافق و شكرا
ردحذفشكرا اضافة رائعة
ردحذف