зареждане на <div> чак при скролване надолу до него?

V

viper1

Member
имам дефиниран div content:

<div class="progress">
<div class="amount"></div>
</div>

Понеже е анимиран, а се намира по надолу на страницата докато се скролне надолу до него анимацията вече е приключила и в тази връзка искам да попитам как може да започне да зарежда съдържанието на div-а чак когато се скролне до него?
 
<div> елементите са обикновени HTML елементи и нормално се намират където са поставени без да ги интерсува нищо. Когато слагаш клас на елемент, образно казано ти му слагаш етикет, за да знаят CSS и/или JavaScript какво да правят с него. Ако в CSS имаш клас "post", то върху този <div> с клас "post" ще се наложат съответните CSS стилове. CSS стиловете отговарят най-вече за визуалната част - разположение, цвят, размери... в случая и малко анимация. Анимацията се получава когато към елемента се добави опрделен клас. Ти обаче искаш нещо да се случи когато страницата се скролира, а това се прави с JavaScript. Въпреки че CSS понякога може да прави неща, които JavaScript може да прави, не ми е известно CSS да може да следи движението на скролера, камо ли да добавя и премахва класове. На страницата дето си дал има скрипт "Viewport Checker" дето следи за движението на скролера и при нужда добавя допълнителни класове на елементите дето са видими.

С други думи трябва да използваш и 3-те компонента - HTML, CSS и JavaScript. Но ако ме питаш, такъв тип зареждане си заслужава само ако новите постове се зареждат динамично. Ако идеята е да заредиш 10 поста, да скриеш 9 и да ги показваш само когато се скролира надолу само защото това ти се струва яко... ами не е яко, супер аматьорско е. И анимациите съм сигурен, че са дразнещи за повечето хора. Използвай ги когато искаш да сигнализираш за нещо, ама така само заради гъзарията няма смисъл.
 
@viper1 въпросните използват това : https://daneden.github.io/animate.css/
в комбинация с viewpoertchecker-a адват това
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated bounceInUp', // Class to add to the elements when they are visible
offset: 100
});
});
</script>
 
благодаря за включването.
имам на статията само по един <div> който е по надолу в самата статия и искам просто да почне да го зарежда и анимира при скрол до него , а не със зареждането на страницата.

Не ми се ровчи как става,който може да го направи плащам за услугата 25лв по пейпол,еконт,изипей.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе