Unewatch - Artefact

In this example below you will see how to do a Unewatch - Artefact with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 123Jon4, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 123Jon4 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Unewatch - Artefact</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="full-height flex-center horizontal vertical">
  <div id="screen-border" class="screen border flex-center horizontal vertical">
    <div id="screen" class="screen">
      <div id="wrapper">
        <div id="app" class="full-height center text-center">
          <artefact></artefact>
        </div>
      </div>
    </div>
  </div>
</div>

<template id="artefact">
  <div>
    <artefact-name v-if="showName" :artefact-name='name' @confirmed="next"></artefact-name>
          <div  style="width:100%;transform:translate(0,-100px);filter:url('#turbulence')">
            <img src="http://www.museum-unewatt.de/fileadmin/user_upload/galerie/DSC03121-min.JPG" class="reveal">
          </div>
    <svg xlmns="http://www.w3.org/2000/svg" version="1.1">
  <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="feturbulence" type="fractalNoise" baseFrequency=".05 .05"  numOctaves="3" seed="2">
    <animate attributeName="baseFrequency" attributeType="auto" to="0 0" dur="20s" fill="freeze"/>
    </feTurbulence>
    <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
  </filter>
</svg>
    </div>
  </template>

<template id="artefact-name">
  <div @click="confirm" style="position:absolute;height:100%;width:100%;z-index:9999">
    <div style="    position: absolute;
    bottom: 0px;
    left: 50%;
    text-align: center;
    background: rgba(255,255,255,.8);
    padding: .5em;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 30px;
    transform: translate(-50%, -100%);">
      {{artefactName}}
      </div>
   </div>
 </template>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://unpkg.com/vue@2.2.1'></script>
<script src='https://unpkg.com/vue-touch-easyhi@2.0.0'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/123Jon4/unewatch-artefact-PmxXZr */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.full-height{
  height:100%;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  margin: 0;
  padding: 0;
}

body {
  background: #41295a;
  background: linear-gradient(to left, #41295a, #2F0743);
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  max-height: 100%;
}

#canvas-basic {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.screen {
  width: 360px;
  min-width:360px;
  height: 360px;
  -webkit-clip-path: circle(50% at center);
  clip-path: circle(50% at center);
  overflow: hidden;
  background: #f5f5f5;
  box-sizing: border-box;
}

.screen.border {
  width: 385px;
  height: 385px;
  background: #304352;
  background: linear-gradient(to top, #304352, #d7d2cc);
  padding:0;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.flex-center{
     display: flex;
}
.flex-center.horizontal{
  justify-content: center;
}

.flex-center.vertical{
  align-items: center;
}

.center {
  position: absolute;
  width: 100%;
}

.center.horizontal {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin: 0 auto;
}

.center.vertical {
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.center.both {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text-center {
  text-align: center;
}

.template {
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  transition: all 1s;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}

.unsupported {
  color: lightgrey;
}

.inline {
  display: inline;
}

.absolute-center{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

h1{
  font-family: Origicide;
}

.superscript {
    font-size: .2em;
    line-height: 0.5em;
    vertical-align: super;
    position: relative;
    top: -1em;
}

/*******FONTS*********/

@font-face {
    font-family: Long Shot;
    src: url(http://res.cloudinary.com/dhzspa5nj/raw/upload/v1490859314/long_shot-webfont_onvqov.woff);
}

@font-face {
    font-family: Tannenberg;
    src: url(http://res.cloudinary.com/dhzspa5nj/raw/upload/v1490859314/tannenbergfett-webfont_e5jsbq.woff);
}

@font-face {
    font-family: Origicide;
    src: url(http://res.cloudinary.com/dhzspa5nj/raw/upload/v1490859314/origicide-webfont_ogvmph.woff);
}


/************************/
@-webkit-keyframes reveal{
  0% {
    -webkit-transform:scale(1.2);
            transform:scale(1.2);
    -webkit-filter:grayscale(1) blur(5px);
            filter:grayscale(1) blur(5px);
  } 
  100%{
    -webkit-transform:scale(1);
            transform:scale(1);
    -webkit-filter:grayscale(0) blur(0px);
            filter:grayscale(0) blur(0px)
  }
}
@keyframes reveal{
  0% {
    -webkit-transform:scale(1.2);
            transform:scale(1.2);
    -webkit-filter:grayscale(1) blur(5px);
            filter:grayscale(1) blur(5px);
  } 
  100%{
    -webkit-transform:scale(1);
            transform:scale(1);
    -webkit-filter:grayscale(0) blur(0px);
            filter:grayscale(0) blur(0px)
  }
}

.reveal{
  -webkit-animation: reveal 30s;
          animation: reveal 30s;
}

@keyframe turbulence{
  0%{
    base-frequency: 0 0
  }
}

@-webkit-keyframes squigglevision {
  0% {
    -webkit-filter: url("#turbulence-1");
            filter: url("#turbulence-1");
  }
  25% {
    -webkit-filter: url("#turbulence-2");
            filter: url("#turbulence-2");
  }
  50% {
    -webkit-filter: url("#turbulence-3");
            filter: url("#turbulence-3");
  }
  75% {
    -webkit-filter: url("#turbulence-4");
            filter: url("#turbulence-4");
  }
  100% {
    -webkit-filter: url("#turbulence-5");
            filter: url("#turbulence-5");
  }
}

@keyframes squigglevision {
  0% {
    -webkit-filter: url("#turbulence-1");
            filter: url("#turbulence-1");
  }
  25% {
    -webkit-filter: url("#turbulence-2");
            filter: url("#turbulence-2");
  }
  50% {
    -webkit-filter: url("#turbulence-3");
            filter: url("#turbulence-3");
  }
  75% {
    -webkit-filter: url("#turbulence-4");
            filter: url("#turbulence-4");
  }
  100% {
    -webkit-filter: url("#turbulence-5");
            filter: url("#turbulence-5");
  }
}

.squiggle {
  -webkit-animation: squigglevision 0.4s infinite alternate;
          animation: squigglevision 0.4s infinite alternate;
}

/*Downloaded from https://www.codeseek.co/123Jon4/unewatch-artefact-PmxXZr */


Vue.component("artefact-name", {
  template: "#artefact-name",
  props: ["artefactName"],
  methods: {
    confirm: function confirm() {
      this.$emit("confirmed");
    }
  },
  mounted: function mounted() {}
});

Vue.component('artefact', {
  template: '#artefact',
  data: function data() {
    return {
      showName: false,
      name: 'Webstuhl'
    };
  },

  methods: {
    next: function next() {
      console.log('Success');
    }
  },
  mounted: function mounted() {/*
                               var feTurb = document.querySelector('#feturbulence');
                               var tl = new TimelineMax({onComplete:function(){
                               app.showName=true
                               }});
                               tl.add(
                               TweenMax.to(feTurb, 30, {
                               attr:{
                               baseFrequency:'0 0'
                               }
                               }))*/
  }
});

var app = new Vue({
  el: '#app'
});

Comments