Videogular - Jacaranda FM Regional

index.html

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
  
<videogular vg-theme="controller.config.theme.url">
		<vg-media vg-src="controller.config.sources"
				  vg-tracks="controller.config.tracks"
				  vg-native-controls="true">
		</vg-media>
	</videogular>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"></script>


<css-doodle>
  :doodle {
    flex: none;
    @grid: 25x1;
    @size: 1000px 800px;
    overflow: hidden;
  }

  --colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
  --color-1: @p(--colors);
  --color-2: @P;
  --transform: translateY(@r(2, 90)%);
  --size: 30px;
  transform: var(--transform) rotate(0deg);
  transform-origin: 50% 100%;

  @random(0.5) {
    animation: swing @r(3, 5)s ease infinite alternate both;
  }
  @random(0.5) {
    animation: swingLeft @r(3, 5)s ease infinite alternate both;
  }

  @keyframes swing {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(1deg);
    }
  }

  @keyframes swingLeft {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(-1deg);
    }
  }

  ::after {
    content: "";
    position: absolute;
    top: -15px;
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    background: @p(
      radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)),
      @doodle(
        @grid: 1 / 100%;
        ::after {
          content: "@p(✿,❁,❀,❃,❊)";
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 40px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
        }
      ),
      @doodle(
        @grid: 1 / 100%;
        ::after {
          content: "@p(🌸,🌼)";
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 28px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
        }
      )
    );
  }

  background: @doodle(
    @grid: 1x40;
    background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent));

    @nth(1, 2) {
      ::before { display: none; }
    }

    @random(.5) {
      ::before {
        content: "";
        @place: 10px center;
        @size: 50% 100%;
        border-radius: 0 100% 0 100%;
        background: @p(--colors);
        -webkit-box-reflect: @p(right, initial);
      }
    }
  );
</css-doodle>


	

script.babel

document.addEventListener('click', function() {
  document.querySelectorAll('css-doodle').forEach(function(o){ o.update() })
})
document.addEventListener('touchstart', function() {
  document.querySelectorAll('css-doodle').forEach(function(o){ o.update() })
})

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular"
		]
	)
	.controller('HomeCtrl',
		function ($sce) {
			this.config = {
				preload: "none",
				sources: [
					{src: $sce.trustAsResourceUrl("https://edge.iono.fm/xice/56_high.aac"), type: "audio/aac"},
					{src: $sce.trustAsResourceUrl("https://edge.iono.fm/xhls/56_high.m3u8"), type: "video/mpeg"}
				],
				theme: {
					url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
				}
			};
		}
	);

scripts

<script src="https://cdn.jsdelivr.net/npm/css-doodle@0.30.3/css-doodle.min.js"></script>

style.scss

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: absolute;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #440A4F;
}

.videogular-container {
	width: 100%;
	height: 100px;
	margin: 0;
	overflow: hidden;
}

/*# sourceMappingURL=main.css.map */

videogular-jacaranda-fm-regional.markdown

Videogular - Jacaranda FM Regional

A Pen by Bright Sparks on CodePen.

License.