Sherlock smoking

index.html

<div class="ag-sherlock-block">
  <div class="ag-format-container">
    <div class="ag-sherlock">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 270 340" class="ag-sherlock_smoke">
        <mask id="smokeBlick1" x="0" y="0" width="100%" height="100%">
          <image xlink:href="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/smoke-1.png" width="168" height="238" x="58" y="92"></image>
        </mask>
        <mask id="smokeBlick2" x="0" y="0" width="100%" height="100%">
          <image xlink:href="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/smoke-3.png" width="124" height="246" x="69" y="79"></image>
        </mask>
        <image id="blickSmoke1" mask="url(#smokeBlick1)" xlink:href="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/smoke-2.png" width="143" height="397" x="83" y="112.564" style="opacity: 0.5;">
          <animate attributeName="y" attributeType="XML" from="332" to="-280" dur="12s" begin="0s" repeatCount="indefinite"></animate>
        </image>
        <image id="blickSmoke2" mask="url(#smokeBlick2)" xlink:href="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/smoke-4.png" width="169" height="287" x="69" y="19.2447" style="opacity: 0.5;">
          <animate attributeName="y" attributeType="XML" from="305" to="-180" dur="9s" begin="5s" repeatCount="indefinite"></animate>
        </image>
      </svg>
    </div>
  </div>
</div>

script.js

(function ($) {
  $(function () {

    

  });
})(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

sherlock-smoking.markdown

Sherlock smoking

A Pen by Wikyware Net on CodePen.

License.

style.css

.ag-format-container {
  width: 1142px;
  margin: 0 auto;
}

.ag-sherlock-block {
  background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/city.jpg) no-repeat scroll 50% 0 #000;
  background-size: cover;
}
.ag-sherlock {
  height: 73.375em;
  width: 45.8125em;
  background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sherlock-smoking/images/sherlock.png) no-repeat scroll 0 0;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;

  z-index: 5;
  position: relative;
}
.ag-sherlock_smoke {
  display: block;
  height: 21.25em;
  width: 16.875em;

  opacity: 1;

  position: absolute;
  top: -7.9375em;
  right: -5.8125em;

  -webkit-transition: opacity 2.4s linear;
  -moz-transition: opacity 2.4s linear;
  -o-transition: opacity 2.4s linear;
  transition: opacity 2.4s linear;
}


@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }

}

@media only screen and (max-width: 639px) {

}

@media only screen and (max-width: 479px) {

}

@media (min-width: 768px) and (max-width: 979px) {
  .ag-format-container {
    width: 750px;
  }

}

@media (min-width: 980px) and (max-width: 1161px) {
  .ag-format-container {
    width: 960px;
  }

}

styles

<link href="https://rawcdn.githack.com/SochavaAG/example-mycode/master/_common/css/reset.css" rel="stylesheet" />