Sie sind hier : basti1012.de/ Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<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>