Замкнутая по кругу прокрутка страницы html

**nazinss** · 10.03.2017 20:16

в общем как я разобрался, js должен быть отдельным файлом, на него ссылка внутри каждой страницы как на css.

Но переделать этот пример для себя я пока что не могу.

Хелп! :)

**DNS** · 10.03.2017 22:20

nazinss, Как пользователю лично мне такое не нравится. Советую обратить внимание, как сделано на сайте РБК, там не бесконечная страница, а идет следующая новость. То есть, доскролили вы до конца стр, и бац, следующий пост. Мне идея понравилась, теперь думаю, не сделать ли также и на своем сайте...

**nazinss** · 11.03.2017 14:25

разбираюсь вот с этой ссылкой: https://codepen.io/vincentorback/pen/zxRyzj

создал html документ вот с таким содержимым

Код HTML:

<html> <link href="test.css" rel="stylesheet" type="text/css"/> <body> <main class="Loop js-loop"> <section class="green"> <h1>One</h1> </section> <section class="red"> <h1>For</h1> </section> <section class="blue"> <h1>All</h1> </section> <section class="orange"> <h1>And</h1> </section> <section class="blue"> <h1>All</h1> </section> <section class="red"> <h1>For</h1> </section> <section class="green is-clone"> <h1>One</h1> </section> <section class="red is-clone"> <h1>For</h1> </section> </main> </body> </html>

css тоже сделал, ссылка на нее в начале кода.
Все это отображается корректно, как по ссылке.
Но я не могу понять как тут этот скрипт подключить который в третьем окошке.

Помогите люди, хотелось бы чтоб скрипт отдельным файлом был как css.

**nazinss** · 12.03.2017 12:15

Разобрался как запустить то что по ссылке у себя на компе, все работает как надо.

<html>
<link href="test.css" rel="stylesheet" type="text/css"/>
<body>
<main class="Loop js-loop">
<section class="green">
<h1>1</h1>
</section>
<section class="red">
<h1>2</h1>
</section>
<section class="blue">
<h1>3</h1>
</section>
<section class="orange">
<h1>4</h1>
</section>
<section class="blue">
<h1>5</h1>
</section>
<section class="red">
<h1>6</h1>
</section>

<section class="green is-clone">
<h1>7</h1>
</section>
<section class="red is-clone">
<h1>8</h1>
</section>
</main>
<script src="xxx.js"></script>
</body>
</html>

как оказалось скрипт надо внизу прописывать. и ссылку на файл скрипта получилось сделать.

Но теперь проблема в другом, как это применить для своего сайта.
Не понятно что значит эта надпись в коде, она не видна на странице.



Так же не видна вот эта последняя секция:

<section class="red is-clone">
<h1>8</h1>
</section>

но если ее удалить - перестает работать.

после экспериментов с кодом выяснилось что менять вообще ничего нельзя, class= тоже менять нельзя.

как это модернизировать для себя не могу понять

	10.03.2017 20:16 #21
nazinss Новичок Регистрация: 06.03.2017 Сообщений: 14 Репутация: 0	в общем как я разобрался, js должен быть отдельным файлом, на него ссылка внутри каждой страницы как на css. Но переделать этот пример для себя я пока что не могу. Хелп! :)
0 nazinss

	10.03.2017 22:20 #22
DNS Новичок Регистрация: 22.03.2014 Сообщений: 24 Репутация: 6	nazinss, Как пользователю лично мне такое не нравится. Советую обратить внимание, как сделано на сайте РБК, там не бесконечная страница, а идет следующая новость. То есть, доскролили вы до конца стр, и бац, следующий пост. Мне идея понравилась, теперь думаю, не сделать ли также и на своем сайте...
0 DNS

	11.03.2017 14:25 #23
nazinss Новичок Регистрация: 06.03.2017 Сообщений: 14 Репутация: 0	разбираюсь вот с этой ссылкой: https://codepen.io/vincentorback/pen/zxRyzj создал html документ вот с таким содержимым Код HTML: <html> <link href="test.css" rel="stylesheet" type="text/css"/> <body> <main class="Loop js-loop"> <section class="green"> <h1>One</h1> </section> <section class="red"> <h1>For</h1> </section> <section class="blue"> <h1>All</h1> </section> <section class="orange"> <h1>And</h1> </section> <section class="blue"> <h1>All</h1> </section> <section class="red"> <h1>For</h1> </section> <section class="green is-clone"> <h1>One</h1> </section> <section class="red is-clone"> <h1>For</h1> </section> </main> </body> </html> css тоже сделал, ссылка на нее в начале кода. Все это отображается корректно, как по ссылке. Но я не могу понять как тут этот скрипт подключить который в третьем окошке. Помогите люди, хотелось бы чтоб скрипт отдельным файлом был как css.
0 nazinss

	12.03.2017 12:15 #24
nazinss Новичок Регистрация: 06.03.2017 Сообщений: 14 Репутация: 0	Разобрался как запустить то что по ссылке у себя на компе, все работает как надо. <html> <link href="test.css" rel="stylesheet" type="text/css"/> <body> <main class="Loop js-loop"> <section class="green"> <h1>1</h1> </section> <section class="red"> <h1>2</h1> </section> <section class="blue"> <h1>3</h1> </section> <section class="orange"> <h1>4</h1> </section> <section class="blue"> <h1>5</h1> </section> <section class="red"> <h1>6</h1> </section> <!-- These blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height. --> <section class="green is-clone"> <h1>7</h1> </section> <section class="red is-clone"> <h1>8</h1> </section> </main> <script src="xxx.js"></script> </body> </html> как оказалось скрипт надо внизу прописывать. и ссылку на файл скрипта получилось сделать. Но теперь проблема в другом, как это применить для своего сайта. Не понятно что значит эта надпись в коде, она не видна на странице. <!-- These blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height. --> Так же не видна вот эта последняя секция: <section class="red is-clone"> <h1>8</h1> </section> но если ее удалить - перестает работать. после экспериментов с кодом выяснилось что менять вообще ничего нельзя, class= тоже менять нельзя. как это модернизировать для себя не могу понять
0 nazinss

Темы	Раздел	Ответов	Последний пост
Плавная прокрутка страницы в phpbb	Web программирование	5	29.11.2015 10:05
Прокрутка страницы сайта с помощью #хэштега (Как реализовать?)	Web программирование	4	30.12.2014 19:43
Незаслуженно неизвестный хостер в кругу русских халящиков.	Дайджест блогосферы	2	15.02.2012 14:54
Прокрутка ( scroll )	Web программирование	10	14.06.2011 00:07
Постовой по кругу или продвигаемся вместе	Дайджест блогосферы	0	18.04.2010 01:24

Замкнутая по кругу прокрутка страницы html

Опции темы

Тэги топика:

Похожие темы

Плавная прокрутка страницы в phpbb

Прокрутка страницы сайта с помощью #хэштега (Как реализовать?)

Незаслуженно неизвестный хостер в кругу русских халящиков.

Прокрутка ( scroll )

Постовой по кругу или продвигаемся вместе

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры