Animation scrolling

First time, sorry my bad English

Could i disable the animation scrolling?

I had used CSS "gkFeatures gkPerspective" con data-animation and data-delay in a module.

This module is at Header position on Start-up template, and is enable only at home page.
I want the images to be displayed automatically without using the scroll.

thands

Hi

I'm guessing You are talking about Image Show module. Please simply disable autoanimation in this module settings.

No. I'm going to try explain it better.

I have a custom module on header module position. This module shows an images with internal links.


this is the code:

<div class="gkFeatures gkPerspective">
<a class="gkhogar" href="#" data-animation="flip" data-delay="0"><span>Carflor Hogar</span></a>
<a class="gksalud" href="#" data-animation="flip" data-delay="150"><span>Carflor Salud</span></a>
<a class="gkfamilia" href="#" data-animation="flip" data-delay="300"><span>Carflor familia</span></a>
<a class="gkaranevents" href="#" data-animation="flip" data-delay="450"><span>Aran Events</span></a></div>

the animation is showed ok, i like it, but i have a problem... data-animation and data-delay needs i move the wheel of the mouse (scrolling). If i don`t do scrolling, images aren't showed on page, so i only see the background.


Please, see the link... I guess you'll understand better than my bad English

http://www.innovacion.asimex.us

Hi

Please try adding a class "loaded" to each <a> element. This should display images while page is shown.

Thanks teitbite

i did what you say, this is de code for the first div..

<div class="gkFeatures gkPerspective">
<a class="gkhogar" href="#" data-animation.loaded="flip" data-delay="0"><span>Carflor Hogar</span></a>
<a class="gksalud" href="#" data-animation.loaded="flip" data-delay="150"><span>Carflor Salud</span></a>
<a class="gkfamilia" href="#" data-animation.loaded="flip" data-delay="300"><span>Carflor familia</span></a>
<a class="gkaranevents" href="#" data-animation.loaded="flip" data-delay="450"><span>Aran Events</span></a></div>

it show the images without scrolling, but it doesn't show the animation. you can see now the diference between first and second or third div.

i've seen this archive on the template

templates/gk_startup/js/gk.scripts.js
line 88 // animation
lines 89 to 102 ... animation scripts code
line 103 // scroll animation
line 104 to 136 scroll animation scripts code

I suppose if anyone can change this script (or disable scroll animations script) animations will be showed the hole animation when the images are loading.

my idea is the images are showed with their data-animataion and their data-delay selected, but without scrolling, because, in this moment, if user doesn`t scrolling, images are not showed and page is not nice.

Hi

Ok. I will have to ask programmers than. I'm not so good with mootools scripts. Will let You know when they will answer.

The fastest way is to modify this line in script :

Code: Select all

var currentPosition = window.getScroll().y;

to :

Code: Select all

var currentPosition = 1000;

i`ve done whato bkrztuz has said, but there isn`t any changes.

Now, code is this.

Code: Select all

// scroll animations
window.addEvent('scroll', function(e) {
   if(elementsToAnimate.length > 0) {      
      // get the necessary values and positions
      var currentPosition = 1000;
      var windowHeight = window.getSize().y;
      // iterate throught the elements to animate
      for(var i = 0; i < elementsToAnimate.length; i++) {
         if(elementsToAnimate[i][2] < currentPosition + windowHeight + 100) {
            // create a handle to the element
            var element = elementsToAnimate[i][1];
            // check the animation type
            if(elementsToAnimate[i][0] == 'animation') {
               gkAddClass(element, 'loaded', false);
               // clean the array element
               elementsToAnimate[i] = null;
            } else if(elementsToAnimate[i][0] == 'nsp') {
               if(element.getElement('.nspArtScroll1')) {
                  var arts = element.getElement('.nspArtScroll1').getElement('.nspArtPage').getElements('.nspArt');
                  arts.each(function(elm, j) {
                     gkAddClass(elm, 'nsploaded', j);
                  });
               }
               // clean the array element
               elementsToAnimate[i] = null;
            }
         }
      }
      // clean the array
      elementsToAnimate = elementsToAnimate.clean();
   }
});   

Maybe I don't properly understand what effect you want ... All translations need to be loaded at once without scrolling ? So when you have some part which is not visible after site is loaded you can't see the animation ?

Sorry bkrztuk, it could be my english.

i`ll explain the problem from 0.

I have a proyect with startup template. (http://www.innovacion.asimex.us)

In header position, i have chosen a "custom module" with this code. (this is the hole code)

Code: Select all

<div class="gkFeatures gkPerspective">
<a class="gkhogar" href="#" data-animation="flip" data-delay="0"><span>Carflor Hogar</span></a>
<a class="gksalud"  href="#" data-animation="flip" data-delay="150"><span>Carflor Salud</span></a>
<a class="gkfamilia"  href="#" data-animation="flip" data-delay="300"><span>Carflor familia</span></a>
<a class="gkaranevents"  href="#" data-animation="flip" data-delay="450"><span>Aran Events</span></a></div>

<div class="gkFeatures2 gkPerspective">
<a class="gksad" href="#" data-animation="flip" data-delay="0"><span>SAD</span></a>
<a class="gkurgencias" href="#" data-animation="flip" data-delay="150"><span>Urgencias</span></a>
<a class="gkreftutelar" href="#" data-animation="flip" data-delay="300"><span>Tutelar</span></a></div>

<div class="gkFeatures gkPerspective">
<a class="gkhogar" href="#" data-animation="scale" data-delay="0"><span>Carflor Hogar</span></a>
<a class="gksalud" href="#" data-animation="scale" data-delay="150"><span>Carflor Salud</span></a>
<a class="gkfamilia" href="#" data-animation="scale" data-delay="300"><span>Carflor familia</span></a>
<a class="gkaranevents" href="#" data-animation="scale" data-delay="450"><span>Aran Events</span></a></div>

you can see, i have created three diferents div (div1- 4 images, div2- 3 images, div3- 4 images).

this module is header position and home page.

Now, website is...

When you write http://www.innovacion.asimex.us on the url bar you see...
- logo
- main menu
- black background (in header position)
- Text. "Carflor 24 horas..."
- ...

If you touch the wheel of your mouse, and you does scroll down (i don't know how to say in english exactly), you can see ...
- logo
- main menu
- images (custom module in header position) after an animation
- Text "Carflor 24 horas..."
- ...

The problem...

I need to see the custom module in header position with animation, but without scrolling, because if a users dont`t touch the whell of their mouses, they can`t see the images.


Notes:

If i try adding a class "loaded" to each <a> element. This should display images while page is shown. how said teitbite, the imagen is loaded, but nobody can see the animations. (i did that, it doesn´t fix the problem, so i delete the class "loaded" in code).

In other post (Tue Mar 12, 2013 11:59 am), you suggest change the code in script, i did that, but it doesn`t fix the problem. Now line 107 in script is

Code: Select all

var currentPosition = 1000;

i don't know if i can help you more. Of course, I don`t know the solution to the problem. Help, please.

Ok I understand right now. Please send me ftp access via PM and remember to include link to this forum topic. I'll try to help.

Hello,

I have the same wish. On my site i'm using "simplicity" template and price table on the "header" position. So if the user load page he see nothing while he scroll page.
I know if i delete 'gkPriceTableAnimated' from div class i'll get loaded price table, but it will load without animation. It will be not nice so i want it to load through animation after page loaded

Please, tell me about solution

ps: and sorry my english too

Probably there is no easy solution for this because template animations are designed to show on scroll event. Surely it is not possible without custom changes inside template script but please provide me details via PM I'll look at your case.