< >

cssdoddle.php


Quell Code


<style>
  html, body {
  width: 100%;
  min-height: 200%;
  margin: 0;
  background: #191919;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
}
.main{
  height:500px;
    padding:10px 100px 10px 100px;
  width:80%;

 
}
.main p{

 font-size:30px;
  color:black;
}
.main p~a:link{
text-decoration: none;
font-size:35px;
 
}

  
</style>
<div class="sidebar">
  <css-doodle>
    :doodle { 
      @grid: 50x1 / 50px 100vh;
      min-width: 5vw;
    }
    margin: 2px 0;
    border-radius: 10px;
    background: #cb6015;
    width: @rand(10%, 100%);   
    will-change: transform;
    transition: .5s;
  </css-doodle>
</div>
<div class="main">
<p>Beim Scrollen wird der Linke Rand animiert.Dafür benötigt man das Script von Css-doddle</p>
<a   href="https://css-doodle.com/">Zum Script</a>
</div>
<script>
  
  var doodle = document.querySelector('css-doodle');

window.addEventListener('scroll', function () {
  window.requestAnimationFrame(function () {
    doodle.update();
  });
}, 250);
  
  
</script>



<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122955144-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-122955144-1');
</script>

Add Comment

* Required information
1000
Powered by Commentics

Comments (1)

Gravatar
Admin
Sascha65says...

Die Canvas Balken Uhr ist ja mal Fett