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

47 comments

  • 밑슴 밑슴

    Hello! Someone in my Facebook group shared this website with us so I came to give it a look.
    I'm definitely enjoying the information. I'm book-marking and will be
    tweeting this to my followers! Exceptional blog and terrific style and design.

    Domingo, 12 Junio 2022 04:02 Comment Link
  • 카지노 사이트 카지노 사이트

    of course like your website but you have to check the spelling on quite a few of your posts.
    A number of them are rife with spelling problems and I to find it very
    troublesome to tell the reality then again I'll surely come back again.

    Domingo, 12 Junio 2022 01:28 Comment Link
  • https://grilledturbot27.blogspot.com/ https://grilledturbot27.blogspot.com/

    This design is incredible! You obviously know
    how to keep a reader entertained. Between your wit and
    your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful
    job. I really enjoyed what you had to say, and more than that, how you presented it.

    Too cool!

    Sábado, 11 Junio 2022 12:40 Comment Link
  • microtouch solo titanium microtouch solo titanium

    Hello are using Wordpress for your site platform? I'm new to the blog world but I'm trying
    to get started and set up my own. Do you need
    any coding knowledge to make your own blog? Any help
    would be greatly appreciated!

    Sábado, 11 Junio 2022 12:18 Comment Link
  • https://coldroastfillet32.blogspot.com/ https://coldroastfillet32.blogspot.com/

    Thank you for any other great article. The place else
    could anyone get that type of information in such an ideal method
    of writing? I've a presentation next week, and I'm at the look for such info.

    Sábado, 11 Junio 2022 11:53 Comment Link
  • 밑슴 밑슴

    Wonderful article! We are linking to this great article
    on our website. Keep up the great writing.

    Sábado, 11 Junio 2022 11:37 Comment Link
  • 우리카지노 우리카지노

    For newest information you have to go to see internet and on web I found this web page
    as a finest website for latest updates.

    Sábado, 11 Junio 2022 09:04 Comment Link
  • 샌즈카지노 보증금 2억원 샌즈카지노 보증금 2억원

    I really like your blog.. very nice colors & theme.
    Did you make this website yourself or did you hire someone to do it
    for you? Plz respond as I'm looking to create my own blog and would like to know where
    u got this from. cheers

    Sábado, 11 Junio 2022 05:43 Comment Link
  • 메리트카지노 메리트카지노

    We're a group of volunteers and opening a brand new scheme in our community.
    Your website provided us with useful information to work on. You have done an impressive process and our whole neighborhood shall be
    grateful to you.

    Sábado, 11 Junio 2022 03:48 Comment Link
  • sm 카지노 sm 카지노

    Hi! This post could not be written any better!
    Reading this post reminds me of my good old room mate!
    He always kept chatting about this. I will forward this page to him.
    Pretty sure he will have a good read. Many thanks
    for sharing!

    Sábado, 11 Junio 2022 03:09 Comment Link

Leave a comment

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

back to top