javascript - active of a Xlink anchor SVG -
i have 4 anchor xlink
inside svg
, want active event of each, how can call in js?
that looks that:
$(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstpage', 'secondpage', '3rdpage', '4thpage', 'lastpage'], menu: '#timeline', scrollingspeed: 1000, onleave: function(index, nextindex, direction){ $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextindex-1))); } }); });
html { image-rendering: optimizequality; -webkit-font-smoothing: antialiased; -ms-interpolation-mode: nearest-neighbor } body { height:100%; margin:0; padding:0; overflow:hidden; font-family: 'source_sans_prolight'; } div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } ul, { list-style:none; text-decoration:none; } .intro{ font-size:20px; } /********** menu ************/ #header { position: fixed; right: -60px; top: 0; width: 60px; height: 100%; -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-property: -webkit-transform, right; -webkit-backface-visibility: hidden; z-index:120; } #menu-burger-wrapper { position: absolute; left:-66px; top: 0; -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) } /********** essai************/ #menu-burger-wrappr.is-opened { -webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 1s cubic-bezier(0.77, 0, 0.175, 1); transition: 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform: translatex(-276px); -moz-transform:translatex(-276px); -ms-transform: translatex(-276px); -o-transform:translatex(-276px); transform:translatex(-276px); } #menu-burger-wrappr.is-closed { -webkit-transform: translatex(0px); -moz-transform:translatex(0px); -ms-transform: translatex(0px); -o-transform:translatex(0px); transform:translatex(0px); -webkit-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); } /**********essai************/ #menu-burger-wrapper.is-opened .line-burger { top: -35px; } #menu-burger-wrapper.is-opened .line-1 { -webkit-transform: translate(7px, 9px) rotate(45deg); -moz-transform: translate(7px, 9px) rotate(45deg); -ms-transform: translate(7px, 9px) rotate(45deg); -o-transform: translate(7px, 9px) rotate(45deg); transform: translate(7px, 9px) rotate(45deg) } #menu-burger-wrapper.is-opened .line-2 { width: 0px; -webkit-transform: translatex(22px); -moz-transform: translatex(22px); -ms-transform: translatex(22px); -o-transform: translatex(22px); transform: translatex(22px) } #menu-burger-wrapper.is-opened .line-3 { -webkit-transform: translate(7px, -9px) rotate(-45deg); -moz-transform: translate(7px, -9px) rotate(-45deg); -ms-transform: translate(7px, -9px) rotate(-45deg); -o-transform: translate(7px, -9px) rotate(-45deg); transform: translate(7px, -9px) rotate(-45deg) } .line-burger { position: relative; left: 0; top: 0; width: 1px; height: 35px; margin: 0 auto 10px auto; background-color: #c8c8c8; -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) } #menu-burger { width: 44px; background:#2c75ff; height: 32px; padding-top: 12px; cursor: pointer; } #menu-burger.is-opened{ z-index:999; } #menu-burger .line { width: 30px; height: 2px; margin-bottom: 7px; background-color: #fff; -webkit-transform: translatex(7px); -moz-transform: translatex(7px); -ms-transform: translatex(7px); -o-transform: translatex(7px); transform: translatex(7px); -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) } #menu-burger:hover .line-1 { width: 20px; -webkit-transform: translatex(12px); -moz-transform: translatex(12px); -ms-transform: translatex(12px); -o-transform: translatex(12px); transform: translatex(12px) } #menu-burger:hover .line-2 { width: 10px; -webkit-transform: translatex(27px); -moz-transform: translatex(27px); -ms-transform: translatex(27px); -o-transform: translatex(27px); transform: translatex(27px) } #menu-burger:hover .line-3 { width: 15px; -webkit-transform: translatex(7px); -moz-transform: translatex(7px); -ms-transform: translatex(7px); -o-transform: translatex(7px); transform: translatex(7px) } .is-opened #menu-burger:hover .line-1 { width: 20px; -webkit-transform: translate(12px, 9px) rotate(45deg); -moz-transform: translate(12px, 9px) rotate(45deg); -ms-transform: translate(12px, 9px) rotate(45deg); -o-transform: translate(12px, 9px) rotate(45deg); transform: translate(12px, 9px) rotate(45deg); } .is-opened #menu-burger:hover .line-2 { width: 0px; -webkit-transform: translatex(22px); -moz-transform: translatex(22px); -ms-transform: translatex(22px); -o-transform: translatex(22px); transform: translatex(22px) } .is-opened #menu-burger:hover .line-3 { width: 20px; -webkit-transform: translate(12px, -9px) rotate(-45deg); -moz-transform: translate(12px, -9px) rotate(-45deg); -ms-transform: translate(12px, -9px) rotate(-45deg); -o-transform: translate(12px, -9px) rotate(-45deg); transform: translate(12px, -9px) rotate(-45deg); } .menu-base{ background:#2c75ff; position: fixed; width: 300px; height: 100%; top: 0; z-index:110; right: -300px; } .menu-base-open { right: 0px; } /**********push (class sur le body)************/ .push { overflow-x: hidden; position: relative; left: 0; } .push-toright { left: 240px; } .push-toleft { left: -240px; } .menu-base, .push { -webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); } /**********push (class sur le body)************/ .menu-item{ position:absolute; margin-top:200px; width:100%; height:100%; text-align: center; font-size:100%; overflow:hidden; } .menu-item { color: rgba(255,255,255,0.5); text-transform: uppercase; -webkit-transition:color 0.4s ease-in; } .menu-item a:hover, #en-cours{ color: rgba(255,255,255,1); } .menu-item li { position:relative; width:100%; margin-bottom:30px; margin-left:0px; vertical-align:middle; overflow:hidden; } /********** timeline ************/ #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; pointer-events: all; z-index:99; } #titre{ position:fixed; width:300px; height:100px; margin-top:-80px; margin-left:-150px; top:50%; left:50%; color:#fff; text-align:center; } h3 { text-transform:uppercase; font-size:50px; } #greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{ stroke:rgba(204,204,204,1); } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #smallblueleft, #smallbluebottom, #smallblueright{ stroke-dasharray:40; stroke-dashoffset:40; -webkit-transition:all 1s ease; transition:all 1s ease; } #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{ stroke-dashoffset:0; } /********** section ************/ .fp-section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout:fixed; width: 100%; } .fp-tablecell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-scrollable { overflow: scroll; } .fp-notransition { -webkit-transition: none !important; transition: none !important; } h2{ font-size: 2em; } #don{ background-image: url(../image/1.jpg); background-size:cover; } #tri{ } /********** footer ************/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/alvarotrigo/fullpage.js/master/jquery.fullpage.js"></script> <!---------- timeline -----------> <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="smallgreytop" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/> <circle id="smallgreyleft" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/> <circle id="smallgreybottom" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/> <circle id="smallgreyright" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/> <circle id="bluecircle" fill="none" stroke="#2c75ff" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/> <a data-offset="0" xlink:href="#firstpage"><circle id="smallbluetop" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a> <a data-offset="1132.5" xlink:href="#secondpage"><circle id="smallblueright" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a> <a data-offset="755" xlink:href="#3rdpage"><circle id="smallbluebottom" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a> <a data-offset="377.5" xlink:href="#4thpage"><circle id="smallblueleft" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a> </svg> </div> <div id="fullpage"> <div class="section " id="don"> <h2></h2> <p></p> </div> <div class="section" id="tri"> <h2>fullpage.js</h2> <p>create beautiful fullscreen scrolling websites</p> </div> <div class="section" id="emploi"> <h2>example</h2> <p>html markup example define 4 sections.</p> </div> <div class="section" id="recycle"> <h2>working on tablets</h2> <p>designed fit different screen</p> </div> <div class="section" id="vente"> <h2>working on tablets</h2> <p>designed fit different screen</p> </div> </div>
i ended pulling in (nearly) ubiquitous jquery library work across browsers (adding , removing classes on ie counter-intuitive). basic idea declare function check if user has scrolled passed top of section of interest given xlink
, , call function on each link every time user scrolls. in code, may like:
var svg = $("#svg"); var main = $("#main"); var links = $("a"); var numlinks = links.length; function setxlinkactive(xlink, scrolly) { var section = $(xlink.attr("xlink:href")); var clienty = section.offset().top; if (scrolly > clienty) { xlink.show().addclass("active"); } else { xlink.removeclass("active").hide(); } }
now, function needs called each xlink
on each scroll
event inside main
element:
main.bind("scroll", function() { var scrolly = main.scrolltop() + main.offset().top; links.each(function(idx, link) { setxlinkactive($(link), scrolly); }); });
mess around my fiddle see works you.
Comments
Post a Comment