NSP GK4 - Slider: Change Animation

Hi,

i'm using the module style "gk_the_real_design" , want to change the css3 animation (style.css) and can't get it to work.
don't want that text and image transist from left and right, just want a simple animation without preloader and just fading in with opacity from 0 to 1.0.

can somebody please post the css code?

Thanks!

Code: Select all

.gkIsWrapper-gk_the_real_design { position:relative; width:100%; margin-bottom:-5px; }
.gkIsWrapper-gk_the_real_design .gkWrap,
.gkIsWrapper-gk_the_real_design .gkIsSlides { position:relative; overflow:hidden; }
.gkIsWrapper-gk_the_real_design .gkIsSlide { position:absolute; right: -999px; bottom: -999px; }
.slide-links .gkIsSlide { cursor:pointer; }
.gkIsWrapper-gk_the_real_design .gkIsImage { overflow:hidden; position: relative; width: 100%; }
.gkIsWrapper-gk_the_real_design .gkIsTextData { display:none; }
.gkIsWrapper-gk_the_real_design .gkIsPreloader { position:absolute; z-index:128; top:0; left:0; width:100%; height:100%; }
.gkIsWrapper-gk_the_real_design .gkIsPreloader span { -webkit-transition: opacity 0.05s ease-out, margin-top 0.05s ease-out, font-size 0.05s ease-out; -moz-transition: opacity 0.5s ease-out, margin-top 0.05s ease-out, font-size 0.05s ease-out; -o-transition: opacity 0.05s ease-out, margin-top 0.05s ease-out, font-size 0.05s ease-out; transition: opacity 0.05s ease-out, margin-top 0.05s ease-out, font-size 0.05s ease-out; margin-top: -50%; opacity: 0; font-size: 1px; color: #fff; display: block; text-align: center; }
.gkIsWrapper-gk_the_real_design .gkIsPreloader span.loading { font-size: 12px; margin-top: 15%; opacity: 1.0; }
.gkIsWrapper-gk_the_real_design .gkIsPreloader span.loaded { font-size: 1px; opacity: 0; margin-top: 50%; }

.gkIsWrapper-gk_the_real_design .gkHeaderBg { width: 100%; background: url('images/is_bg.jpg') no-repeat center 0 transparent; }
.gkIsWrapper-gk_the_real_design .gkIsInterface { background: transparent url('images/is_shadow.png') no-repeat center bottom; height: 145px; width: 100%; }
.gkIsWrapper-gk_the_real_design .gkIsInterface ul { padding-top: 30px; text-align: center; }
.gkIsWrapper-gk_the_real_design .gkIsInterface ul li { width: 17px; height: 17px; background: transparent url('images/is_pagination.png') no-repeat 0 bottom; margin-right: 8px; display: inline-block; text-indent: -999em; cursor: pointer; }
.gkIsWrapper-gk_the_real_design .gkIsInterface ul li.active { background-position: 0 0; }

.gkIsWrapper-gk_the_real_design .gkIsTextTitle { height: auto; position: absolute; float: left; z-index: 127;color:#e0dac9; line-height:30px; font-size: 30px; left: -999px; top: -999px; text-shadow: 2px 2px  3px #000; font-family:"Courier New", Courier, monospace;}
.gkIsWrapper-gk_the_real_design .gkIsTextTitle a { text-decoration: none;color:#e0dac9; text-shadow: 2px 2px 3px #000; }
.gkIsWrapper-gk_the_real_design .gkIsTextTitle a:hover {color:#e0dac9; text-shadow: 2px 2px  3px #000; }

Hi

Do You mean Image Show GK4 module ? Please show me Your site.

Hi,

sorry i mean Image Show GK4. have send all the information you need via email.

Hi

To remove preload add this css:

Code: Select all

.gkIsWrapper-gk_the_real_design .gkIsPreloader {
    display: none;
}


About sliding I'm not sure, because it's comming from javascript not CSS3. Please send an ftp access one more time. It was not attached to mail, so I'll send it to programmers asking for help.

Hi

Access received and send to programmers.

Hi

Sorry, but this is not an easy task. This is what programmers answered:

Code: Select all

it is impossible without rewriting the animation script. Generally it demands all

    new Fx.Tween(slides[0], {property:'right', duration: $G['anim_speed']}).start($G['image_x']);   
                    new Fx.Tween(slides[0], {property:'bottom', duration: $G['anim_speed']}).start($G['image_y']);

                    new Fx.Tween(textBlocks[0], {property:'left', duration: $G['anim_speed']}).start($G['text_x']);
                    new Fx.Tween(textBlocks[0], {property:'top', duration: $G['anim_speed']}).start($G['text_y']);

to opacity animation instrad of left+position. Sorry but this is huge customization issue, instead of this client should use some different IS style.