Плавная / непрерывная прокрутка изображения для фона

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я успешно создал полный эффект прокрутки фонового изображения, используя одно изображение. Код, который я использовал для достижения этого, выглядит следующим образом:

 <html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // set the default position
         var current = 0;

         // set the direction
         var direction = 'h';

         function bgscroll() {

             // 1 pixel row at a time
             current -= 1;

             // move the background with backgrond-position css properties
             $('body').css("backgroundPosition", (direction == 'h') ? current   "px 0" : "0 "   current   "px");

         }

         //Calls the scrolling function repeatedly
         setInterval("bgscroll()", scrollSpeed);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://i.imgur.com/yhBqRw6.jpg');
        }
    </style>
</head>
<body>

</body>
</html>

Это работает так, как ожидалось. Однако существует четкое разграничение между началом и концом изображения. Есть ли способ сказать, добиться непрерывного эффекта, при котором начало и конец изображения не так очевидны. Я имею в виду, может ли это быть достигнуто с помощью CSS / JS или мне нужно отредактировать / модифицировать само изображение?

Вот как выглядит текущий результат:

Прокрутка фона

Спасибо

1. попробуйте background-size: 100% 100% в классе body.

2. @SureshPonnukalai, это не непрерывный, возможно, OP хочет сохранить исходный размер изображения. Или прокрутить его из оригинальной коробки.

3. @SureshPonnukalai — Это нарушило изображение. Вот так — i.imgur.com/wxgVxal.png

4. Вы могли бы перевернуть изображение по горизонтали, чтобы они выглядели как сшитые вместе.

Ответ №1:

CSS и JS не делают таких вещей.

Возможно, вы сможете найти плагин jQuery или что-то подобное, но при коротком поиске я его не нашел.

Редактирование изображения должно быть первым шагом.

1. Спасибо за быстрый ответ. Я собрал столько же. Один из методов, который, как я думал, заключался в постоянном расширении исходного изображения по ширине — это приводит к увеличению размера изображения и замедляет загрузку страницы. Тем не менее, спасибо за предложение. Я также буду присматривать за плагинами..

2. Если вы расширяете его с помощью CSS или Javascript, это не увеличивает размер изображения, но в какой-то момент изображение может перестать выглядеть хорошо.

Ответ №2:

Вам нужно было бы изменить изображение. Вот руководство по созданию фонового изображения с использованием photoshop:

http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/

Ответ №3:

Для этого вам нужно использовать симметричный фон, пожалуйста, ознакомьтесь с нижеприведенным фоном:

CSS :

  body {
        background-image: url('http://i.stack.imgur.com/C11AY.png');
    }