CODEWITHSUNDEEP
jqueryhtmlcss
nachovall
nachovall

Reputation: 485

jQuery, CSS3 or HTML5 transition?

What kind of transition (if it's a transition) does this web site when you click the main menu links?

http://ivalladare7.wix.com/testepi#!home/mainPage

It's just a test but I think the idea is clear. Is it HTML5, CSS or jQuery/JavaScript?

I saw it in a couple of places but I don't know how to implement it because I don't know how to find an example.

Any help appreciated

Upvotes: 1

Views: 864

Answers (4)

Benidorm
Benidorm

Reputation: 183

Easy transitions on this website are made with css3 transitions. However the sliding from the content transitions are made with TweenMax (Greensock)

It's a light weight script which can work perfectly with jQuery or vanilla js specially for tweening/animating.

Checkout their demo (animated with Greensock)

https://greensock.com/jump-start-js

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

It's a CSS transition (and not a very good one as it's webkit only). A better version with vendor prefixes would be:

.menu a {
    color: #999;
            transition: color 0.4s ease; /* vendorless fallback */
         -o-transition: color 0.4s ease; /* opera */
        -ms-transition: color 0.4s ease; /* IE 10 */
       -moz-transition: color 0.4s ease; /* Firefox */
    -webkit-transition: color 0.4s ease; /*safari and chrome */
}

.menu a:hover {
    color: #340065;
}

If you mean the sliding content, then that's Javascript.

Upvotes: 1

deathlock
deathlock

Reputation: 2837

The HTML structure looks a bit daunting at a glance. I'm not sure which transition(?) do you mean, but I presume it is the sliding content when we click the menu.

At first I suspect it is some sort of Javascript (jQuery most likely), since it adds trails to the site URL in the address bar. Then I try to view the source (using Chrome's inspect element) and found there is no <a> element on the menu. I only found this:

<p skinpart="label" class="wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1-label" style="line-height: 25px; width: auto; ">Articles&nbsp;&amp;&nbsp;Videos</p>

Then to make sure of it, I disable Javascript on the browser. The sliding content stops working. So, yeah, it is Javascript.

EDIT:

Actually if you try to view source (Ctrl+U) directly, you'll find a bunch of Javascript lines. And if you try to Ctrl+F the text Home, you'll find it within the lines of Javascript. So this is indeed a JS.

Upvotes: 1

goncaloGomes
goncaloGomes

Reputation: 163

It seems to be a CSS transition.

If you see the rule:

.wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1 {
-webkit-transition: color 0.4s ease 0s;
}

But you can get something better at: http://css3generator.com/

Choose transitions and use that tool. It will help you to get something more cross-browser.

Upvotes: 0

Related Questions