2012-10-18 5 views
1

주 메뉴 링크를 클릭하면이 웹 사이트가 어떤 종류의 전환이됩니까 (전환 일 경우)?jQuery, CSS3 또는 HTML5 전환?

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

그냥 테스트입니다하지만 난 생각이 분명하다 생각합니다. HTML5, CSS 또는 jQuery/JavaScript입니까?

몇 군데에서 보았지만 예제를 찾는 방법을 모르기 때문에 구현 방법을 모르겠습니다.

도움을 주셨습니다.

+1

, 당신은 소스를 볼 수 있습니다. –

+0

CSS3와 새로운 javascript api는 HTML5의 일부이며 별도로 존재하지 않습니다.HTML5가 정확히 무엇인지 이해할 수 없다고 생각합니다.이 인트로를 읽으시기 바랍니다. http://www.html5rocks.com/en/why – BBog

+0

@BBog 맞습니다. 나는 너의 연결을 볼 것이다. 감사. – nachovall

답변

0

CSS 전환으로 보입니다.

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

하지만 당신은 더 나은 뭔가를 얻을 수 있습니다 : http://css3generator.com/

전환을 선택하고 해당 도구를 사용을 규칙을 참조하면

. 더 많은 브라우저를 지원하는 데 도움이 될 것입니다.

1

CSS 전환입니다 (웹킷만으로는 좋지 않습니다). 공급 업체 프리픽스가있는 더 좋은 버전은 다음과 같습니다.

.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; 
} 

슬라이딩 콘텐츠를 의미하는 경우 자바 스크립트입니다.

+0

실제로 잠깐, 콘텐츠가 떨어지거나 퇴색하는 것을 의미합니까? – SpaceBeers

1

HTML 구조가 한눈에 약간 위압적으로 보입니다. 어느 전환 (?)을 의미하는지 모르겠지만 메뉴를 클릭 할 때 슬라이딩 콘텐츠라고 생각합니다.

처음에는 주소 표시 줄의 사이트 URL에 경로를 추가하기 때문에 Javascript (jQuery가 가장 가능성이 높음)로 의심됩니다. 그런 다음 Chrome의 inspect 요소를 사용하여 소스를 보려고 시도했으며 메뉴에 <a> 요소가 없음을 확인했습니다. 나는 단지 이것을 발견했다 :

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

그런 다음 나는 브라우저에서 자바 스크립트를 사용하지 않는다. 슬라이딩 컨텐츠가 작동을 멈 춥니 다. 그래서, 예, 자바 스크립트입니다.

편집 :

사실 당신이합니다 (Ctrl + U)를 소스보기에 직접, 당신은 자바 스크립트 라인의 무리를 찾을 수하려고하면. 그리고 Ctrl + F로 텍스트 Home을 시도하면 Javascript 라인에서 찾을 수 있습니다. 그래서 이것은 참으로 JS입니다.

+0

예, 슬라이딩 컨텐츠를 의미합니다. 내가 분명하지 않으면 미안해. 나는 그것이 자바 스크립트에 동의하지만. 나는 정확히 똑같은 해결책과 콘텐츠를 슬라이드하는 예제를 원하지 않는다. 정말 멋진 효과라고 생각합니다. – nachovall

+0

이것이 플래시 사이트를 만드는 데 사용 된 사이트 빌더 (Wix)에서 온 것 같습니다. 코드는 정신 나간다. – SpaceBeers

+1

확실히 코드 작성이 어려운 사이트 제작자 ... 그런데, @nachovall, 정확히 똑같지는 않지만 조금 비슷하다고 생각합니다. http://www.queness.com/resources/html /scroll/vertical.html이 자습서는 다음 위치에 있습니다. http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery – deathlock

0

이 웹 사이트의 쉬운 전환은 CSS3 전환으로 이루어집니다. 그러나 콘텐츠 전환은 TweenMax (Greensock)로 이루어집니다.

트위닝/애니메이션을 위해 특별히 jQuery 또는 바닐라 js와 완벽하게 작동하는 경량 스크립트입니다. 그것은 인터넷에서의 (Greensock와 애니메이션)

체크 아웃 그들의 데모

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