X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> CSS плеер с пленкой
k0ttee
k0ttee
Topic Starter сообщение 19.4.2016, 16:36; Ответить: k0ttee
Сообщение #1


Набросал такое изделие... Если натянуть бобины (или засунуть в кассету), будет вполне себе ламповый.

[video]https://youtu.be/oUH3ilM6vyo[/video]

Длительность звукового файла к правильной намотке пленки пока не привязана (после обеда обленился). Рисовать не умею, а подходящие скины не гуглятся. Короче код...

<!DOCTYPE html>
<html>
<head>
    <title>player</title>
    <style>
    *{box-sising:border-box;}
    body{margin:0 auto; width:640px}

    #reader{
        width:256px;
        height:64px;
        margin-left:192px;
        background:#222;
        clear:left;
        border-radius:32px
    }

    #in{
        position:relative;
        left: -210px;
        top: -35px;

        animation-name:input;
          animation-iteration-count:infinite;
        animation-timing-function:ease;
        animation-direction:alternate;
        animation-duration:5s;
        transform-origin:right;
    }
    @-webkit-keyframes input {
          from {
            transform:rotate(63deg)
          }
          to {
            transform:rotate(30deg)
          }
        }

    #out{
        position:relative;
        right: -210px;
        top: -46px;

        animation-name:output;
          animation-iteration-count:infinite;
        animation-timing-function:ease;
        animation-direction:alternate;
        animation-duration:5s;
        transform-origin:left;
    }
    @-webkit-keyframes output {
          from {
            transform:rotate(-30deg)
          }
          to {
            transform:rotate(-63deg)
          }
        }



    #l{
        height:64px;
        width:64px;
        background:#FFF;
        border-radius:256px;
        border:solid 128px#600;
        float:left;
        margin:128px 0px;

        animation-name: zoomin;
          animation-iteration-count:infinite;
        animation-timing-function:ease;
        animation-direction:alternate;
        animation-duration:5s;
    }

        @-webkit-keyframes zoomin {
          from {
            border:solid 32px #222;
            margin: 96px;
            /*transform:rotate(0deg)*/
          }
          to {
            border:solid 128px #222;
            margin:0;
            /*transform:rotate(360deg)*/
          }
        }




    #r{
        height:64px;
        width:64px;
        background:#FFF;
        border-radius:256px;
        border:solid 32px#222;
        float:left;
        margin:128px 0px;

        animation-name: zoomout;
          animation-iteration-count:infinite;
        animation-timing-function:ease;
        animation-direction:alternate;
        animation-duration:5s;
    }

        @-webkit-keyframes zoomout {
          from {
            border:solid 128px #222;
            margin:0;
            /*transform:rotate(0deg)*/
          }
          to {
            border:solid 32px #222;
            margin:96px;
            /*transform:rotate(360deg)*/
          }
        }
    </style>
</head>
<body>
    <div id='l'></div>
    <div id='r'></div>

    <div id='reader'></div>

    <hr id='in' noshade size=2 width=170 color=222222>
    <hr id='out' noshade size=2 width=170 color=222222>
</body>
</html>

<audio id="player" src="sound.mp3"></audio>
<button onclick="document.getElementById('player').play()">Воспроизведение</button>
<button onclick="document.getElementById('player').pause()">Пауза</button>
<button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
<button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>


Со скинами можно запилить нечто типа этого кассетника _http://www.webmasters.by/images/articles/webprogramm/cassette-player-with-html5-audio/index.html


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 19.4.2016, 17:09; Ответить: prolisk
Сообщение #2


<_< в px...а почему не в %? :blush: ;)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 19.4.2016, 17:15; Ответить: k0ttee
Сообщение #3


почему не в %?

В процентах от чего? Блоки не завернуты в родителей, а проценты от размера страницы - это будет жуть на весь экран.

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


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 19.4.2016, 18:09; Ответить: prolisk
Сообщение #4


(k0ttee)
а проценты от размера страницы - это будет жуть на весь экран.

зато пропорционально и адаптивно :)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 19.4.2016, 20:21; Ответить: k0ttee
Сообщение #5


адаптивно

Ну допустим 100% ширины на маленьком экране, а дальше? А дальше адаптивность делается изломами.

Бобины нужны ровненькие. :cry:
Прикрепленный файл  ampex-456.png ( 46,2 килобайт ) Кол-во скачиваний: 407


Добавлено спустя 14 минут 57 секунд:
Расковырял этих товарищей, но их скин мне не нравится - слишком мультяшный, а я хочу строгую фотореалистичность без бликов и теней.
Насчет привязки ко времени - можно подставлять длительность дорожки в скорость анимации, будет крутиться с правильными пропорциями.

[video]https://youtu.be/qSoJ_iZuy8g[/video]

Добавлено спустя 1 час 9 минут 21 секунду:
Засунул в JS-фидл. Кому интересно пощупать (только в хроме анимация дерганая - в сафари норм). _https://jsfiddle.net/utL22dqf/2/

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3328 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3289 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1415 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:09
Дизайн