Customizing css3 for "Our team" transition

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sun Jan 20, 2013 11:51 am
Reply with quote
Report this post
Hi! In Startup homepage we have a nice css3 transition in the module "Our team". I think it is activated by scrolling the page. I would like to use it in an article as well, the problem is that if I don't scroll the page the transition doesn't start so the user thinks the article is empty. Is it possible to make it start on load? Maybe it's not really related to the template but it's a CSS3 thing, anyway I would really appreciate if you guys could give me an help. Here is the code, thank you a lot in advance!

Code: Select all
<div class="gkTeam" data-count="4">
    <figure data-animation="prodotti" data-delay="0">
    <a href="#"><img src="images/demo/ape.jpg" alt="" /></a>
    <figcaption><a href="#">Ape-rta</a></figcaption>
    </figure>

   <figure data-animation="prodotti" data-delay="100">
    <a href="#"><img src="images/demo/dina.jpg" alt="" /></a>
    <figcaption><a href="#">Dina & Co</a></figcaption>
    </figure>

    <figure data-animation="prodotti" data-delay="200">
    <a href="#"><img src="images/demo/sherlok.jpg" alt="" /></a>
    <figcaption><a href="#">Sherlokk</a></figcaption>
    </figure>

    <figure data-animation="prodotti" data-delay="300">
    <a href="#"><img src="images/demo/cubo.jpg" alt="" /></a>
    <figcaption><a href="#">Il Quid</a></figcaption>
    </figure>

    <figure data-animation="prodotti" data-delay="400">
    <a href="#"><img src="images/demo/vasi.jpg" alt="" /></a>
    <figcaption><a href="#">Gemma</a></figcaption>
    </figure>

    <figure data-animation="prodotti" data-delay="500">
    <a href="#"><img src="images/demo/ernesto.jpg" alt="" /></a>
    <figcaption><a href="#">Manolesto</a></figcaption>
    </figure>

    <figure data-animation="prodotti" data-delay="600">
    <a href="#"><img src="images/demo/andiamo.jpg" alt="" /></a>
    <figcaption><a href="#">"Andiamo"</a></figcaption>
    </figure>

    </div>
User avatar
Junior Boarder

GK User
Sun Jan 20, 2013 12:41 pm
Reply with quote
Report this post
Hi,

In this case you can try to add using script the "loaded" class to the animated element when the onLoad event is triggered :)
User avatar
Administrator

GK User
Sun Jan 20, 2013 4:59 pm
Reply with quote
Report this post
dziudek wrote:Hi,

In this case you can try to add using script the "loaded" class to the animated element when the onLoad event is triggered :)


Hi dziudek! Thank you for your reply...I'm afraid it sounds like cinese language to me!!I'm not that good in css3! The only things I know is that the animation is connected with these 2 classes in gk.stuff.css but honestly I don't understand how to link the event onload to them! Could you be so kind to be more specific with the tasks I have to do? Thank you for your patience!

Code: Select all
}

*[data-animation="prodotti"] {
    filter: alpha(opacity=0);
    left: 50%;
    opacity: 0;
    position: relative;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
    -webkit-transition: -webkit-transform .2s ease-out, left .3s ease-out, opacity .3s ease-out;
       -moz-transition:    -moz-transform .2s ease-out, left .3s ease-out, opacity .3s ease-out;
         -o-transition:      -o-transform .2s ease-out, left .3s ease-out, opacity .3s ease-out;
            transition:         transform .2s ease-out, left .3s ease-out, opacity .3s ease-out;
}
*[data-animation="prodotti"].loaded {
    filter: alpha(opacity=100);
    left: 0;
    opacity: 1;
    -webkit-transform: scale(1.0);
       -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
         -o-transform: scale(1.0);
            transform: scale(1.0);
}
User avatar
Junior Boarder

GK User
Mon Jan 21, 2013 9:34 am
Reply with quote
Report this post
In general you have to add at the end of the gk.scripts.js file the following code:

Code: Select all
window.addEvent('load', function() {
document.getElements('SELECTOR').addClass('loaded');
});


where SELECTOR is a selector for your elements to animate i.e. ".myClass"
User avatar
Administrator

GK User
Mon Jan 21, 2013 7:12 pm
Reply with quote
Report this post
dziudek wrote:In general you have to add at the end of the gk.scripts.js file the following code:

Code: Select all
window.addEvent('load', function() {
document.getElements('SELECTOR').addClass('loaded');
});


where SELECTOR is a selector for your elements to animate i.e. ".myClass"


Dziudek, thank you for your help. I have tried different possibilities with no success. Which is my selector?
I have tried to search for it around here, sorry for the confusion:

1. <div class="gkTeam"> from the article html

2. *[data-animation="prodotti"] from gk.stuff.css

3. gkAddClass(element, 'loaded', false); from gk.scripts.js

I have published the website so you can see my page:

http://www.battistarea.it/index.php/col ... a-giardino

thank you for your INFINITE patience!
User avatar
Junior Boarder

GK User
Mon Jan 21, 2013 10:44 pm
Reply with quote
Report this post
Your selector is:

Code: Select all
.gkTeam figure
User avatar
Administrator

GK User
Tue Jan 22, 2013 9:59 am
Reply with quote
Report this post
dziudek wrote:Your selector is:

Code: Select all
.gkTeam figure


I see Dziudek, now it works perfectly! Thank you ;)
Unfortunately I have seen it affects all the animations in the homepage (and I loved them so I would like to keep the previous behavior :unsure: ). I think I can do it by duplicating that class with another name. Is it too complicated or do you think I can manage it with your indications? If you could tell me where to operate I think I can do it and get a great work! Thank youu
User avatar
Junior Boarder

GK User
Tue Jan 22, 2013 11:09 am
Reply with quote
Report this post
Then you can try to use longer selector like:

Code: Select all
#gkMainbody .gkTeam figure
User avatar
Administrator

GK User
Tue Jan 22, 2013 11:18 am
Reply with quote
Report this post
dziudek wrote:Then you can try to use longer selector like:

Code: Select all
#gkMainbody .gkTeam figure


Dziudek fantastic it works fine!!!!!! :D
Thank you very much for your precious help!!
User avatar
Junior Boarder


cron