Если вас достали унылые карусельки, с простой картинкой и статичными текстами, и в душе вы желаете оживить все это дело тогда вы попали по адресу.
Не спорю, есть много библиотек для создания анимаций , но зачем подключать лишнее когда можно обойтись тем что под рукой? А под рукой у нас Bxslider (все его знаю. Ты нет? Ты из какой планеты?)
Вот что должно получится.
Не спорю, есть много библиотек для создания анимаций , но зачем подключать лишнее когда можно обойтись тем что под рукой? А под рукой у нас Bxslider (все его знаю. Ты нет? Ты из какой планеты?)
Вот что должно получится.
Полный JS код
$(document).ready(function(){ $('.main-slider').bxSlider({controls:true, onSliderLoad:function(){ Animate(); }, onSlideAfter :function($slideElement, oldIndex, newIndex){ console.log($slideElement.attr('class')); if($slideElement.hasClass('mega')){ Animate(); }else { $('.mega-slider-bg div').each(function(){ $(this).css({opacity:0});}); } } }); }); function Animate(){ //console.log('anim'); var widthScreen = $(window).width(); $('.mega-slider-bg div').each(function(){ $(this).css({ opacity:0}); var mode = $(this).data('mode'); var xfromcenter = $(this).data('xfromcenter'); var speed = $(this).data('speed'); var eleWidth = $(this).width(); var eleHeight = $(this).height(); var delay = $(this).data('delay'); if(mode=='right'){ $(this).css({opacity:1,right:"-"+eleWidth+'px'}); var toX = widthScreen/2 - xfromcenter; $(this).delay(delay).animate({right:toX},speed) } if(mode=='left'){ $(this).css({opacity:1,left:"-"+eleWidth+'px'}); var toX = widthScreen/2 - xfromcenter; $(this).delay(delay).animate({left:toX},speed) } if(mode==='topfadein'){ var margintop = parseInt(jQuery(this).css("margin-top")); $(this).css( {opacity:0, marginTop : margintop-50}); $(this).delay(delay).animate({marginTop : margintop,opacity:1},speed); } }); }
HTML разметка
CSS
.mega-slider-bg { background-position: center; background-image: url(../images/sliderimg/mega-s-bg.png);background-repeat: no-repeat;width: 100%; height: 500px;} .ms-1 {background-image: url(../images/sliderimg/mega-s1.png);background-repeat: no-repeat;width: 66px; height: 90px; position: absolute; margin-top: 193px;right: 579} .ms-2 {background-image: url(../images/sliderimg/mega-s2.png);background-repeat: no-repeat;width: 76px; height: 50px; position: absolute; margin-top: 379px;right: 579} .ms-3 {background-image: url(../images/sliderimg/mega-s3.png);background-repeat: no-repeat;width: 47px; height: 65px; position: absolute; margin-top: 379px;right: 579} .ms-4 {background-image: url(../images/sliderimg/mega-s4.png);background-repeat: no-repeat;width: 96px; height: 141px; position: absolute; margin-top: 191px;} .ms-5 {background-image: url(../images/sliderimg/mega-s5.png);background-repeat: no-repeat;width: 143px; height: 100px; position: absolute; margin-top: 192px;} .ms-t1 { background-image: url(../images/sliderimg/text1.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 75px; position: absolute; margin-top: 0px; } .ms-t2 { background-image: url(../images/sliderimg/text2.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100px; position: absolute; margin-top: 54px; } .ms-t3 { background-image: url(../images/sliderimg/text3.png); background-repeat: no-repeat; background-position: center; width: 100%; height: 100px; position: absolute; margin-top: 106px; }
Комментариев нет:
Отправить комментарий