Плавная подгрузка div подскажите

58

<<Desperado>>

12 июля 2014, 19:52

972

Всем привет, как не пытался, не могу найти нигде нужный мне вариант.

Кароче на стр есть дивы с классами и id

как делать плавную подгрузку этих дивов по скролу? Подскажите плз пример, ничего конкретно по подгрузке дивов не могу найти, то из БД подгрузка есть, то из файлов..а нужного мне нету.

204

дани мапов

12 июля 2014, 21:22

#1

http://jsfiddle.net/ak9Hb/101/

1

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)

58

<<Desperado>>

12 июля 2014, 22:47

#2

дани мапов:
http://jsfiddle.net/ak9Hb/101/

Спасибо вам огромное. Но тут все будет подгружаться, если документ уже собран ((document).ready)

А как сделать, что бы все грузилось равномерно при скроле, можно? Просто у меня на блоки навешаны всякие эффекты (например счетчик времени), при f5 они работают а в этом случае, анимированные эффекты в блоках уже отработали. А я бы хотел что бы они при скроле на этом блоке срабатывали. Вот пример, все подгружается по скролу.

Подгрузка сайта при скролинге, Можно ли как-то анимировать А теперь представьте сколько

42

Jor

12 июля 2014, 23:41

#3

Как-то так:

http://jsfiddle.net/8UNrt/

1

58

<<Desperado>>

13 июля 2014, 20:02

#4

Jor:
Как-то так:
http://jsfiddle.net/8UNrt/

Скопировал все в один файл, нифига не работает у меня, все показывается в один момент, не постепенно, хотя по ссылке у вас все работает...в чем бок?

<html>

<head>
<style>
.container {
margin: 1000px 0;
overflow: hidden;
font-family: Arial;
}

.block {
color: #fff;
margin: 350px 0;
padding: 20px 10px;
border-bottom: 1px solid #fff;
background: #4679bd;
-weblot-box-shadow: 0 10px 20px #ddd;
-moz-box-shadow: 0 10px 20px #ddd;
box-shadow: 0 10px 20px #ddd;
-webkit-transition: all 1.5s cubic-bezier(.49,.27,.04,1.34);
-moz-transition: all 1.5s cubic-bezier(.49,.27,.04,1.34);
-o-transition: all 1.5s cubic-bezier(.49,.27,.04,1.34);
transition: all 1.5s cubic-bezier(.49,.27,.04,1.34);
}

.hidden {
color: #000;
position: relative;
top: 300px;
opacity: 0;
border: 0;
background: #ccc;
-weblot-box-shadow: 50px 200px 100px #000;
-moz-box-shadow: 50px 200px 100px #000;
box-shadow: 50px 200px 100px #000;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>

</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).scroll(function() {
var view = $(window).scrollTop() + $(window).height();
$('.hidden').each(function() {
view > $(this).offset().top && $(this).removeClass('hidden');
});
});
</script>

<body>
<div class="container">
<div class="block hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
<div class="block hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book.
</div>
<div class="block hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div class="block hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="block hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
</body>
</html>

42

Jor

14 июля 2014, 02:49

#5

<<Desperado>>:
Скопировал все в один файл, нифига не работает у меня, все показывается в один момент, не постепенно, хотя по ссылке у вас все работает...в чем бок?

<!DOCTYPE html> укажите, и скрипты лучше подключайте в <head>, либо в <body>, но не между ними.

Что делать, если ваша email-рассылка попала в спам

Google: E-E-A-T не является фактором ранжирования