معاينة حية للاضافة
معاينة
وأخيرا تقوم بحفض القالب ومبروك عليك الاضافة, الى هنا نكون وصلنا الى نهاية هذا الموضوع نتمنى ان تنال الاضافة اعجابكم ورمضان مبارك..
المصدر نكهة التقنيةطريقة التركيب
- أولا عليك الانتقال الى لوحة تحكم قالب مدونتك
- ثم الى المظهر --> تحرير 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
- وضع اكواد Html التالية اسفله مباشرة
<section class='parallax' id='parallax'>
<h2>مرحبا يا رمضان</h2>
<p>نكهة التقنية تتمنى لكل متابعيها رمضان مبارك سعيد وكل عام وانتم لله اقرب</p>
<div class='arrow_down bounce'><img alt='down' height='60' src='https://3.bp.blogspot.com/-HJTeFvBoI8Y/WRwS6wxAnKI/AAAAAAAArIc/-QlF5qgEi7AKTZxNnm2TRpTnfx4VKKOEQCLcB/s1600/chevron-double-down%2B%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>
وأخيرا تقوم بحفض القالب ومبروك عليك الاضافة, الى هنا نكون وصلنا الى نهاية هذا الموضوع نتمنى ان تنال الاضافة اعجابكم ورمضان مبارك..
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).