jQueryドキュメントの準備をビューポートの要素に切り替えるにはどうすればいいですか？

CSS/jQueryのアニメーションバーを私のウェブサイトに実装したいと思っていましたが、ウェブサイトが再ロードされるたびにロードする必要はありません。私はそれがビューポートに出入りするときにアニメーション化されることを望みます。私はアンロードするためにまだアニメーションを行う必要があることを知っていますが、最初にロードアニメーションをトリガーする必要があります。jQueryドキュメントの準備をビューポートの要素に切り替えるにはどうすればいいですか？

私は以下を試しましたが、何らかの理由で応答していません。スキンバーのjquery関数がcheckanimation関数の後にwindow.scrollに挿入されると、それは毎回のスクロールで機能しますが、checkanimation関数に直接移動し、parent div "kompetencje"がビューポートにあるときに応答するように割り当てられているとき、

提案がありますか？ありがとうございました。

https://jsfiddle.net/mmsmsy/7zymr7zq/2/

function isElementInViewport(elem) { 
var $elem = $(elem); 

// Get the scroll position of the page. 
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
var viewportTop = $(scrollElem).scrollTop(); 
var viewportBottom = viewportTop + $(window).height(); 

// Get the position of the element on the page. 
var elemTop = Math.round($elem.offset().top); 
var elemBottom = elemTop + $elem.height(); 

return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

// Check if it's time to start the animation. 
function checkAnimation() { 
var $elem = $('#kompetencje'); 

if (isElementInViewport($elem)) { 
    // Start the animation 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).find('.skillbar-bar').animate({ 
      width:jQuery(this).attr('data-percent') 
     },1000); 
    }); 
} 
}

出典

2017-01-20 Mateusz Mysiak

あなたが同じ名前で二度の関数を定義した、二回目は、最初のコンテンツを置き換えます。 – Sam0

あなたcheckAnimation()関数は二回が、異なるアクションで定義されたので、このスニペットは、最初に第二の機能の内容を移動し、2番目の定義を省略しました。

function isElementInViewport(elem) { 
 
    var $elem = $(elem); 
 

 
    // Get the scroll position of the page. 
 
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
 
    var viewportTop = $(scrollElem).scrollTop(); 
 
    var viewportBottom = viewportTop + $(window).height(); 
 

 
    // Get the position of the element on the page. 
 
    var elemTop = Math.round($elem.offset().top); 
 
    var elemBottom = elemTop + $elem.height(); 
 

 
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
 
} 
 

 
// Check if it's time to start the animation. 
 
function checkAnimation() { 
 

 
    // Affixing handler 
 
    var window_top = $(window).scrollTop(); 
 
    var div_top = $(".junior").offset().top; 
 
    var x = $(window).height(); 
 
    if (window_top > div_top) { 
 
    $("ul.menusy").addClass("affixed"); 
 
    } else if (window_top < (div_top + x)) { 
 
    $("ul.menusy").removeClass("affixed"); 
 
    } 
 

 
    var $elem = $('#kompetencje'); 
 
    if (isElementInViewport($elem)) { 
 
    // Start the animation 
 
    jQuery('.skillbar').each(function() { 
 
     jQuery(this).find('.skillbar-bar').animate({ 
 
     width: jQuery(this).attr('data-percent') 
 
     }, 1000); 
 
    }); 
 
    } else { 
 
    jQuery('.skillbar-bar').stop(true,false).width(0); 
 
    } 
 
} 
 

 
// Capture scroll events 
 
$(window).scroll(function() { 
 
    checkAnimation(); 
 

 
}); 
 

 
$(document).on('click', 'a[href^="#"]', function(e) { 
 
    // target element id 
 
    var id = $(this).attr('href'); 
 

 
    // target element 
 
    var $id = $(id); 
 
    if ($id.length === 0) { 
 
    return; 
 
    } 
 

 
    // prevent standard hash navigation (avoid blinking in IE) 
 
    e.preventDefault(); 
 

 
    // top position relative to the document 
 
    var pos = $id.offset().top - 100; 
 

 
    // animated top scrolling 
 
    $('body, html').animate({ 
 
    scrollTop: pos 
 
    }, 200); 
 

 
}); 
 

 

 
// Unified scroll listener 
 
/* 
 
$(function() { 
 
    \t $(window).scroll(checkAnimation); 
 
    \t checkAnimation(); 
 
}); 
 
*/

@media only screen and (max-width: 1100px) { 
 
    /* For mobile phones: */ 
 
    [class*="col-"] { 
 
     width: 100%; 
 
    } 
 
} 
 
@font-face { 
 
    font-family: "Specify Font"; 
 
    src: url(fonts/specify/SpecifyPERSONAL-ExExpMedium.ttf);} 
 
@font-face { 
 
    font-family: "Theano Font"; 
 
    src: url(fonts/theano/TheanoOldStyle-Regular.ttf);} 
 
@font-face { 
 
    font-family: "Kayak Font"; 
 
    src: url(fonts/kayak/KayakSansRegular.otf);} 
 
@font-face { 
 
    font-family: "Kayak Font"; 
 
    src: url(fonts/kayak/KayakSansBold.otf); 
 
    font-weight: bold;} 
 
@font-face { 
 
    font-family: "Adam Font"; 
 
    src: url(fonts/adam/ADAMCGPRO.otf);} 
 
html, 
 
body { 
 
\t background: #edefee; /* For browsers that do not support gradients */ 
 
\t background: -webkit-linear-gradient(-45deg, #edefee, #eaeceb); /* For Safari 5.1 to 6.0 */ 
 
\t background: -o-linear-gradient(-45deg, #edefee, #eaeceb); /* For Opera 11.1 to 12.0 */ 
 
\t background: -moz-linear-gradient(-45deg, #edefee, #eaeceb); /* For Firefox 3.6 to 15 */ 
 
\t background: linear-gradient(-45deg, #edefee, #eaeceb); /* Standard syntax */ 
 
\t color: rgb(25,25,25); 
 
\t font-family: "Kayak Font"; 
 
\t font-size: 18px; 
 
\t overflow-x: hidden; 
 
\t padding: 0; 
 
\t margin: 0;} 
 
a:link, 
 
a:visited, 
 
a:hover, 
 
a:active { 
 
\t color: black; 
 
\t text-decoration: none; 
 
\t -webkit-transition: all .15s; 
 
\t transition: all .15s;} 
 
a:hover { 
 
\t color: rgb(200,200,200);} 
 
#naglowek { 
 
\t width: 100vw; 
 
\t height: 200px; 
 
\t background: #596476; 
 
\t overflow: hidden; 
 
\t padding: 0; 
 
\t border-left: 2px solid #596476; 
 
\t border-bottom: 1px solid rgb(25,25,25); 
 
\t margin: 0; 
 
\t margin-bottom: 50px;} 
 
h1 { 
 
\t width: 850px; 
 
\t min-width: 850px; 
 
\t color: #fbfbfd; 
 
\t font-family: "Adam Font"; 
 
\t font-size: 50px; 
 
\t line-height: 54px; 
 
\t text-align: center; 
 
\t border-bottom: 1px solid #fbfbfd; 
 
\t margin: 48px auto 12px auto;} 
 
h2 { 
 
\t width: 780px; 
 
\t min-width: 780px; 
 
\t color: #fbfbfd; 
 
\t font-family: "Kayak Font"; 
 
\t font-size: 24px; 
 
\t text-align: center; 
 
\t margin: 0 auto 24px auto;} 
 
ul.menusy { 
 
\t display: block; 
 
\t width: 750px; 
 
\t min-width: 750px; 
 
\t height: 32px; 
 
\t background: #596476; 
 
\t font-family: "Kayak Font"; 
 
\t font-size: 24px; 
 
\t list-style: none; 
 
\t overflow: hidden; 
 
\t padding: 0; 
 
\t padding-top: 1px; 
 
\t margin: 0 auto;} 
 
ul.menusy.affixed { 
 
    z-index: 10000; 
 
    margin-left: -375px; 
 
    position: fixed; top: 0; left: 50%;} 
 
#naglowek li{ 
 
\t display: inline; 
 
\t padding: 0; 
 
\t margin: 0;} 
 
#naglowek li a { 
 
\t background: red; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(transparent 50%, #677689 51%, #677689 100%); 
 
    background-size: 200%; 
 
    color: #fbfbfd; 
 
\t padding: 6px 15px; 
 
\t -webkit-transition: all .2s; 
 
\t transition: all .2s;} 
 
#naglowek li a:hover { 
 
\t background-position: 0 100%;} 
 
#glowneMenu { 
 
\t display: block; 
 
\t font-family: "Kayak Font"; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t padding: 0; 
 
\t border-left: 2px solid #596476; 
 
\t margin: 0;} 
 
#glowneMenu img { 
 
\t padding: 0; 
 
\t margin: 0 auto 3vw auto;} 
 
.zdjecie { 
 
\t display: block; 
 
\t width: 50%; 
 
\t min-width: 235px; 
 
\t padding: 0; 
 
\t border-radius: 100%;} 
 
#kontakt { 
 
\t width: 100%; 
 
\t display: block; 
 
\t margin: 0 auto;} 
 
#kontakt p { 
 
\t font-size: 24px; 
 
\t text-align: center;} 
 
#kontakt i { 
 
\t color: #596476; 
 
\t font-size: 54px; 
 
\t margin: 3vh 0 0 0;} 
 
.kontakt { 
 
\t font-size: 32px; 
 
\t font-weight: bold; 
 
\t padding: 0 120px 0 120px; 
 
\t border-bottom: 1px solid rgb(25,25,25); 
 
\t margin: 0;} 
 
#tresc { 
 
\t color: rgb(25,25,25); 
 
\t display: block; 
 
\t float: right; 
 
\t font-size: 24px; 
 
\t text-align: justify; 
 
\t overflow: hidden; 
 
\t padding: 0 4vw; 
 
\t border-left: 2px solid #596476; 
 
\t margin: 0; 
 
\t margin-bottom: 50px;} 
 
#tresc h1 { 
 
\t width: auto; 
 
\t color: rgb(25,25,25); 
 
\t font-size: 28px; 
 
\t line-height: 32px; 
 
\t text-align: left; 
 
\t padding: 0; 
 
\t border-bottom: 1px solid black; 
 
\t margin: 0; 
 
\t margin-bottom: 24px;} 
 
#zacznijtu { 
 
\t display: block; 
 
\t width: 100%; 
 
\t min-height: 90vh;} 
 
.zacznijtu { 
 
\t padding: 0 8vw;} 
 
#wyksztalcenie { 
 
\t display: block; 
 
\t width: 100%; 
 
\t min-height: 90vh; 
 
\t margin: 0;} 
 
ul.punktowanie { 
 
\t list-style: none; 
 
\t padding: 0 8vw;} 
 
summary { 
 
\t font-size: 30px; 
 
\t font-weight: bold; 
 
\t outline: none;} 
 
@keyframes fadeInDown { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateY(-1em); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     transform: translateY(0); 
 
    } 
 
} 
 
details[open] > p { 
 
    animation-name: fadeInDown; 
 
    animation-duration: 0.5s;} 
 
#kompetencje { 
 
\t display: block; 
 
\t width: 100%; 
 
\t min-height: 90vh; 
 
\t margin: 0;} 
 
table { 
 
\t width: 100%;} 
 
.skillbar { 
 
\t position:relative; 
 
\t display:block; 
 
\t margin-bottom:15px; 
 
\t width:100%; 
 
\t background:gainsboro; 
 
\t height:35px; 
 
\t border-radius:3px; 
 
\t -moz-border-radius:3px; 
 
\t -webkit-border-radius:3px; 
 
\t -webkit-transition:0.4s linear; 
 
\t -moz-transition:0.4s linear; 
 
\t -ms-transition:0.4s linear; 
 
\t -o-transition:0.4s linear; 
 
\t transition:0.4s linear; 
 
\t -webkit-transition-property:width, background-color; 
 
\t -moz-transition-property:width, background-color; 
 
\t -ms-transition-property:width, background-color; 
 
\t -o-transition-property:width, background-color; 
 
\t transition-property:width, background-color; 
 
} 
 

 
.skillbar-title { 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
width:110px; 
 
\t font-weight:bold; 
 
\t font-size:13px; 
 
\t color:#ffffff; 
 
\t background:#6adcfa; 
 
\t -webkit-border-top-left-radius:3px; 
 
\t -webkit-border-bottom-left-radius:4px; 
 
\t -moz-border-radius-topleft:3px; 
 
\t -moz-border-radius-bottomleft:3px; 
 
\t border-top-left-radius:3px; 
 
\t border-bottom-left-radius:3px; 
 
} 
 

 
.skillbar-title span { 
 
\t display:block; 
 
\t background:rgba(0, 0, 0, 0.1); 
 
\t padding:0 20px; 
 
\t height:35px; 
 
\t line-height:35px; 
 
\t -webkit-border-top-left-radius:3px; 
 
\t -webkit-border-bottom-left-radius:3px; 
 
\t -moz-border-radius-topleft:3px; 
 
\t -moz-border-radius-bottomleft:3px; 
 
\t border-top-left-radius:3px; 
 
\t border-bottom-left-radius:3px; 
 
} 
 

 
.skillbar-bar { 
 
\t height:35px; 
 
\t width:0px; 
 
\t background:#6adcfa; 
 
\t border-radius:3px; 
 
\t -moz-border-radius:3px; 
 
\t -webkit-border-radius:3px; 
 
} 
 

 
.skill-bar-percent { 
 
\t position:absolute; 
 
\t right:10px; 
 
\t top:0; 
 
\t font-size:11px; 
 
\t height:35px; 
 
\t line-height:35px; 
 
\t color:#ffffff; 
 
\t color:rgba(0, 0, 0, 0.4); 
 
} 
 
#doswiadczenie { 
 
\t display: block; 
 
\t width: 100%; 
 
\t min-height: 40vh; 
 
\t margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<body> 
 
\t <div id="naglowek"> 
 
\t \t <h1>MATEUSZ SEBASTIAN MYSIAK</h1> 
 
\t \t <h2 class="junior">Junior Front-End Developer</h2> 
 
\t \t <ul class="menusy"> 
 
\t \t \t <li><a href="#naglowek">Zacznij tu</a></li> 
 
\t \t \t <li><a href="#wyksztalcenie">Wykształcenie</a></li> 
 
\t \t \t <li><a href="#kompetencje">Kompetencje</a></li> 
 
\t \t \t <li><a href="#doswiadczenie">Doświadczenie</a></li> 
 
\t \t \t <li><a href="#kontakt">Kontakt</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row"> 
 
\t \t \t <div id="tresc" class="col-xs-9"> 
 
\t \t \t \t <div id="zacznijtu"> 
 
\t \t \t \t \t <h1>O MNIE</h1> 
 
\t \t \t \t \t <p class="zacznijtu"> 
 
\t \t \t \t \t \t Mam na imię Mateusz i zajmuję się Web Development od 2010 roku, kiedy stworzyłem swoją pierwszą, prowizoryczną stronę. Z zawodu jestem inżynierem sieci i systemów komputerowych w małych i średnich firmach, ale ze względu na to jak fascynuje mnie programowanie i jego nieskończone możliwości, zmieniam profesję. Od czasów moich pierwszych kroków wykonałem niezliczone ilości własnych stron i zleceń klientów. Szukam pracy w zespole, dzięki któremu mógłbym dużo szybciej się rozwinąć. 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="wyksztalcenie"> 
 
\t \t \t \t \t <h1>WYKSZTAŁCENIE</h1> 
 
\t \t \t \t \t <p class="wyksztalcenie"> 
 
\t \t \t \t \t \t <ul class="punktowanie"> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <details> 
 
\t \t \t \t \t \t \t \t <summary>II Liceum Ogólnokształcące im. Piotra Firleja w Lubartowie (2007-2010)</summary> 
 
\t \t \t \t \t \t \t \t <p>Profil: <strong>matematyczno-fizyczno-informatyczny</strong>,</p> 
 
\t \t \t \t \t \t \t \t <p>przedmiotów rozszerzone: matematyka, fizyka, informatyka, j. angielski.</p> 
 
\t \t \t \t \t \t \t \t </details> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <details> 
 
\t \t \t \t \t \t \t \t <summary>Matura (2010)</summary> 
 
\t \t \t \t \t \t \t \t <p>matematyka - 96%,</p> 
 
\t \t \t \t \t \t \t \t <p>fizyka rozszerzona - 50%,</p> 
 
\t \t \t \t \t \t \t \t <p>j. polski - 40%,</p> 
 
\t \t \t \t \t \t \t \t <p>j. angielski - 100%,</p> 
 
\t \t \t \t \t \t \t \t <p>j. angielski rozszerzony - 90%.</p> 
 
\t \t \t \t \t \t \t \t </details> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <details> 
 
\t \t \t \t \t \t \t \t <summary>Wojskowa Akademia Techniczna w Warszawie (2010-2011)</summary> 
 
\t \t \t \t \t \t \t \t <p>Kierunek: <strong>Informatyka</strong>.</p> 
 
\t \t \t \t \t \t \t \t <p>Nie ukończyłem ze względu na prace związane z opracowaniem obudowy <a href="#enclosuresMobile">Enclosures Mobile Future</a>.</p> 
 
\t \t \t \t \t \t \t \t </details> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <details> 
 
\t \t \t \t \t \t \t \t <summary>Uniwersytet Marii-Curie Skłodowskiej w Lublinie (2011-2013)</summary> 
 
\t \t \t \t \t \t \t \t <p>Kierunek: <strong>Filozofia</strong>.</p> 
 
\t \t \t \t \t \t \t \t <p>Nie ukończyłem ze względu na otwarcie firmy <a href="#enclosuresMobile">Enclosures Mobile</a>.</p> 
 
\t \t \t \t \t \t \t \t </details> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <details> 
 
\t \t \t \t \t \t \t \t <summary>Cambridge Certificate of Proficiency in English, CPE (2014)</summary> 
 
\t \t \t \t \t \t \t \t </details> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li></li> 
 
\t \t \t \t \t \t \t <li></li> 
 
\t \t \t \t \t \t \t <li></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="kompetencje"> 
 
\t \t \t \t \t <h1>KOMPETENCJE</h1> 
 
\t \t \t \t \t <table> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td><strong>Techniczne</strong></td><td><strong>Ogólne</strong></td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t <div class="skillbar clearfix " data-percent="75%"> 
 
\t \t \t \t \t \t \t \t \t <div class="skillbar-title" style="background: gray;"><span>HTML5</span></div> 
 
\t \t \t \t \t \t \t \t \t <div class="skillbar-bar" style="background: #999;"></div> 
 
\t \t \t \t \t \t \t \t \t <div class="skill-bar-percent">80%</div> 
 
\t \t \t \t \t \t \t \t </div> <!-- Koniec Paska Umiejetności --> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t <div class="skillbar clearfix " data-percent="75%"> 
 
\t \t \t \t \t \t \t \t \t <div class="skillbar-title" style="background: gray;"><span>CSS3</span></div> 
 
\t \t \t \t \t \t \t \t \t <div class="skillbar-bar" style="background: #999;"></div> 
 
\t \t \t \t \t \t \t \t \t <div class="skill-bar-percent">80%</div> 
 
\t \t \t \t \t \t \t \t </div> <!-- Koniec Paska Umiejetności --> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="doswiadczenie"> 
 
\t \t \t \t \t <h1>DOŚWIADCZENIE</h1> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="glowneMenu" class="col-xs-3"> 
 
\t \t \t \t <img class="zdjecie" src="zdjecie.jpg" title="zdjecie.jpg"/> 
 
\t \t \t \t <div id="kontakt"> 
 
\t \t \t \t \t <p> 
 
\t \t \t \t \t \t <span class="kontakt">KONTAKT</span><br /> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-phone"></i><br /> 
 
\t \t \t \t \t \t (+48) 799-981-252<br /> 
 
\t \t \t \t \t \t <a href="mailto:[email protected]?Subject=Hello%20again" target="_top">[email protected]</a><br /> 
 
\t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-globe"></i><br /> 
 
\t \t \t \t \t \t <a href="http://www.mmsmsy.com" target="_blank">mmsmsy.com</a> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <script src="scrollAnim.js"></script> 
 
</body>

出典

2017-01-20 21:46:01 Sam0

ありがとうございます。そんな愚かな間違い –

今度は、バーを幅に戻してアニメーション表示したい場合は、ビューポートにないときは「0」にします。応答しません。私はちょうど2秒後に0幅に戻っていることに気付きました（なぜ、私には分かりません）。逆に新しいコードは次のとおりです。場合{ \t \tのjQuery（」skillbar。 '）各（関数（）{ \t \t \t jQueryの（この）.find（' skillbar（isElementInViewport（$のELEM）！）。 -bar '）（{ \t \t \t \t幅： "0" \t \t \t}アニメーション。、1000）; \t \tを}）。 \t} –

divは表示後もアニメーション状態のままです。幅を0にリセットしようとするとすぐにアニメーションに置き換えられます。したがって、私は、 'else'条件を追加する答えを編集し、幅をゼロにする前にすべての棒にjquery 'stop'アニメーションを適用しました。 – Sam0

jQueryドキュメントの準備をビューポートの要素に切り替えるにはどうすればいいですか？

答えて

関連する問題