CSS Animations

src/components/CImgPoster/CImgPoster.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="poster_shadows shadow-3">
+    <q-parallax
+      :src="getsrc()"
+      :speed="speed ? speed : 1"
+      :height="myheight ? myheight : undefined"
+    >
+      <template v-slot:content="scope">
+        <div
+          :class="`column items-center ` + myclass()"
+          :style="{
+            opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
+          }"
+        >
+          <img
+            v-if="logo"
+            :src="logo"
+            :style="
+              logowidth
+                ? `width: ` + logowidth + `px; + `
+                : undefined + logoheight
+                ? ` height: ` + logoheight + `px`
+                : undefined
+            "
+          />
+          <div :class="classTitle + ` ` + class_anim" :style="` color:` + colorTitle">
+            {{ title }}
+          </div>
+          <div
+            v-if="legendinside"
+            :class="classSubtitle + ` ` + class_anim2"
+            :style="` color:` + colorSubtitle"
+            v-html="legendinside"
+          ></div>
+        </div>
+      </template>
+      <div>
+        <!--<q-img
+          v-if="logo"
+          :src="tools.getImgFileByElem(logo)"
+          :fit="fit"
+          class="img"
+          :width="logowidth ? logowidth : undefined"
+          :height="logoheight ? logoheight : undefined"
+        ></q-img>-->
+      </div>
+    </q-parallax>
+  </div>
+</template>
+
+<script lang="ts" src="./CImgPoster.ts">
+</script>
+<style lang="scss" scoped>
+@import './CImgPoster.scss';
+</style>