Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вращение фото

Страница: 1

Сообщений 1 страница 15 из 15

1

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

Всем привет, нужен скрипт для вращения фото на 360 градусов, зацикленно. Вот это фото надо вращать постоянно, ну чтобы оно крутилось по часовой стрелке https://forumstatic.ru/files/001b/d8/65/75674.png

0

2

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51439
  • Уважение: +15399
  • Позитив: +11948
  • Последний визит:
    Сегодня 12:54:26

Тоха
Cпроси на https://forumd.ru/viewforum.php?id=75 отдельной темкой... вродь уже было такое

0

3

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09
Deff написал(а):

Тоха
Cпроси на https://forumd.ru/viewforum.php?id=75 отдельной темкой... вродь уже было такое

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Код:
<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="500" height="500"></canvas>
  <script>

    var RADIAN = Math.PI / 180;

    function toRadians(degrees) {
        return degrees * RADIAN;
    }
    
    // Draws image in indicated position rotated around origin point (originX, originY).
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = imageX + image.width / 2;
    //     originY = imageY + image.height / 2;
    //
    function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
        var radians = toRadians(degrees);
        context.save();                            // saves current transformation matrix (state)
      	context.translate(+originX, +originY);
        context.rotate(radians);                   // rotates the image around origin point by used translations
        context.translate(-originX, -originY);
        context.drawImage(image, imageX, imageY);  // draws the image in the position (imageX, imageY)
        context.restore();                         // restores saved transformation matrix (state)
    }
    
    // Draws image in indicated position rotated around relative origin point (originX, originY).
    // Origin point is measured from let-top image corner.
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = image.width / 2;
    //     originY = image.height / 2;
    //
    function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
        drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
    }
    
    // Draws image in indicated position rotated around image center.
    //
    function drawRotated$3(context, image, imageX, imageY, degrees) {
        // we rotate image around image center (0.5 * image.width, 0.5 * image.height)
        var originX = 0.5 * image.width;
        var originY = 0.5 * image.height;
        drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
    }
    

    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');
    
    var image = new Image();

    image.onload = function() {
        var degrees = 0;
        var callback = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // image placed in point (50, 50) and rotated around his center
            drawRotated$3(context, image, 50, 50, degrees);
           
            degrees += 1;
        };
        setInterval(callback, 10);
    };

    image.src = 'https://forumstatic.ru/files/001b/d8/65/75674.png';

  </script>
</body>
</html>

0

4

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

Поставил его на своем форуме внизу это выглядит так http://alfedr.mybb.ru/

0

5

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

и хотел бы переместить это фото по центру выше и чтобы вращающееся фото было поверх форума как стоит анимация огня, как то так)

Отредактировано Тоха (Ср, 20 Сен 2023 21:29:40)

0

6

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51439
  • Уважение: +15399
  • Позитив: +11948
  • Последний визит:
    Сегодня 12:54:26
Тоха написал(а):

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Чот такое сложное, нормальный код через css анимацию, чот там три-пять строк

https://ru.stackoverflow.com/questions/ … угу-на-css

0

7

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51439
  • Уважение: +15399
  • Позитив: +11948
  • Последний визит:
    Сегодня 12:54:26
Тоха написал(а):

чтобы вращающееся фото было поверх форума как стоит анимация огня, как то так)

Ну поставь первым кодом по ссылке, крикни если поправить размещение нужно

Отредактировано Deff (Ср, 20 Сен 2023 21:45:08)

0

8

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09
Deff написал(а):
Тоха написал(а):

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Чот такое сложное, нормальный код через css анимацию, чот там три-пять строк

https://ru.stackoverflow.com/questions/ … угу-на-css

Я его ствил ранее так после этого кода все картинки начинают вращаться, а мне надо чтобы только одна вращалась

0

9

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

Ребята проблема решена - добавил в строке кода вот что -  #my-canvas { border: 1px solid gray;position:absolute ; z-index: 1; left: 510px; top: 190px }

+1

10

  • Автор: IDsaya
  • Заслуженный
  • IDsaya
  • Зарегистрирован: Вт, 20 Окт 2020
  • Сообщений: 102
  • Уважение: +50
  • Позитив: +54
  • Пол: Женский
  • Последний визит:
    Ср, 20 Сен 2023 22:27:26

Как замедлить вращение изображения? Deff

0

11

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

Тему можно закрыть, всем спасибо)

0

12

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09
IDsaya написал(а):

Как замедлить вращение изображения? Deff

Извините что перебиваю, просто измените значение цифр на большее. Чем больше значение - тем медленнее. В этом куске кода     var RADIAN = Math.PI / 180;

0

13

  • Автор: IDsaya
  • Заслуженный
  • IDsaya
  • Зарегистрирован: Вт, 20 Окт 2020
  • Сообщений: 102
  • Уважение: +50
  • Позитив: +54
  • Пол: Женский
  • Последний визит:
    Ср, 20 Сен 2023 22:27:26
Deff написал(а):

Kenapa rumit sekali, kode normal lewat animasi CSS, kenapa barisnya tiga sampai lima?

https://ru.stackoverflow.com/questions/ ... uh-huh-on-css

извините, я использовал код с этого сайта
Тоха

Код:
img.rot {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Отредактировано IDsaya (Ср, 20 Сен 2023 22:16:43)

+1

14

  • Автор: Тоха
  • Заслуженный
  • Тоха
  • Зарегистрирован: Ср, 28 Июн 2023
  • Сообщений: 101
  • Уважение: +8
  • Позитив: +32
  • Пол: Мужской
  • Предупреждения: 1
  • Последний визит:
    Сегодня 14:18:09

Вот готовый рабочий код там всего лишь добавлена позиция изображения и убрана рамка в 7 строчке -

Код:
<!-- Вращение Фото-->
<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 0px solid gray;position:absolute ; z-index: 1; left: 450px; top: 190px }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="450" height="450"></canvas>
  <script>

    var RADIAN = Math.PI / 1800;

    function toRadians(degrees) {
        return degrees * RADIAN;
    }
    
    // Draws image in indicated position rotated around origin point (originX, originY).
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = imageX + image.width / 2;
    //     originY = imageY + image.height / 2;
    //
    function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
        var radians = toRadians(degrees);
        context.save();                            // saves current transformation matrix (state)
      	context.translate(+originX, +originY);
        context.rotate(radians);                   // rotates the image around origin point by used translations
        context.translate(-originX, -originY);
        context.drawImage(image, imageX, imageY);  // draws the image in the position (imageX, imageY)
        context.restore();                         // restores saved transformation matrix (state)
    }
    
    // Draws image in indicated position rotated around relative origin point (originX, originY).
    // Origin point is measured from let-top image corner.
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = image.width / 2;
    //     originY = image.height / 2;
    //
    function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
        drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
    }
    
    // Draws image in indicated position rotated around image center.
    //
    function drawRotated$3(context, image, imageX, imageY, degrees) {
        // we rotate image around image center (0.5 * image.width, 0.5 * image.height)
        var originX = 0.5 * image.width;
        var originY = 0.5 * image.height;
        drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
    }
    

    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');
    
    var image = new Image();

    image.onload = function() {
        var degrees = 0;
        var callback = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // image placed in point (20, 20) and rotated around his center
            drawRotated$3(context, image, 0, 0, degrees);
           
            degrees += 1;
        };
        setInterval(callback, 10);
    };

    image.src = 'https://forumstatic.ru/files/001b/d8/65/75674.png'; 

  </script>
</body>
</html>
<!-- Окончание -->

Отредактировано Тоха (Ср, 20 Сен 2023 22:22:04)

0

15

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51439
  • Уважение: +15399
  • Позитив: +11948
  • Последний визит:
    Сегодня 12:54:26
Тоха написал(а):

Ребята проблема решена - добавил в строке кода вот что -  #my-canvas { border: 1px solid gray;position:absolute ; z-index: 1; left: 510px; top: 190px }

Ну скрипты всегда лишняя нагрузка на браузер и процессор  :dontknow:  Css делается на уровне машинного кода, а скрипты - это интерпретатор, который затем переводится в машинный код, на что тратится время и ресурсы

+1

Страница: 1