انیمیشن ورودی جذاب برای وب سایت

سلام دوستان در این آموزش امروز قرار با همدیگه یک انیمیشن ورودی جذاب برای وب سایت در المنتور پرو را طراحی کنیم. برای استفاده از این آموزش شما به المنتور پرو احتیاج دارید. کد های CSS و جاوا اسکریپت را برای شما قرار دادیم تا نیازی به کد نویسی نداشته باشید. ابعاد استفاده شده در این آموزش می تواند بسته به نیاز شما تغییر کنند.ابعادی که در آموزش استفاده شده است صرفا جهت نمایش بهتر این باکس انتخاب شده ، شما می توانید استایل های استفاده شده در آموزش را نسبت به طرح خود شخصی سازی نمایید .

انیمیشن ورودی جذاب برای وب سایت :

از این مدل انیمیشن ورودی جذاب برای وب سایت برای منحصر به فرد شدن طرح های خود میتوان استفاده کنید. لازم به ذکر است که ما در این آموزش از المنتور پرو استفاده کرده ایم و کد های CSS خود را در بخش CSS سفارشی قرار دادیم . لذا شما هم برای سهولت کار بهتر است از نسخه المنتور پرو استفاده نمایید .

المنتور پرو:

این صفحه ساز یکی از محبوب ترین صفحه سازی های وردپرس می باشد. شما می توانید به راحتی افزونه المنتور پرو از مارکت های ایرانی خریداری نمایید.

همچنین برای دریافت تازه ترین آموزش های ما در شبکه های مجازی می توانید ما را در صفحه اینستاگرام دنبال کنید . همچنین از طریق صفحه تماس با ما با مشاورین ما در امر طراحی وب سایت برای کسب و کار خود به صورت رایگان مشاوره بگیرید.

کد های جاوا اسکریپت :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var transitionDelay = 2000

var $ = jQuery
$(document).ready(function(){
$('.drifting-text .elementor-heading-title').html(function (i, html) {
    var chars = $.trim(html).split(' '),
        html = ''
        console.log(chars)
        chars.forEach(function(word){

            var w = ''
            // word.split('').forEach(function(letter){
            //     w += '<span>' + letter + '</span>'
            // })
            html += '<span><span>' + word + '</span></span> '
        })
        console.log(html)
        return html.trim()

})

$('.drifting-text .elementor-heading-title span span').each(function(){
    $(this).css('transition-delay', transitionDelay + 'ms')
    transitionDelay += 50
})
})
$(window).on('load', function(){
    $('body').addClass('loaded')
})




</script>

var transitionDelay = 2000

var $ = jQuery

$(document).ready(function(){

$('.drifting-text .elementor-heading-title').html(function (i, html) {

var chars = $.trim(html).split(' '),

html = ''

console.log(chars)

chars.forEach(function(word){

var w = ''

// word.split('').forEach(function(letter){

// w += '<span>' + letter + '</span>'

// })

html += '<span><span>' + word + '</span></span> '

})

console.log(html)

return html.trim()

})

$('.drifting-text .elementor-heading-title span span').each(function(){

$(this).css('transition-delay', transitionDelay + 'ms')

transitionDelay += 50

})

$(window).on('load', function(){

$('body').addClass('loaded')

})

</script>

کد های CSS :

/* Middle Image Animation */

selector{
    animation-name: none;
    visibility: visible;
}
selector .middle-image img{
    transform: scale(1.5);
    transition: all 2s linear;
    will-change: transform;
}
body.loaded selector.animated .middle-image img{
    transform: scale(1.02);
}
selector .middle-image .elementor-widget-container{
    overflow: hidden;
    transform: scale(2);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all 2s ease-in-out;
    will-change: transform, clip-path;
}
body.loaded selector.animated .middle-image .elementor-widget-container{
    transform: scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Side Image Animation */

selector:not(.animated) .elementor-widget-image:not(.middle-image) .elementor-widget-container,
body:not(.loaded) selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{
    opacity: 0;
    transform: scale(1);
    will-change: opacity, transform;
}
body selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{
    opacity: 1;
    transition: all 0.7s ease-in-out 1.8s;
}

/* Text Animation */

selector:not(.animated) .drifting-text,
body:not(.loaded) selector .drifting-text{
    opacity: 0;
}
selector .drifting-text span{
    display: inline-block;
}
selector .drifting-text span span{
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-in-out;
    will-change: opacity, transform;
}
body.loaded selector.animated .drifting-text span span{
    opacity: 1;
    transform: translateY(0);
}

/* Middle Image Animation */

selector{

animation-name: none;

visibility: visible;

}

selector .middle-image img{

transform: scale(1.5);

transition: all 2s linear;

will-change: transform;

}

body.loaded selector.animated .middle-image img{

transform: scale(1.02);

}

selector .middle-image .elementor-widget-container{

overflow: hidden;

transform: scale(2);

clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);

transition: all 2s ease-in-out;

will-change: transform, clip-path;

}

body.loaded selector.animated .middle-image .elementor-widget-container{

transform: scale(1);

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}

/* Side Image Animation */

selector:not(.animated) .elementor-widget-image:not(.middle-image) .elementor-widget-container,

body:not(.loaded) selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{

opacity: 0;

transform: scale(1);

will-change: opacity, transform;

}

body selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{

opacity: 1;

transition: all 0.7s ease-in-out 1.8s;

}

/* Text Animation */

selector:not(.animated) .drifting-text,

body:not(.loaded) selector .drifting-text{

opacity: 0;

}

selector .drifting-text span{

display: inline-block;

}

selector .drifting-text span span{

opacity: 0;

transform: translateY(20px);

transition: all 1s ease-in-out;

will-change: opacity, transform;

}

body.loaded selector.animated .drifting-text span span{

opacity: 1;

transform: translateY(0);

}

انیمیشن ورودی جذاب برای وب سایت

انیمیشن ورودی جذاب برای وب سایت :

المنتور پرو:

کد های جاوا اسکریپت :

کد های CSS :

دیدگاهتان را بنویسید لغو پاسخ

شماره تماس :

ارتباط از طریق WhatsApp

نشانی الکترونیکی ما :

ارتباط از طریق Telegram