CSS Animations

src/components/CImgPoster/CImgPoster.scss

@@ -0,0 +1,128 @@
+.imgtitle {
+  display: flex;
+  justify-content: space-between;
+  /* flex-flow: row nowrap; */
+
+  padding: 1rem 0 1rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__img {
+    min-width: 250px;
+  }
+
+  &__imgh100 {
+    max-height: 100px;
+  }
+
+  &__imgh150 {
+    max-height: 150px;
+  }
+
+  &__imgw150 {
+    max-width: 150px;
+  }
+
+  &__imgw100 {
+    max-width: 100px;
+  }
+}
+
+
+@media (max-width: 718px) {
+
+  // PER VERSIONE MOBILE
+  .landing>section.padding_testo {
+    padding-top: 0.5rem;
+    padding-bottom: 0.1rem;
+  }
+
+  .imgtitle {
+    padding: 0.25rem 0 0.25rem 0;
+  }
+
+}
+
+.landing>section.padding_testo {
+  padding-top: 1rem;
+  padding-bottom: 0.25rem;
+}
+
+.section_text {
+  padding: 10px;
+}
+
+.title {
+  font-size: 3rem;
+  padding: 4px 20px 4px 20px;
+  text-shadow: .2rem .2rem .2rem #3d3d3d;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  padding: 4px 20px 4px 20px;
+  text-shadow: .1rem .1rem .1rem #3d3d3d;
+}
+
+@media (max-width: 400px) {
+  .title {
+    font-size: 2.5rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+  }
+}
+
+.mylegendinside {
+  font-size: 1rem;
+  margin-bottom: 50px;
+  opacity: .8;
+
+}
+
+.mylegend {
+  text-align: center;
+  color: black;
+  font-size: 1rem;
+  font-style: italic;
+  opacity: .8;
+  text-shadow: .05rem .05rem .05rem #aeaeae;
+  z-index: 1000;
+
+  @media (max-width: 400px) {}
+}
+
+.align_top {
+  top: 100px;
+  margin-bottom: auto;
+}
+
+.align_top_left {
+  top: 50px;
+  left: 20px;
+  margin-right: auto;
+  margin-bottom: auto;
+}
+
+.align_middle {
+  vertical-align: middle;
+}
+
+.align_bottom {
+  margin-bottom: 30px;
+  margin-top: auto;
+}
+
+.align_bottom_left {
+  margin-bottom: 20px;
+  left: 20px;
+  margin-right: auto;
+  margin-top: auto;
+}

src/components/CImgPoster/CImgPoster.ts

@@ -0,0 +1,102 @@
+import { defineComponent, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+import { shared_consts } from '@src/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CImgPoster',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheight: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheightmobile: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    legendinside: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    legend: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    classTitle: String,
+    classSubtitle: String,
+    colorTitle: String,
+    colorSubtitle: String,
+    vertalign: Number,
+    speed: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    class_anim: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    class_anim2: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    logo: String,
+    logoheight: String,
+    logowidth: String,
+    fit: String,
+  },
+
+  setup(props) {
+    function getsrc(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+
+      return tools.getimgbysize(filefull.path, filefull.file)
+    }
+
+    function getaltimg(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+      return tools.getaltimg(filefull.path, filefull.file, props.title)
+    }
+
+    function myclass() {
+      let mycl = ''
+      if (props.vertalign === shared_consts.VERTALIGNTYPE.UP) {
+        mycl += ' align_top'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.CENTER) {
+        mycl += ' align_middle'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN) {
+        mycl += ' align_bottom'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN_LEFT) {
+        mycl += ' align_bottom_left'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.UP_LEFT) {
+        mycl += ' align_top_left'
+      }
+
+      return mycl
+    }
+
+    return {
+      getsrc,
+      getaltimg,
+      myclass,
+      tools,
+    }
+  },
+
+})

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>

src/components/CImgPoster/index.ts

@@ -0,0 +1 @@
+export { default as CImgPoster } from './CImgPoster.vue'