Splash Morph

In this example below you will see how to do a Splash Morph with some HTML / CSS and Javascript

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

Technologies

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

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

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

  
</head>

<body>

  <device-body>
	<slider-item><img src="https://images.unsplash.com/photo-1446108440972-3798c860067c?dpr=2&fit=crop&fm=jpg&h=625&ixlib=rb-0.3.5&q=50&w=1300"></slider-item>
	<splash-body></splash-body>
	<nav>
		<cart-icon></cart-icon>
	</nav>
	<logo-icon>
				<svg xmlns="http://www.w3.org/2000/svg" version="1" id="Layer_1" x="0" y="0" viewBox="0 0 1417 567" xml:space="preserve"><style type="text/css">.st0{fill:#D0C4BF;}.st1{fill:#C6A085;}.st2{fill:#C5A186;}.st3{fill:#D1C6C1;}.st4{fill:#D0C3BD;}.st5{fill:#F3F2F2;}.st6{fill:#CFC3BD;}.st7{fill:#CEC1BB;}.st8{fill:#EB7D30;}</style><g id="KjGyqR.tif"><path class="st0" d="M1213 45c0 0 0 1 0 1 -6 3-13 3-19 0 0 0 0-1 0-1C1200 45 1207 45 1213 45z"/><path class="st1" d="M208 522c-6 0-12 0-18 0 0-1 0-1 0-2 6-1 11-1 17 0C208 521 208 521 208 522z"/><path class="st2" d="M901 522c-5 0-11 0-16 0 0-1 0-1 0-1 5-1 10-1 15 0C901 521 901 521 901 522z"/><path class="st3" d="M1365 181l0 0 0 0c-2-2-2-5-1-8 0-1 1-1 2 0C1365 176 1365 178 1365 181z"/><path class="st3" d="M190 521c0 0 0 1 0 1 -2 0-4 0-6 0 0 0 0-1 0-1C186 519 188 519 190 521z"/><path class="st4" d="M208 522c0 0 0-1 0-1 2-2 4-2 6 0 0 0 0 1 0 1C212 522 210 522 208 522z"/><path class="st5" d="M1365 173l0 0 0 0c-2-2-2-3 0-5 0 0 1 0 1 0C1365 170 1365 171 1365 173z"/><path class="st6" d="M885 521c0 0 0 1 0 1 -2 0-3 0-5 0 0 0 0-1 0-1C882 520 883 520 885 521z"/><path class="st7" d="M901 522c0 0 0-1 0-1 2-2 3-2 5 0 0 0 0 1 0 1C904 522 903 522 901 522z"/><path class="st8" d="M1364 168c0 2 0 3 0 5 0 3 0 5 0 8 0 24-6 46-21 65 -11 14-25 24-39 34 -14 10-29 18-42 29 -12 10-17 23-18 38 0 4-1 7-1 11 0 3-1 4-4 4 -31 0-62 0-93 0 -2 0-4 1-4-3 1-17-1-33 2-50 4-22 15-39 32-54 13-11 27-20 41-30 12-9 23-19 27-35 8-28-10-52-39-52 -16 0-30 4-41 16 -9 9-12 21-14 33 -1 5-1 10-1 15 0 3-1 4-4 4 -35 0-70 0-105 0 -2 0-3 0-3-3 2-37 10-71 34-100 21-26 48-41 80-50 15-4 29-6 44-6 6 0 13 0 19 0 34 1 66 9 95 28C1343 96 1361 127 1364 168z"/><path class="st8" d="M214 521c-2 0-4 0-6 0 -6 0-12 0-18 0 -2 0-4 0-6 0 -29-2-57-8-82-23C74 480 58 455 54 422c0-3-1-6-1-9 0-7 0-7 7-7 21 0 41 0 62 0 3 0 4 1 4 4 5 33 27 49 58 53 21 3 43 1 63-6 9-3 17-8 22-16 10-15 6-36-9-47 -13-10-29-14-45-18 -26-6-52-10-78-18 -15-4-29-10-42-19 -19-13-30-30-34-52 -4-26-1-51 17-72 12-14 27-22 43-29 23-9 46-13 71-13 27-1 54 3 79 13 37 16 58 43 65 82 1 6 1 6-5 6 -22 0-44 0-66 0 -2 0-4 1-5-3 -5-22-20-34-41-39 -22-4-44-4-65 4 -11 4-19 11-20 23 -2 13 4 23 14 30 5 3 10 6 16 8 19 7 38 11 58 15 27 6 54 11 79 24 24 12 41 30 46 57 8 44-8 81-49 105C275 511 252 517 227 520 223 521 218 521 214 521z"/><path class="st8" d="M541 458c7 0 14 0 20 0 58 0 116 0 174 0 5 0 6 1 6 6 0 16 0 32 0 48 0 3-1 4-4 4 -94 0-189 0-283 0 -4 0-4-1-4-5 0-14 0-29 0-43 0-2 1-4 2-6 54-65 107-130 161-195 7-8 13-16 20-24 -2-1-4-1-6-1 -53 0-106 0-158 0 -5 0-6-1-6-6 0-16 0-32 0-48 0-3 1-4 4-4 87 0 174 0 261 0 3 0 4 1 4 4 0 15 0 29 0 44 0 3-1 4-2 6 -47 56-95 111-142 167 -14 16-27 32-41 48C544 454 543 456 541 458z"/><path class="st8" d="M433 350c0 53 0 105 0 157 0 4-1 6-6 6 -21 0-41 0-62 0 -4 0-6-1-6-5 0-94 0-189 0-283 0-11 0-22 0-33 0-5 2-6 6-6 20 0 41 0 61 0 5 0 6 1 6 6C433 244 433 297 433 350z"/><path class="st8" d="M1193 394c18 0 36 0 55 0 4 0 5 1 5 5 0 37 0 73 0 110 0 4-1 5-5 5 -37 0-73 0-110 0 -3 0-5-1-5-4 0-37 0-74 0-110 0-4 1-4 5-4C1156 394 1174 394 1193 394z"/><path class="st8" d="M396 124c-10 0-21 0-31 0 -3 0-5-1-5-4 0-20 0-40 0-60 0-3 1-5 4-4 22 0 43 0 65 0 3 0 4 1 4 4 0 20 0 41 0 61 0 4-1 4-5 4C417 124 407 124 396 124z"/><path class="st8" d="M1040 282c-25-76-95-120-174-108 -50 8-87 34-111 78 -29 52-30 108-13 164 9 28 24 52 47 71 27 22 58 32 91 34 2 0 3 0 5 0 5 0 11 0 16 0 2 0 3 0 5 0 8 0 17-1 25-3 57-13 96-47 112-104 1-4 0-5-3-4 -20 0-40 0-59 0 -4 0-6 1-7 5 -7 18-18 33-36 42 -18 9-37 10-56 8 -27-3-47-16-61-39 -9-15-13-32-14-50 0-8-1-8 8-8 77 0 153 0 230 0 4 0 6 0 6-5C1051 334 1048 308 1040 282zM970 318c-27 0-54 0-80 0 -26 0-52 0-78 0 -7 0-7 0-6-6 3-34 24-66 60-78 46-14 91 11 105 58 2 7 3 14 4 21C975 317 974 318 970 318z"/></g></svg>
			</logo-icon>
</device-body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/alexnewman/splash-morph-VvERWd */
* {
  box-sizing: border-box;
}
body {
  display: flex;
  min-height: 100vh;
}
nav {
  height: 50px;
  width: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}
slider-item {
  margin-top: 50px;
  transition: -webkit-transform 0.4s ease-out 0s;
  transition: transform 0.4s ease-out 0s;
  transition: transform 0.4s ease-out 0s, -webkit-transform 0.4s ease-out 0s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
slider-item img {
  max-width: 100%;
}
slider-item.slide-down {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
device-body {
  background: #eaeaea;
  margin: auto;
  width: 50vmin;
  height: 90vmin;
  position: relative;
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  device-body {
    width: 100vmin;
    height: 100vh;
  }
}
@media screen and (max-height: 500px) {
  device-body {
    height: 100vmin;
    width: 100vmin;
  }
}
splash-body {
  background: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.25s -webkit-transform ease;
  transition: 0.25s transform ease;
  transition: 0.25s transform ease, 0.25s -webkit-transform ease;
  -webkit-transform-origin: top;
          transform-origin: top;
  top: 0;
  left: 0;
}
logo-icon {
  margin: auto;
  position: absolute;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
logo-icon svg {
  margin: auto;
  width: 50%;
}
.slide-up {
  -webkit-transform: scale(0.5) translateY(-81vmin);
          transform: scale(0.5) translateY(-81vmin);
}
.slide-body {
  -webkit-transform: scale(1, 0.1);
          transform: scale(1, 0.1);
}


/*Downloaded from https://www.codeseek.co/alexnewman/splash-morph-VvERWd */
// $('splash-body').addClass('slide-up')

$('html').on('click', function() {
	$('logo-icon').toggleClass('slide-up');
	$('splash-body').toggleClass('slide-body')
	$('slider-item').toggleClass('slide-down')
});

Comments