jorgin Posted January 8, 2013 Report Share Posted January 8, 2013 (edited) Hola amigos!! acudo a ustedes para pedirles un favor... quisás muy tonta para ustedes pero muy necesesaria para mi... xD jajajaj Bueno me ha gustado este script basado en CSS3 (http://tympanus.net/Tutorials/CSS3ContentNavigator/index.html) y al darle click a "Demo 1" aparece el script, pero me gustaría que este apareciera en el "index.html", no en el "index.html#slide-main" ¿Como puedo lograr esto? Aqui dejo los 2 css que trae el script style-1: .cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; } .cn-container h2{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; color: #fff; position: absolute; z-index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; -ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; } .cn-container .cn-slide:target h2{ right: 0px; opacity: 1; } .cn-slide{ text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear, opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear; transition: left 0.4s linear, opacity 0.4s linear; } .cn-slide:target{ left: 0px; opacity: 1; } .cn-slide nav a{ text-align: left; display: block; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line-height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); } .cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; } /* Main Items */ .cn-slide nav a[href="#slide-1"]{ background-image: url(../images/1.jpg); } .cn-slide nav a[href="#slide-2"]{ background-image: url(../images/2.jpg); } .cn-slide nav a[href="#slide-3"]{ background-image: url(../images/3.jpg); } /* Items and sub-items of slide 1*/ .cn-slide nav a[href="#slide-1-1"], #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a[href="#slide-1-2"], #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a[href="#slide-1-3"], #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a[href="#slide-1-4"], #slide-1-4 .cn-content { background-image: url(../images/7.jpg); } /* Items and sub-items of slide 2*/ .cn-slide nav a[href="#slide-2-1"], #slide-2-1 .cn-content { background-image: url(../images/8.jpg); } .cn-slide nav a[href="#slide-2-2"], #slide-2-2 .cn-content { background-image: url(../images/9.jpg); } .cn-slide nav a[href="#slide-2-3"], #slide-2-3 .cn-content { background-image: url(../images/10.jpg); } .cn-slide nav a[href="#slide-2-4"], #slide-2-4 .cn-content { background-image: url(../images/11.jpg); } /* Items and sub-items of slide 3*/ .cn-slide nav a[href="#slide-3-1"], #slide-3-1 .cn-content { background-image: url(../images/12.jpg); } .cn-slide nav a[href="#slide-3-2"], #slide-3-2 .cn-content { background-image: url(../images/13.jpg); } .cn-slide nav a[href="#slide-3-3"], #slide-3-3 .cn-content { background-image: url(../images/14.jpg); } .cn-slide nav a[href="#slide-3-4"], #slide-3-4 .cn-content { background-image: url(../images/15.jpg); } .cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; } .cn-content:active p{ opacity: 0; } .cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; } .cn-note{ text-align: right; font-size: 10px; font-style: normal; text-align: right; padding: 10px; display: block; font-family: Arial; text-shadow: 1px 1px 1px rgba(255,255,255,0.7); } @media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } } demo.css: @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; height: 100%; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } section, header{ display: block; } /* General Demo Style */ body{ font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; background: #fff url(../images/bg.jpg) repeat top left; font-weight: 400; font-size: 15px; color: #391b27; overflow-y: scroll; overflow-x: hidden; } a{ color: #333; text-decoration: none; } .container{ width: 100%; height: 100%; position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center; } .container > header h1{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #923e5f; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); padding: 0px 0px 5px 0px; } .container > header h1 span{ color: #582036; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } .container > header h2{ font-size: 16px; font-style: italic; color: #391b27; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } /* Header Style */ .codrops-top{ line-height: 24px; font-size: 11px; background: rgba(255, 255, 255, 0.4); text-transform: uppercase; z-index: 9999; position: relative; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; text-shadow: 0px 1px 1px #fff; display: block; float: left; } .codrops-top a:hover{ background: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: left; display: block; } .codrops-demos{ text-align:center; display: block; line-height: 30px; padding: 5px 0px 15px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .codrops-demos a{ display: inline-block; margin: 0px 4px; padding: 0px 4px; color: #fff; line-height: 20px; font-style: italic; font-size: 13px; border-radius: 3px; background: rgba(103,59,77,0.1); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .codrops-demos a:hover{ background: rgba(103,59,77,0.4); } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover{ background: rgba(103,59,77,0.4); } Edited January 8, 2013 by jorgin Link to comment Share on other sites More sharing options...
maxuber Posted January 16, 2013 Report Share Posted January 16, 2013 explícate mejor, por si quieres hacerlo en el index es re fácil, lo único que tienes que hacer es poner en el <header>los script que tiene este efecto con sus enlaces respectivo de sus css.después debes asignar por medio de un script a que class o id le vas poner este efecto. si tienes dudas mándame un mp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now