abGNxEr

abgnxer.markdown

abGNxEr

A Pen by BergenBergen BergenBergen on CodePen.

License.

index.html

<div class="banner_wrapper marketplace">
  <p class="sponsored">Sponsored</p>
  <div class="banner">

    <h1>Sentrum</h1>
    <img src="https://i.imgur.com/FzKQ6Yu.gif">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <a class="button" href="#">Start shopping</a>
  </div>
</div>

<div class="banner_wrapper dating">
  <p class="sponsored">Sponsored</p>
  <div class="banner">
    <h1>Dating</h1>
    <css-doodle click-to-update="">
      <style>
        :doodle {
          @grid: 1x10 / 50vmin;
          filter:
            drop-shadow(0 0 10px #ff360e) drop-shadow(0 0 20px #ff360e);
        }

        @size: calc(100% - @i * 3%);
        @place-cell: center;
        clip-path: @shape(points: 180;
          a: cos(t)*13/18 - cos(2t)*5/18;
          b: cos(3t)/18 + cos(4t)/18;
          x: .75 * sin(t)^3;
          y: a - b + .15;
          frame: @r(2, 2.5);
        );

        :after {
          content: '';
          @place-cell: center;
          @size: @p(@r(10px), @m5(@r(50%))) 100%;
          background: linear-gradient(@r(360deg),
              #30182b, #f0f1bc, #60f0c0, #ff360e, #191f04);
          animation: cycle @r(2s, 8s) linear infinite;
          animation-delay: -@r(8s);
        }

        @keyframes cycle {
          to {
            transform: rotate(1turn);
          }
        }
      </style>
    </css-doodle>

    <!--<css-doodle click-to-update="">
    <style>
      :doodle {
        @grid: 1x10 / 50vmin;
        filter:
          drop-shadow(0 0 10px #ff360e)
          drop-shadow(0 0 20px #ff360e);
      }
      @size: calc(100% - @i * 3%);
      @place-cell: center;
      clip-path: @shape(
        points: 1000;
        scale: .34;
        origin: 0 -1.6;
        s: sqrt.abs.cos(t) / (sin(t) + 1.6);
        r: 2 + (s - 2) * sin(t);
        frame: 5;
      );
      :after {
        content: '';
        @place-cell: center;
        @size: @p(@r(10%, 20%), @m5(@r(10%, 50%))) 100%;
        background: radial-gradient(
         #30182b,#f0f1bc,#60f0c0,#ff360e,#191f04
        );
        animation: cycle @r(2s, 8s) linear infinite;
        animation-delay: -@r(8s);
      }
      @keyframes cycle {
        to { transform: rotate(1turn); }
      }
    </style>
  </css-doodle>-->

    <!--<a class="button" href="#">Register now</a>-->

    <footer class="bankid">
      Protected by BankID
    </footer>
  </div>
</div>

<div class="banner_wrapper playlist">
  <p class="sponsored">Sponsored</p>
  <div class="banner">

<div class="art">
  <!--  scifi circles  -->
  <css-doodle use="var(--scifi)"></css-doodle>  
  <!--  iris radial from center pattern  -->
  <css-doodle use="var(--iris)"></css-doodle>
  <!--  iris radial from center triangles  -->
  <css-doodle use="var(--iris2)"></css-doodle>
</div>

    
   <!-- <h1 class="ml15">
      <span class="word">Cool<br>music</span>
    </h1>
    <a class="button" href="#">Listen now</a>-->
    
    <div class="lp">
  <h1>Test</h1>
  <span></span>
</div>
    
  </div>
</div>



<div class="banner_wrapper playlist">
  <p class="sponsored">Sponsored</p>
  <div class="banner">
    <!-- https://codepen.io/alisasila/pen/jOVWPRb -->
    <css-doodle grid="200x1">
      :doodle {
      @size: 95vmin;
      overflow: hidden;
      }
      @size: 100%;
      @place-cell: center;

      ::before{
      content: "";
      @size: @r(5%);
      border: 1px solid white;
      background: @p(none, white, linear-gradient(to @p(bottom, left), @stripe(black, white 1px, black, white 1px, black, white 1px, black, white 1px, black, white 1px, black)));
      border-radius: @p(0, 50%);
      position: absolute;
      top: @r(100%);
      left: @r(100%);
      animation: floatingUpDown @r(1.5s, 5s) @r(1.5s) linear infinite alternate;
      }

      ::after {
      content: "";
      height: @r(0.5%);
      width: @r(1.5%, 7%);
      background: white;
      position: absolute;
      top: @r(100%);
      left: @r(100%);
      animation: floatingStickAnim @r(1.5s, 5s) @r(1.5s) linear infinite alternate;
      transform: translateX(300%);
      transition: background 0.2s;
      }

      :doodle(:hover)::after{
      background: limegreen;
      }

      @keyframes floatingUpDown {
      100% {
      transform: translateY(-50%) rotateZ(@r(-5deg, 5deg));
      }
      }

      @keyframes floatingStickAnim {
      100% {
      transform: translateX(-300%);
      }
      }
    </css-doodle>
    

    
   <h1 class="ml15">
      <span class="word">Cool<br>music</span>
    </h1>
    <a class="button" href="#">Listen now</a>
    
    <footer>
      New streaming service
    </footer>
  </div>
</div>

script.babel

// https://tobiasahlin.com/moving-letters/#15

// Wrap every letter in a span
anime
  .timeline({ loop: false })
  .add({
    targets: ".ml15 .word",
    scale: [14, 1],
    opacity: [0, 1],
    easing: "easeOutCirc",
    duration: 800,
    delay: (el, i) => 800 * i
  })
  // .add({
  //   targets: ".ml15",
  //   opacity: 0,
  //   duration: 1000,
  //   easing: "easeOutExpo",
  //   delay: 1000
  // });




var circle = anime ({
  targets: ['.lp'],
  rotate: 3000,
  duration: 100000,
  loop: true
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.29.0/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

style.scss

.banner_wrapper {
  display: flex;
  background: #efefef;
  justify-content: center;
  padding: 10px 0 28px;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.sponsored {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}

.banner h1 {
  font-size: 28px;
  text-transform: lowercase;
}

.marketplace .button {
  background: #3ea6ff;
  color: black;
}

.marketplace .star:before {
  display: block;
  content: "";
  background-image: url("https://i.imgur.com/0Kvpz18.png");
  width: 23px;
  height: 23px;
  opacity: 0.8;
}

.star {
  position: absolute;
}

.star:nth-of-type(1) {
  bottom: 40px;
  left: 60px;
}

.star:nth-of-type(2) {
  bottom: 50px;
  right: 60px;
}

.star:nth-of-type(3) {
  bottom: 20px;
  left: 60px;
}

footer {
  width: 100%;
  padding: 10px;
  bottom: 0;
  position: absolute;
}

.marketplace .banner {
  background: white; // #252525;
  color: black;
}

.marketplace .banner img {
  width: 40%;
  margin: 10px 0 50px;
}

.dating css-doodle {
  // transform: scale(1.2);
}
.dating .banner {
  background: #100f24;
  color: white;
}

.playlist .button {
  background: white;
}
.playlist .banner {
  background: black;
  color: white;
}
/*
.playlist h1 {
  background: black;
  padding: 10px;
  left: 20px;
  vertical-align: middle;
  position: absolute;
}*/

.playlist .banner {
  position: relative;
}

.playlist footer {
  background: #1c74e9;
  color: white;
}

// --

input[type="submit"], button, a.button {
  display: flex;
  // flex-direction: column;
  // align-items: center;
  border: none;
  background-color: #ff9900;
  color: black;
  // border-radius: 7px;
  border-radius: 30px;
  font-size: 14px;
  padding: 10px 20px 12px;
}

body {
  font-family: sans-serif;
}

a.button {
  //display: inline-flex;
  text-decoration: none;
}



// --


:root {
  --colorEyeBlue: #34495e12;
  --colorEyeDark: #07070715;
  --colorBackground: #111;
  
  --sizeEye: 200px;
  --sizeBigLine: calc(0.01 * var(--sizeEye));
  --sizeSmallLine: calc(0.003 * var(--sizeEye));;
  --sizeIris: calc(var(--sizeEye) / 2);
}

:root {
  --scifi: (
    :doodle {
      @grid: 1x19 / 100%;    
      position: absolute;
      left: 0;
      top: 0;
    }
    
    @place-cell: center; 
    @size: calc(20% + @i * 4%);
    z-index: 2; 

    border-radius: 100%; 
    border-style: solid;
    border-width: @pick(
      var(--sizeSmallLine),
      var(--sizeSmallLine),
      var(--sizeBigLine)
    );

    border-color: 
      hsla(
        215, @r(40%,50%), @r(70%, 82%), @r(5%, 90%)
      )
      transparent
    ;    


    will-change: transform;
    animation: myanimation @r(4s, 15s) linear alternate infinite;    

    @keyframes myanimation {
      from { transform: rotate(@r(360deg)) }
      to { transform: rotate(@r(360deg)) }
    }    

    @nth(1) { background-color: #000; border: none; z-index: 3; }  
  );
}

:root {
  --iris: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    @place-cell: center;
    @size: 100%;
    z-index: 1; 

    border-radius: 100%;
    border-style: dashed;
    border-width: var(--sizeIris);    
    border-color: var(--colorEyeBlue) var(--colorEyeDark);
    transform: rotate(@r(179deg));
  );
}

:root {  
  --iris2: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;      
    }
    z-index: 1;
    @place-cell: center;
    background-color: var(--colorEyeBlue);
    @size: 100%;
    clip-path: polygon(48% 50%, 50% 100%, 52% 50%, 50% 0%);
    transform: rotate(@r(179deg));
  );
}


.art {
  position: relative;
  width: var(--sizeEye);
  height: var(--sizeEye);
}




.lp {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  height: 80px;
  width: 80px;
  background-color: white;
  border-radius: 100%;
  //border: 1px solid blue;
  z-index: 5;
}

.lp h1 { z-index: 6; font-size: 200%; color: blue;}
.lp span {
  background: black;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
}