Search code examples
htmlcsssvginline-svg

Scaled/Proportional inline SVG

I made this animated section using some inline svg as clip-path and AOS library. The idea is to animate each slice of the image with a different animation. This markup is working and is IE10+ capable. But I really cannot understand how to make this section responsive, I mean how can I fit the entire section to 100% of the screen(or better 90%), if the width of the screen goes below the fixed width of the svg. Please help me at least for a starting point. Many thanks

Here is a working codepen(the animation on scroll doesn't work very well in the codepen box, so you have to resize the box up and down to test the animation)

CODEPEN

AOS.init();
.sezione-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    height: 50px;
    margin: 100px 0 250px 0;
    font-family: 'Raleway', sans-serif;
}
.cta-image-container svg{
    position: absolute;
}
.cta-image-container {
    width: 640px;
    height: 580px;
    margin: 0 25px 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}
.svg-cta-image {
    width: 640px;
    height: 580px;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}
.cta-image-container:after {
    content: 'VIAGGIA';
    position: absolute;
    top: 0;
    left: 80px;
    font-size: 250px;
    font-weight: 600;
    line-height: 0.5;
    z-index: 0;
    color: #000;
    text-shadow: 6px 6px 7px rgba(0,0,0,0.5);
}
.sezione-cta .cta-text {
    width: 350px;
    margin: 0 25px -10px 25px;
}
.sezione-cta h3 {
    font-size: 35px;
    margin: 0;
    font-weight: 400;
}
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<svg class="split-defs" style="position:absolute;"><defs>
	<clipPath id="split-1-3"><polygon points="222,580 0,580 0.12,0 176,0"></polygon></clipPath>
	<clipPath id="split-2-3"><polygon points="400,0 196,0 242,580 446,580"></polygon></clipPath>
	<clipPath id="split-3-3"><polygon points="640,0 420,0 466,580 640,580"></polygon></clipPath>
	<filter id="desaturate"><feColorMatrix type="saturate" values="0"></feColorMatrix>
 	</filter></defs></svg>

<div class="sezione-cta sezione-cta-viaggia">
	<div class="cta-image-container aos-init aos-animate" data-aos="fade-right" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-anchor-placement="bottom-bottom">
	<div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
		<svg class="svg-cta-image"><image filter="url(#desaturate)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
	</div>
	<div data-aos="fade-down" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
		<svg class="svg-cta-image"><image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
	</div>
	<div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
		<svg class="svg-cta-image"><image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
	</div>
</div>

<div class="cta-text aos-init aos-animate" data-aos="fade-left" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out"><h3>Per noi viaggiare significa <b>EMOZIONARSI</b>. Abbiamo gli ingredienti giusti per rendere <b>il tuo viaggio memorabile!</b></h3></div>
</div>

Solution

  • At the moment everything on your page has been given absolute sizes and in some cases, absolute positions on the page.

    There are two approaches you can take to make your page responsive:

    1. Add media queries for everthing on your page to resize them for different browser widths.

      @media (min-width: 1000px) { ... style the size of something here }

    2. Style the size of things relative to their parent containers.

    They are not mutually exclusive either. If you do #2, then you can use media queries to tweak the size or position of things for better layouts on some sizes or orientations.

    Even if you do end up choosing to add a few media queries. Using relative size approach from #2 will mean that you'll almost certainly need fewer rules than you would need with approach #1.

    In the following example I have:

    1. Made your parent container position: relative. When you do that, any absolutely positioned child elements are relative to that, instead of the page.

      .sezione-cta {
  position: relative;
}

    2. Give your cta-image-container a size relative to the page width.

      .cta-image-container {
  width: 45vw;
  height: 45vw;
}

    3. Given your SVGs viewBoxes so they scale automatically

      viewBox="0 0 640 580"

    4. Specified SVG width to be 100% of cta-image-container.

      .svg-cta-image {
  width: 100%;
}

    5. Give your "VIAGGA" text a size and position thats relative to its parent and the page width.

      .cta-image-container:after {
  left: 25%;
  font-size: 17vw;
}


    AOS.init();
    .sezione-cta {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    height: 50px;
    margin: 100px 0 250px 0;
    font-family: 'Raleway', sans-serif;
    position: relative;
}
.cta-image-container {
    width: 45vw;
    height: 45vw;
    margin: 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image-container svg {
    position: absolute;
}
.svg-cta-image {
    width: 100%;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}
.cta-image-container:after {
    content: 'VIAGGIA';
    position: absolute;
    top: 0;
    left: 25%;
    font-size: 17vw;
    font-weight: 600;
    line-height: 0.5;
    z-index: 0;
    color: #000;
    text-shadow: 6px 6px 7px rgba(0,0,0,0.5);
}
.sezione-cta .cta-text {
    width: 350px;
    margin: 0 25px 0 25px;
}
.sezione-cta h3 {
    font-size: 35px;
    margin: 0;
    font-weight: 400;
}
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<svg class="split-defs" style="position:absolute;"><defs>
	<clipPath id="split-1-3"><polygon points="222,580 0,580 0.12,0 176,0"></polygon></clipPath>
	<clipPath id="split-2-3"><polygon points="400,0 196,0 242,580 446,580"></polygon></clipPath>
	<clipPath id="split-3-3"><polygon points="640,0 420,0 466,580 640,580"></polygon></clipPath>
	<filter id="desaturate"><feColorMatrix type="saturate" values="0"></feColorMatrix>
 	</filter></defs></svg>

<div class="sezione-cta sezione-cta-viaggia">
  <div class="cta-image-container aos-init aos-animate" data-aos="fade-right" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-anchor-placement="bottom-bottom">
    <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image filter="url(#desaturate)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
    <div data-aos="fade-down" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
    <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
  </div>

  <div class="cta-text aos-init aos-animate" data-aos="fade-left" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out"><h3>Per noi viaggiare significa <b>EMOZIONARSI</b>. Abbiamo gli ingredienti giusti per rendere <b>il tuo viaggio memorabile!</b></h3></div>
</div>