Advertencia
  • JUser: :_load: No se ha podido cargar al usuario con 'ID': 187
Menu

Header animation

The header animation is based on our simple CSS animation engine, which uses a simple JavaScript code

Our simple animation engine is based on the data-* attributes.

For creating animation please creata a container with class gk-animation and put elements inside it. We recommend to style these elements in the css/gk.stuff.css file.

You have to specify for every element at least two attributes: data-start and data-end. The first attribute contains starting properties for the element and these properties should be written with units. The second attribute specify which properties will be animated and what will be their final value (without units).

There are also two additional attributes: data-time and data-delay. The data-time attribute specify the time of the animation in miliseconds. The second attribute specify the time of delay for animation of the specific element (of course in the miliseconds).

The very important is fact that the content of the data-start attribute specify the start position of the animated element and all elements should be hidden at start using in example {'opacity': 0} at the data-start attribute.

Let's analyze a simple example:

<div class="gk-animation" data-height="530">
 <div class="gk-animation-wrap">
   <h2 class="gk-scale-up" data-start="{opacity:1}" data-end="{opacity:1}" data-delay="200" data-time="500">Festival 21 jul. - 27 Jul. 2020</h2>
   <h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Sayary Llaqta</h1>
   <div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
 </div>
</div>

As you can see the animation engine needs two basic wrappers - gk-animation and gk-animation-wrap. The animation will start with using opacity for animation after 200ms and with duration 500ms for the h2 element. Then (after 400ms - it is a difference between date-delay for both elements) animation will start for the h1 element also with duration 500ms. At the end the .gk-stars element will be animated.

We have also included additional class gk-scale-up which can be used for elements which will be scaled from 0 to 100% of their original size using the CSS3 transform property. We have to move this animation to the CSS code due problems with prefixed properties in the MooTools code.

It is worth to mention that some elements can be also animated in two other states of the animation - the gk-animation container changes his CSS classes - after loading the page the "loaded" class is added and after displaying the whole container the "displayed" class is added. We have used this mechanism for animating the .gka-background element in our header animation.

Responsive layout

Please remember that you have to scale down all your header elements for the tablet and mobile devices - please use for it the css/tablet.css and css/mobile.css files.

Countdown

We have implemented our own implementation of the countdown. It is very simple to implement:

<div 
    class="gk-jscounter gk-scale-up" 
    data-dateend="16-7-2020" 
    data-timeend="19:42" 
    data-timezone="+2" 
    data-start="{opacity:13-07-2020}" 
    data-end="{opacity:1}" 
    data-delay="900" 
    data-time="500"
>
"Para seguir cantando"
</div>

Te idea of the counter is simple - the content of the gk-jscounter element will be displayed when the counting will be finished. To specify the time for countdown you have to specify it in the two attributes - data-dateend and data-timeend. The first attribute is used to specify the end date (in format D-M-Y) and the second attribute is used to specify the end time (in format h:m).

Very important fact - if you're using not the UTC time, please specify the data-timezone attribute - it will guarantee that the time will be calculated correctly for all users.

The rest of the data-* attributes was described in the previous paragraphs as a part of the animation engine.

Last modified onJueves, 16 Julio 2020 01:01

More in this category: « Typography

1290 comments

  • Kaine Kaine

    This is really interesting, You're a very skilled blogger.

    I have joined your rss feed and look forward to seeking more of your magnificent post.
    Also, I have shared your site in my social networks!

    Viernes, 09 Febrero 2024 03:56 Comment Link
  • a bathing ape a bathing ape

    I want to show some thanks to this writer for rescuing me from this particular difficulty. After surfing through the the web and obtaining recommendations which were not powerful, I was thinking my entire life was gone. Being alive without the approaches to the issues you've sorted out by way of this report is a crucial case, and ones which could have in a negative way damaged my career if I hadn't encountered the blog. Your own competence and kindness in maneuvering every aspect was valuable. I don't know what I would've done if I hadn't discovered such a subject like this. I'm able to at this point relish my future. Thank you so much for this impressive and result oriented help. I won't think twice to endorse the sites to anyone who should get direction about this matter.

    Miércoles, 24 Enero 2024 00:18 Comment Link
  • fear of god fear of god

    I am only commenting to make you understand what a notable encounter my daughter enjoyed reading your webblog. She even learned plenty of pieces, not to mention how it is like to have an ideal teaching style to make a number of people effortlessly grasp certain very confusing subject matter. You really surpassed people's desires. Many thanks for offering those valuable, dependable, informative and as well as easy guidance on your topic to Kate.

    Martes, 23 Enero 2024 22:14 Comment Link
  • golden goose mid star sneakers golden goose mid star sneakers

    I抎 should verify with you here. Which isn't something I normally do! I take pleasure in reading a publish that will make people think. Additionally, thanks for allowing me to remark!

    Martes, 23 Enero 2024 18:16 Comment Link
  • off white outlet off white outlet

    My wife and i ended up being very lucky Chris managed to round up his preliminary research through the entire ideas he received in your weblog. It's not at all simplistic to just find yourself giving away key points which usually most people have been making money from. We really grasp we now have the writer to give thanks to for this. The type of illustrations you made, the straightforward web site menu, the friendships you can assist to instill - it's got mostly incredible, and it is letting our son and us reckon that the article is entertaining, which is quite pressing. Thank you for all!

    Miércoles, 17 Enero 2024 01:03 Comment Link
  • hermes outlet online hermes outlet online

    I must show my affection for your kindness for men and women who require help with your matter. Your special commitment to getting the solution throughout ended up being especially invaluable and have in most cases allowed people just like me to achieve their aims. Your personal invaluable recommendations signifies a great deal to me and substantially more to my office workers. Regards; from each one of us.

    Martes, 16 Enero 2024 23:27 Comment Link
  • goyard bag goyard bag

    Needed to compose you a little bit of word in order to thank you as before on your lovely tactics you have documented here. It has been certainly particularly open-handed with you to convey publicly just what many individuals would've offered as an e book to generate some dough on their own, most notably seeing that you might have done it if you desired. These tactics likewise worked to become a easy way to fully grasp that other people online have the same interest just like my very own to realize way more concerning this problem. I am sure there are thousands of more fun situations ahead for folks who scan your blog.

    Martes, 16 Enero 2024 22:41 Comment Link
  • kyrie shoes kyrie shoes

    I not to mention my pals have been examining the excellent helpful tips located on your web blog and unexpectedly got an awful feeling I never expressed respect to the web blog owner for those strategies. All the guys appeared to be absolutely warmed to see them and already have in reality been making the most of these things. Appreciation for indeed being well accommodating as well as for opting for varieties of fine guides most people are really needing to be aware of. My personal honest regret for not saying thanks to you earlier.

    Martes, 16 Enero 2024 20:39 Comment Link
  • nike dunks nike dunks

    I not to mention my guys happened to be analyzing the excellent recommendations on your site then before long came up with a terrible suspicion I never thanked you for those tips. Those ladies were definitely absolutely glad to see all of them and have certainly been loving these things. We appreciate you getting so thoughtful as well as for deciding on some awesome useful guides most people are really wanting to understand about. My very own honest apologies for not expressing appreciation to you sooner.

    Martes, 16 Enero 2024 19:13 Comment Link
  • bape bape

    I definitely wanted to write down a comment to express gratitude to you for those lovely solutions you are posting at this site. My particularly long internet search has now been recognized with high-quality knowledge to write about with my neighbours. I 'd suppose that most of us site visitors are very much fortunate to exist in a magnificent website with so many perfect professionals with very helpful advice. I feel really grateful to have encountered the website and look forward to so many more fabulous minutes reading here. Thanks once more for a lot of things.

    Martes, 16 Enero 2024 18:48 Comment Link

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

back to top