خرید هاست ارزان در تهران

یک افکت جالب برای نمایش مطالب در سایت

از این افکت جالب که کدهای آن در زیر درج شده می توانید جهت نمایش دادن مطالب در سایت استفاده نمایید.

کدهای HTML:

Outstanding Trading
We provide our traders with great tools such as the Dow Jones Newswire, Trading Central & our MT4 Booster Pack.

Zero to Hero
We’ve developed outstanding trading education systems to take you from zero to hero trading.
SHOW ME MORE We Speak YourThanks to an amazingly diverse team spread across 4 continents, we actually speak your language. EducationWe provide our traders with great tools such as the Dow Jones Newswire, Trading Central & our MT4 Booster Pack.ToolsWe’ve developed outstanding trading education systems to take you from zero to hero trading.Established InWe provide our traders with great tools such as the Dow Jones Newswire, Trading Central & our MT4 Booster Pack.

کدهای CSS:
body{margin: 0;}.bg-content3-4{height: 133vh;/*background: linear-gradient(-135deg , #290849 50% 50%, #fff 50% 50%);*/background: url(spinner-right-colored.png);display:block;text-align:center;background-repeat: no-repeat;background-size: cover;background-position: 100% 100%;}.content3-4{position: relative;}.content3-4 p{font-size: 16px;}.left-content{color: #CCCCCC;}.right-content{color: #290849;}.addcolor{color: #CCCCCC;}.removecolor{color: #290849;}.bac-show-more{cursor: pointer;display: inline-block;text-align: center;width: 230px;height: 230px;line-height: 196px;border-radius: 50%;position: absolute;top: -867px;bottom: 0;left: 0;right: 0;margin: auto;border-bottom: 3px solid #290849;border-top: 3px solid #ECB602;border-left: 3px solid #290849;border-right: 3px solid #ECB602;font-size: 20px;font-weight: bold;padding: 6px;-ms-transform: rotate(-12deg);transform: rotate(-12deg);}.btn-show-more{padding: 12px;border-radius: 50%;background: #ECB602;width: 205px;height: 207px;-ms-transform: rotate(12deg);transform: rotate(12deg);}.rotate-rigth{transition: 1s;transform: rotate(12deg);}.rotate-center{transition: 1s;transform: rotate(-12deg);}.rotate-left{transition: 1s;transform: rotate(-32deg);}.left-content{position: absolute;top: -797px;right: 50px;width: 44%;}.right-content{position: absolute;bottom: 57px;left: 50px;width: 44%;}.item{ display:none; }
کدهای JS:

var dgr = 0;var counter = 0;$(“.bac-show-more”).click(function(){dgr = dgr + 180;$(‘.bg-content3-4’).attr(‘style’,’transform: rotate(‘+dgr+’deg);transition: 1s’);
var all_item_number = 0;$(“.item”).each(function(){all_item_number++;});
$(‘.right-content’).hide(500);$(‘.left-content’).hide(500);
counter++;var content_one = $(‘#item-‘+counter).html();$(‘.right-content’).html(content_one);$(‘.right-content’).show(500);counter++;var content_second = $(‘#item-‘+counter).html();$(‘.left-content’).html(content_second);$(‘.left-content’).show(500);if(counter >= all_item_number){counter = 0;}
});
var runAllow = true;
$(“.bac-show-more”).mouseenter(function () {var point = ‘center’;var direction = ‘left’;runAllow = true;$(“.bac-show-more”).addClass(‘rotate-rigth’);
var intrvl = setInterval(function () {if(runAllow){if(point == ‘center’){if(direction == ‘left’){point = ‘left’;}else{point = ‘right’;}$(“.bac-show-more”).addClass(‘rotate-center’);$(“.bac-show-more”).removeClass(‘rotate-left’);$(“.bac-show-more”).removeClass(‘rotate-rigth’);}else if(point == ‘left’){point = ‘center’;direction = ‘right’;$(“.bac-show-more”).addClass(‘rotate-left’);$(“.bac-show-more”).removeClass(‘rotate-rigth’);$(“.bac-show-more”).removeClass(‘rotate-center’);}else if(point == ‘right’){point = ‘center’;direction = ‘left’;$(“.bac-show-more”).addClass(‘rotate-rigth’);$(“.bac-show-more”).removeClass(‘rotate-left’);$(“.bac-show-more”).removeClass(‘rotate-center’);}
}else{clearInterval(intrvl);}}, 1000);});
$(“.bac-show-more”).mouseleave(function(){runAllow = false;$(“.bac-show-more”).removeClass(‘rotate-rigth’);$(“.bac-show-more”).removeClass(‘rotate-left’);$(“.bac-show-more”).removeClass(‘rotate-center’);clearInterval(intrvl);});
$(‘.bac-show-more’).click(function(){if ($(‘.right-content’).hasClass(“addcolor”)) {$(‘.right-content’).removeClass(‘addcolor’);}else {$(‘.right-content’).addClass(‘addcolor’);}
if ($(‘.left-content’).hasClass(“removecolor”)) {$(‘.left-content’).removeClass(‘removecolor’);}else {$(‘.left-content’).addClass(‘removecolor’);}});