Merge pull request #47 from acend/changes

micro animationen

site/assets/scss/common/_global.scss

@@ -374,18 +374,6 @@ a {
   }
 }
 
-[data-scroll]:not(.banner) {
-  transition: opacity 1s, transform 0.6s ease-in-out;
-}
-[data-scroll="in"]:not(.banner) {
-  opacity: 1;
-  transform: translateY(0);
-}
-[data-scroll="out"]:not(.banner) {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
 .entry-content {
   ol, ul, dl {
     padding-left: 0;

site/assets/scss/components/_scroll-out.scss

@@ -1,15 +1,28 @@
-.content {
-  [data-scroll]:not(.floater) {
-    transition: opacity 1s, transform 0.5s;
+[data-scroll] {
+  opacity: 0;
+  transform: translateY(2rem);
+  will-change: opacity, transform;
+  transition: opacity 0.5s cubic-bezier(0.215,0.61,0.355,1) 0.5s, transform 0.75s cubic-bezier(0.215,0.61,0.355,1) 0.5s;
+
+  &.accordion-item {
+    transform: translate(-20%, 0);
   }
+}
+
+[data-scroll="in"] {
+  opacity: 1;
+  transform: translate(0, 0);
 
-  [data-scroll="in"]:not(.floater) {
-    opacity: 1;
-    transform: translateY(0);
+  &.accordion-item {
+    transform: translate(0, 0);
   }
+}
+
+[data-scroll="out"] {
+  opacity: 0;
+  transform: translateY(2rem);
 
-  [data-scroll="out"]:not(.floater) {
-    opacity: 0;
-    transform: translateY(2rem);
+  &.accordion-item {
+    transform: translate(-20%, 0);
   }
 }

site/hugo_stats.json

@@ -414,6 +414,7 @@
       "pt-16",
       "pt-2",
       "pt-3",
+      "pt-4",
       "pt-5",
       "pt-6",
       "pt-lg-32",

site/layouts/index.html

@@ -28,14 +28,14 @@ <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
           <p>{{ .text | markdownify }}</p>
         </div>
 
-          <h3 class="mb-8 mb-lg-10">{{ .subtitle }}</h3>
+          <h3 data-scroll class="mb-8 mb-lg-10">{{ .subtitle }}</h3>
           <div class="row row-cols-1 row-cols-md-2  row-cols-lg-4 gy-8">
             {{ range where (where $.Site.RegularPages "Section" "trainings") ".Params.categories" "intersect" (slice "New") }}
               {{ partial "box-training-small" . }}
             {{ end }}
           </div>
 
-          <div class="d-flex mt-8 mb-18">
+          <div data-scroll class="d-flex mt-8 mb-18">
             <a href="{{ i18n "trainingsLink" }}" class="btn btn-outline-primary  py-3 px-18 px-md-5 mx-auto  me-md-0">{{ i18n "showAllTrainings" }}</a>
          </div>
 
@@ -49,12 +49,12 @@ <h3 class="mb-8 mb-lg-10">{{ .subtitle }}</h3>
   <section  class="section section-about my-13 px-lg-6">
     <div class="wide-banner text-white bg-primary pattern pt-16  pt-lg-32 pb-30 pb-lg-54">
 
-    <div data-scroll class="container-fluid">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-11 col-lg-10 mx-md-auto">
           {{ with $data.homepage.about }}
-          <div class="h3 sm light mb-4">{{.title}}</div>
-          <div class="h1 sm">{{.content | markdownify}}</div>
+          <div data-scroll class="h3 sm light mb-4">{{.title}}</div>
+          <div data-scroll class="h1 sm">{{.content | markdownify}}</div>
           {{ if .button.enable }}
             {{ with .button }}
             <a href="{{ .URL | absURL }}" class="btn btn-outline-light">{{.label}}</a>
@@ -116,14 +116,14 @@ <h2 data-scroll="in" class="mb-2 col-lg-4">{{  .title }}</h2>
   {{ with  $data.homepage.stories }}
 
   <div class="container-fluid  mb-18 mb-lg-32">
-      <a class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
+      <a data-scroll class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
      <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
 
      <div  data-scroll  class="col-lg-7 mb-8 mb-lg-16">
        <p>{{ .text | markdownify }}</p>
      </div>
 
-     <div class="testimonial-carousel text-white position-relative">
+     <div data-scroll  class="testimonial-carousel text-white position-relative">
       {{ range first 3 (shuffle (where $.Site.RegularPages "Section" "stories" )) }}
         {{ partial "content-story-testimonial" . }}
       {{ end }}
@@ -137,7 +137,7 @@ <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
   {{ with  $data.homepage.journal }}
 
   <div class="container-fluid  mb-16 mb-lg-32">
-      <a class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
+      <a data-scroll class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
      <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
 
      <div  data-scroll  class="col-lg-7 mb-8 mb-lg-16">
@@ -151,7 +151,7 @@ <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
     </div>
 
     <div class="d-flex mt-8 mb-18">
-      <a href="{{ .link }}" class="btn btn-outline-primary  py-3 px-18 px-md-5 mx-auto  me-md-0">{{ i18n "readMore" }}</a>
+      <a data-scroll  href="{{ .link }}" class="btn btn-outline-primary  py-3 px-18 px-md-5 mx-auto  me-md-0">{{ i18n "readMore" }}</a>
    </div>
 
   </div>
@@ -165,13 +165,13 @@ <h2  data-scroll  class="mb-2 col-lg-4">{{ .title }}</h2>
   {{ with  $data.homepage.partner }}
   <section class="section mb-16 mb-lg-32">
     <div class="container-fluid">
-      <h2 data-scroll="in" class="mb-2 col-lg-4">{{  .title }}</h2>
-       <div data-scroll="in" class="col-lg-7 mb-8 mb-lg-16">
+      <h2 data-scroll class="mb-2 col-lg-4">{{  .title }}</h2>
+       <div data-scroll class="col-lg-7 mb-8 mb-lg-16">
         <p>{{  .text | markdownify }}</p>
       </div>           
     </div>           
 
-    <div class="partner-carousel mb-16 mb-lg-32">
+    <div data-scroll  class="partner-carousel mb-16 mb-lg-32">
       {{ range .item }}
       {{ partial "content-partner" . }}
       {{ end }}
@@ -207,15 +207,15 @@ <h2 data-scroll="in" class="mb-2 col-lg-4">{{  .title }}</h2>
   <div class="container-fluid  mb-16 mb-lg-32">
     <div class="row gy-8">
       <div class="col-lg-4">
-        <a class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
+        <a data-scroll class="btn btn-sm btn-outline-primary border-1 py-0  mb-2" href="{{ .link }}">{{ .label }}</a>
         <h2  data-scroll  class="mb-4 mb-lg-8">{{ .title }}</h2>
         <p>{{ .text | markdownify }}</p>
     </div> 
 
     <div class="col-lg-7 offset-lg-1">
       <div class="accordion accordion-flush border-top border-bottom" id="faqAccordion">
         {{ range $index, $value := .items }}
-        <div class="accordion-item">
+        <div data-scroll class="accordion-item">
           <h3 class="accordion-header" id="heading{{ $index }}">
             <button class="accordion-button strong {{ if (ne $index 0) }} collapsed {{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}" aria-expanded="{{ if (eq $index 0) }}true{{ else }}false{{ end }}" aria-controls="collapse{{ $index }}">
               {{ .question }} <div class="icon-plus ms-auto me-3"></div>

site/layouts/journal/list.html

@@ -8,19 +8,16 @@
 <div class="container-fluid">
 
   {{ with .Content }}
-  <div class="col-lg-8 offset-lg-1 mb-8 mb-lg-16">
+  <div data-scroll class="col-lg-8 offset-lg-1 mb-8 mb-lg-16">
     {{ . }}
   </div>
   {{ end }}
 
 
   <div class="row">
     <div class="col-lg-10 offset-lg-1">
-
-      <div class="d-flex border-top  py-3">
-       <!-- <button class="btn btn-filter btn-resetms-auto">Reset</button> -->
-      </div>
-        <div class="filterlist mb-8 mb-lg-16" >
+          <div data-scroll class="filterlist mb-8 mb-lg-16 border-top pt-4" >
+
           <button class="btn btn-filter btn-outline-primary me-3 mb-3 active" data-filter="item">{{ i18n "all" }}</button>
 
             {{ range $key, $value := .Params.categories }}

site/layouts/partials/box-training-small.html

@@ -2,7 +2,7 @@
 
 
 
-  <div class="inner border light p-4 ps-lg-10 pt-lg-8 d-flex flex-column h-100 position-relative">
+  <div data-scroll class="inner border light p-4 ps-lg-10 pt-lg-8 d-flex flex-column h-100 position-relative">
     {{ if  in .Params.categories "New"  }}
     <div class="position-absolute label-new bg-primary text-white px-2 py-md-1 small">{{ i18n "new" }}</div>
     {{ end }}

site/layouts/partials/page-header.html

@@ -1,8 +1,8 @@
 <div class="container-fluid mb-8 mb-lg-16">
   <div class="col-lg-7">
-    <h1 class="h4 mb-2">{{ .title | markdownify }}</h1>
+    <h1 data-scroll class="h4 mb-2">{{ .title | markdownify }}</h1>
     {{ with .lead }}
-        <div class="h1 sm mb-0">{{ . | markdownify }}</div>
+        <div data-scroll class="h1 sm mb-0">{{ . | markdownify }}</div>
     {{ end }}
   </div>
 </div>

site/layouts/stories/list.html

@@ -8,7 +8,7 @@
 <div class="container-fluid">
 
   {{ with .Content }}
-  <div class="col-lg-8 offset-lg-1 mb-8 mb-lg-16">
+  <div data-scroll class="col-lg-8 offset-lg-1 mb-8 mb-lg-16">
     {{ . }}
   </div>
   {{ end }}

site/layouts/ueber-uns/list.html

@@ -12,7 +12,7 @@
 
         {{ range .items}}
         <div class="col-8 col-md-6">
-          <div class="timeline-item me-20 me-lg-48">
+          <div data-scroll class="timeline-item me-20 me-lg-48">
               <h2>{{ .title }}</h2>
               <p>{{ .subtitle }}</p>
               {{ with .img }}
@@ -34,7 +34,7 @@ <h2>{{ .title }}</h2>
 <div class="container-fluid">
   {{ with .Params.introtext }}
   <div class="col-lg-8 offset-lg-1 mb-8 mb-lg-16">
-    <h2 class="h3">{{ . | markdownify }}</h2>
+    <h2 data-scroll class="h3">{{ . | markdownify }}</h2>
   </div>
   {{ end }}
 
@@ -44,9 +44,9 @@ <h2 class="h3">{{ . | markdownify }}</h2>
       {{ range $index, $value := .Params.brand_values }}
         {{ with $value }}
         <div class="col">
-          <div class="h1">{{ add $index  1  }}</div>
-          <h3 class="h4">{{ .title }}</h3>
-          <p class="small">{{ .text }}</p>
+          <div data-scroll class="h1">{{ add $index  1  }}</div>
+          <h3 data-scroll class="h4">{{ .title }}</h3>
+          <p data-scroll class="small">{{ .text }}</p>
       </div>
       {{ end }}
       {{ end }}
@@ -73,26 +73,26 @@ <h2 id="team" data-scroll class="mb-5">{{ .title | markdownify }}</h2>
 
 
 {{ with .Params.join_us }}
-  <div class="col-lg-5 mb-16 mb-lg-32" data-scroll>
-    <h3  class="mb-4">{{ .title | markdownify }}</h3>
-    <div class="mb-4 mb-lg-8">{{ .text | markdownify }}</div>
-    <a class="btn btn-outline-primary py-3 px-5" href="{{ .link }}">{{ .link_label }}</a>
+  <div class="col-lg-5 mb-16 mb-lg-32">
+    <h3  data-scroll class="mb-4">{{ .title | markdownify }}</h3>
+    <div data-scroll class="mb-4 mb-lg-8">{{ .text | markdownify }}</div>
+    <a data-scroll class="btn btn-outline-primary py-3 px-5" href="{{ .link }}">{{ .link_label }}</a>
   </div>
 {{ end }}
 
 
 
 
 {{ with .Params.community }}
-  <div class="col-lg-8 mb-8 mb-lg-16" data-scroll>
-    <h3  class="mb-4">{{ .text | markdownify }}</h3>
+  <div class="col-lg-8 mb-8 mb-lg-16">
+    <h3  data-scroll class="mb-4">{{ .text | markdownify }}</h3>
   </div>
 {{ end }}
 
 </div>
 
 {{ with .Params.community.images }}
-<div class="carousel carousel-community mb-16 mb-lg-32">
+<div data-scroll class="carousel carousel-community mb-16 mb-lg-32">
   {{ range  $value := . }}
     {{ with $value }}
       <div class="carousel-cell p-4">
@@ -118,14 +118,14 @@ <h3  class="mb-4">{{ .text | markdownify }}</h3>
 
     <div class="container-fluid ">
 
-      <div class="col-lg-5 mb-8 mb-lg-16" data-scroll>
-        <h3  class="mb-4">{{ .title | markdownify }}</h3>
-        <div class="mb-4 mb-lg-8">{{ .text | markdownify }}</div>
+      <div class="col-lg-5 mb-8 mb-lg-16" >
+        <h3  data-scroll class="mb-4">{{ .title | markdownify }}</h3>
+        <div data-scroll class="mb-4 mb-lg-8">{{ .text | markdownify }}</div>
        </div>
 
     </div>           
 
-    <div class="partner-carousel mb-16 mb-lg-32">
+    <div data-scroll class="partner-carousel mb-16 mb-lg-32">
       {{ range .member }}
       {{ partial "content-partner" . }}
       {{ end }}