Case Animation

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-case-animation js-case-animation">
    <div class="c-case-animation__container js-phone-anim">
        <div class="c-case-animation__device-wrapper js-fixed-phone">

            <div class="c-case-animation__device js-case-animation__device">
                <picture>
                    <source media="(max-width: 768px)" srcset="../../images/case-animation/animation_device_mockup.png">
                    <img src="../../images/case-animation/animation_device_mockup.png" alt="">
                </picture>
            </div>

            <div class="c-case-animation__imagewrapper">
                <img class="c-case-animation__image js-case-animation__image" src="/images/case-animation/animation_screenshot_mock.jpg" srcset="/images/case-animation/animation_screenshot_mock.jpg 2x" alt="" />
                <img class="c-case-animation__sticky js-case-animation__sticky" src="/images/case-animation/animation_screenshot_header.jpg" srcset="/images/case-animation/animation_screenshot_header.jpg 2x" alt="" />
            </div>
        </div>

        <img class="c-case-animation__comp comp-0 par1" src="/images/case-animation/comp/0.png" srcset="/images/case-animation/comp/0.png 2x" alt="">

        <img class="c-case-animation__comp comp-1 par2" src="/images/case-animation/comp/1.png" srcset="/images/case-animation/comp/1.png 2x" alt="">

        <img class="c-case-animation__comp comp-2 par1" src="/images/case-animation/comp/2.png" srcset="/images/case-animation/comp/2.png 2x" alt="">

        <img class="c-case-animation__comp comp-3 par1" src="/images/case-animation/comp/3.png" srcset="/images/case-animation/comp/3.png 2x" alt="">

        <img class="c-case-animation__comp comp-4 par3" src="/images/case-animation/comp/4.png" srcset="/images/case-animation/comp/4.png 2x" alt="">

        <img class="c-case-animation__comp comp-5 par3" src="/images/case-animation/comp/5.png" srcset="/images/case-animation/comp/5.png 2x" alt="">

        <img class="c-case-animation__comp comp-6 par2" src="/images/case-animation/comp/6.png" srcset="/images/case-animation/comp/6.png 2x" alt="">

        <img class="c-case-animation__comp comp-7 par2" src="/images/case-animation/comp/7.png" srcset="/images/case-animation/comp/7.png 2x" alt="">

        <img class="c-case-animation__comp comp-8 par3" src="/images/case-animation/comp/8.png" srcset="/images/case-animation/comp/8.png 2x" alt="">

        <img class="c-case-animation__comp comp-9 par4" src="/images/case-animation/comp/9.png" srcset="/images/case-animation/comp/9.png 2x" alt="">

        <img class="c-case-animation__comp comp-10 par4" src="/images/case-animation/comp/10.png" srcset="/images/case-animation/comp/10.png 2x" alt="">

        <img class="c-case-animation__comp comp-11 par4" src="/images/case-animation/comp/11.png" srcset="/images/case-animation/comp/11.png 2x" alt="">
    </div>
</div>


        <div class="c-case-animation js-case-animation{% if modifier is defined %} {{ modifier }}{% endif %}">
	<div class="c-case-animation__container js-phone-anim">
		<div class="c-case-animation__device-wrapper js-fixed-phone">
			
			{# Device mockup #}
			<div class="c-case-animation__device js-case-animation__device">
				<picture>
					<source media="(max-width: 768px)" srcset="{{ "/images/case-animation/animation_device_mockup.png" | path }}">
					<img src="{{ "/images/case-animation/animation_device_mockup.png" | path }}" alt="">
				</picture>
			</div>

			{# Device screenshots #}
			<div class="c-case-animation__imagewrapper">
				<img class="c-case-animation__image js-case-animation__image" src="{{ mock.src }}" srcset="{{ mock.src}} 2x" alt="{{ mock.alt }}"/>
				{% if mockHead %}
					<img class="c-case-animation__sticky js-case-animation__sticky" src="{{ mockHead.src }}" srcset="{{ mockHead.src }} 2x" alt="{{ mockHead.alt }}"/>
				{% endif %}
			</div>
		</div>

		{# Floating parallax components #}
		{% for item in comps %}
			{# <img class="c-case-animation__comp comp-{{ loop.index0 }} par{{ item.parallax }}" src="{{ item.src }} 2x" srcset="{{ item.src }} 2x" alt=""> #}
			<img class="c-case-animation__comp comp-{{ item.comp }} par{{ item.parallax }}" src="{{ item.src }}" srcset="{{ item.src }} 2x" alt="{{ item.alt }}">
		{% endfor %}
	</div>
</div>

{# 
	Antonio:
	in srcset="{{ item.src }} uso item.src invece di srcset="{{ item.srcset }} perché altrimenti il plugin optimizedImages genera un set di immagini responsive che in questo caso non ci serve. Quindi lascio caricare la stessa immagine sia per 'src' che per 'srcset'
 #}


        
            
            {
  "comps": [
    {
      "src": "/images/case-animation/comp/0.png",
      "srcset": "/images/case-animation/comp/0.png",
      "parallax": 1,
      "comp": 0
    },
    {
      "src": "/images/case-animation/comp/1.png",
      "srcset": "/images/case-animation/comp/1.png",
      "parallax": 2,
      "comp": 1
    },
    {
      "src": "/images/case-animation/comp/2.png",
      "srcset": "/images/case-animation/comp/2.png",
      "parallax": 1,
      "comp": 2
    },
    {
      "src": "/images/case-animation/comp/3.png",
      "srcset": "/images/case-animation/comp/3.png",
      "parallax": 1,
      "comp": 3
    },
    {
      "src": "/images/case-animation/comp/4.png",
      "srcset": "/images/case-animation/comp/4.png",
      "parallax": 3,
      "comp": 4
    },
    {
      "src": "/images/case-animation/comp/5.png",
      "srcset": "/images/case-animation/comp/5.png",
      "parallax": 3,
      "comp": 5
    },
    {
      "src": "/images/case-animation/comp/6.png",
      "srcset": "/images/case-animation/comp/6.png",
      "parallax": 2,
      "comp": 6
    },
    {
      "src": "/images/case-animation/comp/7.png",
      "srcset": "/images/case-animation/comp/7.png",
      "parallax": 2,
      "comp": 7
    },
    {
      "src": "/images/case-animation/comp/8.png",
      "srcset": "/images/case-animation/comp/8.png",
      "parallax": 3,
      "comp": 8
    },
    {
      "src": "/images/case-animation/comp/9.png",
      "srcset": "/images/case-animation/comp/9.png",
      "parallax": 4,
      "comp": 9
    },
    {
      "src": "/images/case-animation/comp/10.png",
      "srcset": "/images/case-animation/comp/10.png",
      "parallax": 4,
      "comp": 10
    },
    {
      "src": "/images/case-animation/comp/11.png",
      "srcset": "/images/case-animation/comp/11.png",
      "parallax": 4,
      "comp": 11
    }
  ],
  "mock": {
    "src": "/images/case-animation/animation_screenshot_mock.jpg",
    "srcset": "/images/case-animation/animation_screenshot_mock.jpg"
  },
  "mockHead": {
    "src": "/images/case-animation/animation_screenshot_header.jpg",
    "srcset": "/images/case-animation/animation_screenshot_header.jpg"
  }
}

File:

Content:


                                .c-case-animation {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: #e9ecf7;
  overflow-x: hidden;
}

.c-case-animation__container {
  height: remify(2600px);
}

.c-case-animation__device-wrapper {
  position: absolute;
  z-index: 20;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: remify(240px);
  margin: 0 auto;
  overflow: hidden;

  @include min-screen(bp(large)) {
    max-width: remify(320px);
  }
}

.c-case-animation__device {
  position: relative;
  top: 0;
  z-index: 10;
}

.c-case-animation__imagewrapper {
  position: absolute;
  z-index: 2;
  top: remify(13px);
  left: remify(15px);
  bottom: remify(15px);
  width: 89%;
  overflow: hidden;

  @include min-screen(bp(large)) {
    top: remify(15px);
    left: remify(18px);
  }
}

.c-case-animation__image {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
}

.c-case-animation__sticky {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.c-case-animation__comp {
  position: absolute;
  @include shadow(level-400);
}

.c-case-animation .comp-0 {
  top: 3%;
  left: 50%;
  margin-left: remify(200px);
  z-index: 1;
  box-shadow: none;
}

.c-case-animation .comp-1 {
  top: 9%;
  right: 50%;
  margin-right: remify(230px);
  z-index: 1;
}

.c-case-animation .comp-2 {
  top: 14%;
  left: 50%;
  margin-left: remify(210px);
  z-index: 30;
}

.c-case-animation .comp-3 {
  top: 25%;
  right: 50%;
  margin-right: remify(200px);
  z-index: 10;
}

.c-case-animation .comp-4 {
  top: 32%;
  left: 50%;
  margin-left: remify(150px);
  z-index: 10;
}

.c-case-animation .comp-5 {
  top: 35%;
  right: 50%;
  margin-right: remify(250px);
  z-index: 10;
}

.c-case-animation .comp-6 {
  top: 42%;
  left: 50%;
  margin-left: remify(130px);
  z-index: 30;
}

.c-case-animation .comp-7 {
  top: 50%;
  right: 50%;
  margin-right: remify(180px);
  z-index: 30;
}

.c-case-animation .comp-8 {
  top: 57%;
  left: 50%;
  margin-left: remify(280px);
  z-index: 10;
}

.c-case-animation .comp-9 {
  top: 65%;
  right: 50%;
  margin-right: remify(210px);
  z-index: 30;
}

.c-case-animation .comp-10 {
  top: 70%;
  left: 50%;
  margin-left: remify(140px);
  z-index: 10;
}

.c-case-animation .comp-11 {
  top: 78%;
  right: 50%;
  margin-right: remify(170px);
  z-index: 30;
}

/*------------------------------------*
  I-Tel modifier
*------------------------------------*/
.c-case-animation--itel {
  .comp {box-shadow: 0 2px 50px 0 rgba(122,145,197,0.20);  }
  .comp-0 {position: absolute; top: 3%;  left: 50%; margin-left: 200px; z-index: 1; }
  .comp-1 {position: absolute; top: 9%;  right: 50%; margin-right: 230px; z-index: 1; }
  .comp-2 {position: absolute; top: 14%; left: 50%; margin-left: 210px; z-index: 30; }
  .comp-3 {position: absolute; top: 25%; right: 60%; margin-right: 200px; z-index: 10; }
  .comp-4 {position: absolute; top: 32%; left: 62%; margin-left: 130px; z-index: 10; }
  .comp-5 {position: absolute; top: 44%; right: 50%; margin-right: 250px; z-index: 10; }
  .comp-6 {position: absolute; top: 52%; left: 57%; margin-left: 130px; z-index: 30; }
  .comp-7 {position: absolute; top: 70%; right: 56%; margin-right: 150px; z-index: 30; }
}

/*------------------------------------*
  Comet modifier
*------------------------------------*/
.c-case-animation--comet {
  .comp {box-shadow: 0 2px 50px 0 rgba(122,145,197,0.20);  }
  .comp-0 {position: absolute; top: 3%;  left: 50%; margin-left: 200px; z-index: 1; }
  .comp-1 {position: absolute; top: 9%;  right: 50%; margin-right: 230px; z-index: 1; }
  .comp-2 {position: absolute; top: 14%; left: 50%; margin-left: 210px; z-index: 30; }
  .comp-3 {position: absolute; top: 34%; right: 60%; margin-right: 200px; z-index: 10; }
  .comp-4 {position: absolute; top: 32%; left: 62%; margin-left: 130px; z-index: 10; }
  .comp-5 {position: absolute; top: 44%; right: 50%; margin-right: 250px; z-index: 10; }
  .comp-6 {position: absolute; top: 52%; left: 57%; margin-left: 130px; z-index: 30; }
  .comp-7 {position: absolute; top: 55%; right: 56%; margin-right: 150px; z-index: 30; }
}

URL: /components/raw/case-animation/_case-animation.scss
Filesystem Path: src/pattern-library/02-components/case-animation/_case-animation.scss
Size: 4.2 KB

Handle: @case-animation
Preview:
- With layout
- Component only
Filesystem Path: src/pattern-library/02-components/case-animation/case-animation.twig

No notes defined.