В настоящее время я использую это jqFloat.js, которое заставляет элементы плавать в пространстве вокруг страницы.
К сожалению, они плавают в зависимости от размера экрана, а не от своего родительского контейнера, чего я и хочудля достижения.
Вот HTML-код моей структуры
<div class="wrapper">
<div id="projects">
<div>
<a href="projects/first/index.html" class="project-item">
<img src="images/body/brain.png" id="image" class="brain" />
<div class="title">Sintesi addittiva</div>
</a>
</div>
<div>
<a href="projects/first/index.html" class="project-item">
<img src="images/body/eyes.png" id="image" class="eyes" />
<div class="title">Menschen Messe</div>
</a>
</div>
</div>
Класс .wrapper установлен на height: 100%; width: 85%; с помощью CSS, а .project-item - этокласс моих плавающих элементов.
Это источник jqFloat
В настоящий момент мои элементы плавают правильно, и в случайном положении каждый раз, когда страница загружается, ноиногда они выходят из оболочки (и с экрана тоже).
Я пытался присвоить .projects-item (это класс, который вызывает плавающий эффект) для родительского div, но затем элементыисчезнуть.
Я думаю, что в основном я должен достичь пространства, в котором должен выполняться код jqFloat, и если один из элементов касается одного из краев оболочки, элемент будетприходится «подпрыгивать».
Это веб-сайт на данный момент в его очень грубом дизайне.Элементы (части тела) должны оставаться в пределах зеленых линий, то есть .wrapper.
Веб-сайт
Любая помощь очень очень ценится ?